░░░░░░░░░░░░░░░░▄▄▄███████▄▄░░░░░░░░░░░░
░░░░░░░░░░░░░░▄███████████████▄░░░░░░░░░
░░░░░░░░░░░░░█▀▀▀▄░░░░█████▀▀███▄░░░░░░░
░░░░░░░░░░░░█░░▄░░█▄▄█░░░░▀▄▄█████░░░░░░
░░░░░░░░░▄▀▀▀▄▄▀▀▀▀▀▀▄░░▀░░█▀▀▀░▀██░░░░░
░░░░░░░▄▀░░░░░█░░░░░░▀▄▄▄▄█░░░░░░░▀▄░░░░
░░░░░░▄▀░░░░░▄█▀▄▄▄▄░░░░░▄░░░░░░░░░█░░░░
░░░░░░█░░░░░▄█▀▄▄▄▄▄▄▄▄▄▀▀░░░░░░░░░▀▄░░░
░░░░░█░░░░░░▀█▄░░░░░░░░░░░░░░░░░░░░░█░░░
░░░░░█░░░░░░░░▀▄░░░░░░░░░░░░░░░░░░░░█░░░
░░░░░█░░░░░░░░▄█░░░░░░░░░░░░░░░░░░░░█░░░
░░░░░█░░░░░░▄▀░░░░░░░░▀▄░░░░░░░░░░░░█░░░
░░░░░█░░░░░░▀▄░░░▄░░░░░█░░░░░░░░░░░░█░░░
░░░░░█░░░░░░░░▀▀▀▀▀█▄▄▀░░░░░░░░░░░░░█░░░
░░░░░█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▄██░░
░░░░░█▄░░░░░░░░░░░░░░░░░░░░░░░░░░▄▀▀▄▀▄▄
░░░░▄█▀▄░░░░░░░░░░░░░░░░░░░░░░▄▄▀░░▄▀░░░
░▄░▀░░█░▀▄▄░░░░░░░░░░░░░░░▄▄▄▀░░░▄▀░░░░░
▀░░░░░░▀▄░░▀▄░░░░░░░░▄▄▄▀▀░░░░▄▀▀░░░░░░░
:root { --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15)); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 56.25rem) { #content-wrap { display: flex; position: initial; flex-direction: row; flex-grow: 2; width: calc(100vw - (100vw - 100%)); max-width: inherit; height: auto; min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem)); margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2); } #main-content { position: initial; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } #side-bar { position: -webkit-sticky; position: sticky; top: 0; left: 0; grid-area: side-bar; width: var(--sidebar-width-on-desktop, 13.6rem) !important; min-width: var(--sidebar-width-on-desktop, 13.6rem) !important; max-height: 100vh; padding-right: 2.5rem; padding-left: 0.5rem; overflow-y: scroll; transition: translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear; border: none; border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem); direction: rtl; scrollbar-width: thin; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-color: rgba(var(--swatch-primary-darker), 0.1) /* Thumb */ rgba(var(--swatch-tertiary-color), 0.05); /* Track */ } #side-bar::-webkit-scrollbar-track { background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8); } #side-bar::-webkit-scrollbar, #side-bar::-webkit-scrollbar-thumb, #side-bar::-webkit-scrollbar-corner { width: 0.5rem; border-right-width: calc(100vw + 100vh); border-right-style: inset; border-color: inherit; background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); } #side-bar:is(:hover, :active, :focus-within) { margin-right: 2.25rem; padding-right: 0.25rem; overflow-x: hidden; overflow-y: auto; border-color: rgba(var(--swatch-primary-darker), 1); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1); translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)); scrollbar-color: rgba(170, 170, 170, 1) /* Thumb */ rgba(252, 252, 252, 1); /* Track */ scrollbar-color: rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */ rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /* Track */ } #main-content::after { content: " "; display: flex; position: fixed; top: 0; left: 1rem; align-items: center; justify-content: center; width: 1rem; height: 100%; max-height: 100%; transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center left 1rem; background-size: 1rem 12.875rem; pointer-events: none; } #side-bar:is(:hover, :active, :focus-within) + #main-content::after { left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); width: 0rem; transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0; background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); font-size: 0em; } #main-content::before { content: " "; position: absolute; z-index: 9; top: var(--final-header-height-on-desktop, 0); left: 0; width: var(--sidebar-width-on-desktop, 14.5rem); height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); transition: translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0.5; background-color: rgb(var(--swatch-alternate-color, 0, 0, 0)); pointer-events: none; translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem); } #side-bar:is(:hover, :active, :focus-within) + #main-content::before { translate: 0; opacity: 0; } #side-bar .side-block { margin-top: 1em; padding-left: 0.25em; border-right-width: 0rem; border-left-width: 0rem; border-radius: 0; background-color: rgb(0, 0, 0, 0); direction: ltr; } #side-bar .scpnet-interwiki-wrapper { direction: ltr; } /* Print Friendly Formatting by Estrella */ body.print-body { --sidebar-width-on-desktop: 0; } body.print-body #main-content::before, body.print-body #main-content::after { display: none; } }
Y'all know I'm picky with themes, so here's my take:
Personally, there are a lot of areas within this theme that have wonky contrast and don't really go together that well - for example, the thin font and the thick opacity of certain elements like the div blocks. The light block doesn't go well with the orange and black, especially because there's no other instances of that color within the theme. The background of the top header feels rather tacky to me, as the detail and soft-shaded style conflict with the otherwise straight and blocky feel of the other parts of the article. Despite this, however, the choices for the colors for the first half of the article are nice and it does have a unique aesthetic, so I'm leaving this at a no-vote.
I love the ancient vibe of this theme, and the idea of the Lost. Put them together and what do you get? A big old +1, that's what!