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%); }