Wanderer's Hardcover

Wanderer's Hardcover is a custom-tooled CSS meta-component made by EstrellaYoshte, and updated at their discretion.

This is meant to 'reset' some of Black Highlighter and Dustjacket's idiosyncratic CSS, and ease the burden of theming.

[[include :wanderers-library:component:hardcover]]

Examples of page using this component:

• Cafe Theme
• Anthology 2023 Hub

/*------- RESET -------*/
div#extra-div-1,
div#extrac-div-1, div#extrac-div-1 span {
    all: unset;
}
 
#container {
    grid-template-columns: minmax(0,1fr);
}
 
#header, #top-bar {
    max-width: 100%;
}
#header h1, #header h1 a, #header h1 a::before, #header h1 a::after {
    height: auto;
}
 
/*-------------------------------*/
/*------- REFORMAT -------*/
/*-------------------------------*/
:root {
    --gradient-topmenu: linear-gradient( to bottom, rgb(var(--swatch-topmenu-border-color)) 0, rgb(var(--swatch-topmenu-bg-color)) 0.125rem, rgb(var(--swatch-topmenu-bg-color)) calc(100% - 0.125rem), rgb(var(--swatch-topmenu-border-color)) 100% );
    --topbar-height-on-desktop: 1.95rem;
    --header-height-on-mobile: 13.5rem;
    --topbar-height-on-mobile: 2.675rem;
    --sidebar-width-on-mobile: calc(var(--base-font-size) * (266 / 12.8));
 
    --top-bar-link-scalar: 1;
}
 
body {
    background: unset;
    background-color: rgb(Var(--swatch-background));
}
 
/*------- Header -------*/
#header {
    width: 100%;
    background-image: var(--gradient-header);
    background-size: cover;
    background-position: center;
 
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr min(90%, var(--header-width-on-desktop)) 1fr;
 
    height: var(--final-header-height-on-desktop);
}
 
#login-status {
    position: relative;
    inset: 0;
    margin: 0;
    translate: unset;
    height: 2.325rem;
    grid-row: 1/2;
    grid-column: 2/3;
    align-self: center;
    justify-self: start;
    max-width: max-content;
    margin-inline-end: calc(var(--search-height) + 0.5rem);
}
 
#search-top-box {
    box-shadow: 0 0 0 0 rgb(var(--search-focus-outline-color));
    will-change: unset;
    position: relative;
    inset: initial;
    grid-row: 1/2;
    grid-column: 2/3;
    translate: none;
    align-self: center;
    justify-self: end;
}
 
#header::before {
    position: static; inset: initial;
    height: 100%;
    grid-row: 1/3;
    grid-column: 1/4;
}
#header h1 {
    position: static;
    grid-row: 1/3;
    grid-column: 2/3;
}
#header h1 a {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: max-content;
    height: auto;
}
#header > h1>a > span,
#header h1 a::before,
#header h1 a::after {
    position: static;
    inset: unset;
    grid-column: 1;
    grid-row: 1;
    height: auto;
}
 
#header div#top-bar {
    width: 100%;
    display: flex;
    position: static;
    margin: 0;
    grid-row: 3/4;
    grid-column: 1/4;
    background: var(--gradient-topmenu);
}
 
#top-bar .top-bar {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}
 
#header div[class*=top-bar]>ul>li>a {
    font-size: calc(1em * var(--top-bar-link-scalar));
}
 
/*------- Topbar -------*/
 
#header div[class*=top-bar]>ul>li ul>li>ul::before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%);
    top: 1rem;
    width: 5.75em;
    height: min(calc(100% - 1rem), 57.5%);
}
 
/*------- Sidebar -------*/
 
#side-bar {
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--sidebar-collapsible-ufld-link-hover-color);
    box-sizing: border-box;
}
 
/* experimental :has() feature */
 
@media only screen and (min-width: 56.25rem) {
 
#side-bar:has(:where(:not(.close-menu)):hover) {
    left: 0;
 
    & ~ #main-content::before {
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
    & .close-menu::before, & .close-menu::after { opacity: 0; }
}
 
}
 
#side-bar .side-block {
    margin-top: 0;
}
 
#side-bar div.menu-item>p {
    height: auto;
}
#side-bar div.menu-item :is(.text, a) {
    height: auto;
    box-sizing: border-box;
    line-height: 1.375;
}
 
#side-bar div.sub-item :is(.text, a)  {
    padding-left: .75em;
}
#side-bar div.sub-item :is(.text, a)::after {
    position: static;
    inset: initial;
    order: -1;
}
 
#side-bar div.menu-item .new-page-box {
    grid: unset;
    justify-content: initial;
}
 
/*------- Content Body -------*/
 
#content-wrap {
    margin-top: 0!important;
}
 
#main-content {
    margin: 0 auto;
    padding: 1.25rem;
    overflow-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
}
 
div:is(.image-block,.scp-image-block) {
    display: grid;
    flex-flow: unset;
    min-width: 15%;
}
div:is(.image-block,.scp-image-block) :is(.image-caption,.scp-image-caption, img) {
    width: 100%!important;
    box-sizing: border-box;
}
 
#page-content table.wiki-content-table th {
    text-align: center;
}
 
.hovertip { background-color: transparent!important; }
.hovertip::before { background-color: rgb(var(--hoverblock-bg)); }
 
/*------- Bottom -------*/
 
div#page-options-bottom, div#page-options-bottom-2 {
    width: auto;
    max-width: initial;
}
 
div.page-watch-options a:hover, div.page-watch-options a:active {
    color: rgb(var(--swatch-text-general));
}
 
table.page-files tbody tr th, table.page-files thead tr th,
table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7))::before {
    color: rgb(var(--swatch-text-general));
}
 
table.page-files tr>td>a:not(.btn):is(:hover,:active,:focus,:focus-within),
#action-area h1+h2~ul li a:is(:hover,:active,:focus,:focus-within) {
    color: rgb(var(--swatch-text-general));
}
 
/*------- Mobile Query -------*/
@media only screen and (max-width: 56.25rem) {
    #header {
        height: var(--final-header-height-on-mobile);
        top: calc((var(--header-height-on-mobile) + .125rem) * -1);
    }
    #header div[class*=top-bar]>ul>li>a {
        font-size: calc(min(calc(0.425em + 1.5vw), 1.175em) * var(--top-bar-link-scalar));
    }
    #header div[class*=top-bar]>ul>li ul>li { min-height: 100%; }
    #login-status { justify-self: end; }
 
    #header div[class*=top-bar]>ul>li ul>li>ul::before { display: none; }
}