New Aristocracy Theme (DEV)
/* NEW ARISTOCRACY THEME
   [2021 Wikidot Theme]
   by Dr Hormress, CC BY-SA 3.0 */
 
/* MAIN */
 
div#content-wrap {
    margin: var(--topbar-height) auto 0;
}
 
/* HEADER */
 
div#container-wrap,
div#header {
    background-image: none;
}
 
div#header {
    position: sticky;
    top: calc(var(--header-height) * -1);
    z-index: 20;
}
 
div#header *:not(#top-bar) {
 
}
 
div#header h1,
div#header h2 {
    float: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
}
 
div#header h1 a,
div#header h1 a span,
div#header h2 span {
    margin: 0;
    padding: 0;
    line-height: 1;
    max-width: unset;
    max-height: unset;
    letter-spacing: 0;
}
 
div#header #login-status {
    right: unset;
    left: 0;
}
 
div#header #search-top-box {
    top: 0;
}
 
/* TOPBAR MENU */
 
body::before {
    content: "";
    display: block;
    position: sticky;
    margin-top: calc(var(--header-height) + var(--header-menu-height));
    top: 0;
    width: 100%;
    height: var(--topbar-height);
    background-color: transparent;
    background-image: var(--topbar-gradient-bottom);
    z-index: 20;
}
 
div#container-wrap-wrap::before{
    content: "";
    display: block;
    position: sticky;
    top: 0;
    margin-top: var(--header-menu-height);
    z-index: 15;
    width: 100%;
    height: var(--topbar-height);
    background-color: rgb(var(--topbar-bg-color));
    background-image: var(--topbar-gradient-top);
}
 
div#container-wrap-wrap {
    margin-top: calc(var(--header-height) * -1 + var(--topbar-height) * -1 + var(--header-menu-height) * -1);
}
 
div#container-wrap {
    margin-top: calc(var(--header-menu-height) * -1);
}
 
div#top-bar {
    z-index: 20;
    width: 100%;
    position: absolute;
    top: var(--header-height);
    height: var(--topbar-height);
    background-color: transparent;
    background-image: none;
}
 
div#top-bar * {
    margin: 0;
}
 
@media (max-width: 767px) {
div#top-bar div {
    width: calc(100% - var(--topbar-height));
    margin-left: var(--topbar-height);
}
}
 
div#top-bar div div.open-menu a {
    border: none;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: calc(var(--topbar-height) * -1);
    background-color: transparent;
    color: rgb(var(--topbar-button-color));
    width: var(--topbar-height);
    height: var(--topbar-height);
    line-height: var(--topbar-height);
}
 
div#top-bar div div.open-menu a:hover {
    box-shadow: none;
}
 
div#top-bar div > ul {
    float: none;
    width: 100%;
    display: flex;
}
 
div#top-bar div > ul > li {
    flex-grow: 1;
    position: static;
}
 
div#top-bar div > ul > li > a {
    margin: 0;
    padding: 0;
    border: none;
    max-height: unset;
    height: var(--topbar-height);
    line-height: var(--topbar-height);
    color: rgb(var(--topbar-text-color));
    transition: ease var(--base-transition-time);
    -webkit-transition: ease var(--base-transition-time);
}
 
div#top-bar div > ul > li:hover > a,
div#top-bar div > ul > li.sfhover > a {
    border: none;
    color: rgb(var(--topbar-menu-text-color));
    background-color: rgba(var(--topbar-menu-bg-color), 0.75);
    background-image: var(--topbar-hover-gradient);
}
 
div#top-bar div > ul > li:hover > a:hover,
div#top-bar div > ul > li.sfhover > a:hover {
    background-color: rgba(var(--topbar-menu-bg-color), 0.87);
    background-image: var(--topbar-hover-gradient);
}
 
div#top-bar div > ul > li > ul > li > a,
div#top-bar div > ul > li:hover > ul > li > a,
div#top-bar div > ul > li.sfhover > ul > li > a {
    display: block;
    height: var(--topbar-height);
    line-height: var(--topbar-height);
}
 
@media (max-width: 767px) {
div#top-bar div > ul > li > ul {
    position: fixed;
    left: 0;
}
 
div#top-bar div > ul > li > ul > li > a,
div#top-bar div > ul > li:hover > ul > li > a,
div#top-bar div > ul > li.sfhover > ul > li > a {
    box-sizing: border-box;
    width: 50vw;
}
}
 
/* SIDEBAR MENU */
 
@media (max-width: 767px) {
div#side-bar {
    position: fixed;
    top: 0;
    transition: ease var(--base-transition-time);
    -webkit-transition: ease var(--base-transition-time);
}
}
 
/* PAGE CONTENT */
 
/* FOOTER */
 
/* VARIANTS */
 
:root {
    /* lengths */
    --header-height: 9rem;
    --header-menu-height: 2rem;
    --topbar-height: 2rem;
    --base-transition-time: 0.5s;
    /* colors */
    --light-accent: 252, 72, 72;
    --main-accent: 225, 15, 15;
    --dark-accent: 114, 5, 14;
    --white-monochrome: 255, 255, 255;
    --black-monochrome: 0, 0, 0;
    --topbar-bg-color: var(--white-monochrome);
    --topbar-border-color: var(--black-monochrome);
    --topbar-text-color: var(--black-monochrome);
    --topbar-button-color: var(--topbar-text-color);
    --topbar-menu-bg-color: var(--black-monochrome);
    --topbar-menu-border-color: var(--topbar-border-color);
    --topbar-menu-text-color: var(--white-monochrome);
    --topbar-hover-border-color: var(--main-accent);
    --topbar-hover-bg-color: var(--dark-accent);
    /* gradients */
    --topbar-gradient-top: linear-gradient(to bottom, rgb(var(--topbar-border-color)) 0, transparent 2px);
    --topbar-gradient-bottom: linear-gradient(to top, rgb(var(--topbar-border-color)) 0, transparent 2px);
    --topbar-hover-gradient: linear-gradient(to bottom, rgb(var(--topbar-hover-border-color)) 0, transparent 2px, transparent calc(100% - 2px), rgb(var(--topbar-hover-border-color)) 100%);
}
CC BY-SA 114514.810