This is the Calamity theme, designed for use on articles in the UnHuman canon.
Adapted by Oboebandgeek99 from Croquembouche's Swirling Ashes theme. The theme also includes Woedenaz's Centered Header BHL and Toggle Sidebar BHL.
The header goes through a 65 second long day/night cycle. Every evening, it begins to rain but dissipates in the middle of the night.
Usage
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
To import this theme, add this to your page:
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:calamity]]
Theme Colors
Titles can be created by putting between one and six plus "+" at the start of the line1
This is a tab view.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
The body font is Ubuntu.
The header font is Cabin Sketch.
The title font is Baumans.
The monospace font used is Space Mono.
/* Calamity Theme [2021 Wikidot Theme] Created by Oboebandgeek99 Based on Swirling Ashes Theme created by Croquembouche. The UnHuman logo was created by Oboebandgeek99 based on an image in the Public Domain. Licensed under CC-BY-SA 3.0. */ @import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap'); /* BHL Vars */ :root { --theme-base: "black-highlighter"; --theme-id: "calamity"; --theme-name: "Calamity Theme"; /* Header */ --logo-image: none; --header-title: "UnHuman"; --header-subtitle: "Life After The End"; /* Typefaces */ --body-font: "Ubuntu", sans-serif; --header-font: "Cabin Sketch", sans-serif; --title-font: "Baumans", sans-serif; --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --black-monochrome: var(--sky-at-night); --dark-gray-monochrome: var(--sky-at-evening); --pale-accent: 150, 150, 254; /* lavender, for visited links */ --bright-accent: 51, 201, 208; /* bright turquoise */ --medium-accent: 23, 152, 158; /* darker turquoise */ --dark-accent: 90, 90, 152; /* darker purple */ --alt-accent: var(--sky-at-dawn); /* pinkish red, for newpage links */ /* Sky */ --sky-at-dawn: 221, 93, 112; --sky-at-morning: 131, 192, 233; --sky-at-daytime: 104, 153, 186; --sky-at-evening: 87, 98, 106; --sky-at-dusk: 99, 100, 90; --sky-at-night: 21, 25, 43; --sky-length: 15; --sky-time: 65s; /* Delete the default header background */ --gradient-header: linear-gradient(transparent, transparent); --diagonal-stripes: linear-gradient(transparent, transparent); /* Background Colors */ --background-gradient-color: var(--sky-at-daytime); /* Primary Theme Colors */ --swatch-primary: var(--medium-accent); --swatch-primary-darker: var(--pale-accent); /* Primary Menu Colors */ --swatch-menubg-medium-dark-color: var(--medium-accent); /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--bright-accent); --swatch-tertiary-color: var(--pale-accent); /* Link Colors */ --link-color: 110, 110, 170; --visited-link-color: var(--medium-accent); /* Spacing Measurements */ /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; /* final values */ --header-h1-font-size: calc(var(--base-font-size) * 4); --header-h2-font-size: calc(var(--base-font-size) * 1.6); /*Toggle Colors */ --toggle-border-color: rgb(var(--dark-accent)); --toggle-icon-color: rgb(var(--pale-accent)); --toggle-roundness: 40%; /* Login Gradient */ --login-gradient: linear-gradient(to top, rgb(var(--dark-accent)) 0%, rgb(var(--medium-accent)) 100%); /* Ayers Info Bar */ --barColour: #5A5A98 !important; --linkColour: #FCFCFC !important; } /* Remove text shadow from headers */ #header h1 a::before, #header h2 span::before { --text-shadow: none; text-shadow: none; } /* Subtitle size and case */ #header h2, #header h2::before, #header h2 span, #header h2 span::before { text-transform: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1em); } /* Tab Selected Color */ .yui-navset .yui-nav .selected, .yui-navset .yui-nav .selected a:focus { background-color: rgb(var(--dark-accent)); } .yui-navset .yui-nav { background-color: rgb(var(--pale-accent)); color: rgb(var(--black-monochrome)); } /* Header Logos - * This calculates the distance between the two images that make up the * UnHuman logo, measured in rems (root ems - an em as defined by the root * font size) from center. */ #header::before { display: none; } div#extra-div-1, div#extra-div-2 { position: absolute; top: 1rem; width: 100%; height: 8rem; } div#extra-div-1 { background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/unhuman-left-logo.png"); background-repeat: no-repeat; background-position: calc(50% - 9rem) 80%; background-size: contain; } div#extra-div-2 { background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/unhuman-right-logo.png"); background-repeat: no-repeat; background-position: calc(50% + 9rem) 80%; background-size: contain; } /* Header on Mobile */ @media only screen and (max-width: 64rem) { :root { --header-h1-font-size: calc(var(--base-font-size) * 2.65); --header-h2-font-size: calc(var(--base-font-size) * 1.25); } div#extra-div-1 { background-position: calc(50% - 6rem) 80%; } div#extra-div-2 { background-position: calc(50% + 6rem) 80%; } } #header { /* ===HEADER ELEMENTS=== */ /* ===HEADER TITLES=== */ /* Header H1 and H2 colors */ --swatch-headerh1-color: var(--swatch-text-light); --swatch-headerh2-color: var(--swatch-text-light); /* ===SEARCH ELEMENT=== */ --search-icon-color: var(--swatch-text-secondary-color); --search-icon-bg-color: var(--swatch-primary-darkest); --search-icon-hover-color: var(--swatch-text-secondary-color); --search-icon-hover-bg-color: var(--swatch-alternate-color); --search-textbox-text-color: 0, 0, 0, 0; /* Focus is when the search box has been clicked on */ --search-icon-focus-color: var(--swatch-text-secondary-color); --search-icon-focus-bg-color: var(--swatch-primary); --search-focus-outline-color: var(--swatch-primary); --search-focus-textbox-bg-color: var(--swatch-alternate-color); --search-focus-textbox-text-color: var(--swatch-text-secondary-color); /* ===LOGIN BOX ELEMENT=== */ --login-line-divider-color: var(--swatch-text-secondary-color); --login-username-color: var(--dark-accent); --login-myaccount-color: var(--dark-accent); --login-myaccount-underline-color: var(--swatch-primary-darkest); --login-myaccount-hover-bg-color: var(--swatch-primary-darkest); --login-arrow-color: var(--swatch-text-light); /* Dropdown Box when arrow is clicked */ --login-dropdown-bg-color: var(--login-gradient); --login-dropdown-bg-image: var(--login-gradient); --login-dropdown-border-color: var(--bright-accent), 0.5; --login-dropdown-text-color: var(--swatch-text-secondary-color); --login-dropdown-text-hover-color: var(--swatch-text-secondary-color); --login-dropdown-bg-hover-color: var(--black-monochrome); } /* Login Status */ #login-status .printuser, #login-status #my-account { --ui-wght: 700; color: rgb(var(--login-username-color)); text-shadow: rgb(var(--white-monochrome)) 0.0625rem 0rem 0rem, rgb(var(--white-monochrome)) 0.0338rem 0.0526rem 0rem, rgb(var(--white-monochrome)) -0.026rem 0.0568rem 0rem, rgb(var(--white-monochrome)) -0.0619rem 0.0088rem 0rem, rgb(var(--white-monochrome)) -0.0409rem -0.0473rem 0rem, rgb(var(--white-monochrome)) 0.0177rem -0.0599rem 0rem, rgb(var(--white-monochrome)) 0.06rem -0.0175rem 0rem; } #account-options { width: auto; padding: 0.5em; border-color: rgba(var(--bright-accent)); background: var(--login-gradient); color: rgb(var(--swatch-text-light)); } /* search box */ #search-top-box-form>input, #search-top-box-form>input:hover, #search-top-box-form>input:focus { background: rgb(var(--dark-accent)); } #search-top-box-form input[type="submit"] { background: rgb(var(--medium-accent)); } #search-top-box input.empty { color: rgba(var(--white-monochrome)); } /* Horizontal rule */ hr { height: 0rem; border-top: 0.0625rem solid rgb(var(--medium-accent)); border-bottom: 0.0625rem solid rgb(var(--dark-accent)); background: rgba(0, 0, 0, 0); } /* Blockquote */ blockquote, .blockquote, div.blockquote { margin: 1em 0; border-style: solid; border-color: rgb(var(--medium-accent)); background-color: rgba(var(--pale-accent), 0.1); } /* table */ table.wiki-content-table th { border-color: rgb(var(--pale-accent)); background: rgb(var(--medium-accent)); color: rgb(var(--white-monochrome)); } /* Side Bar Touch Up */ #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded { background: rgba(var(--pale-accent), 0.35); font-family: var(--title-font); min-height: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; text-size: 125%; } #side-bar .heading p { color: rgb(62, 62, 104); font-family: var(--title-font); text-shadow: none; --text-shadow: none; text-align: center; } /* Top Bar Touch Up */ #top-bar { --topmenu-category-color: var(--swatch-text-secondary-color); --topmenu-category-hover-color: var(--swatch-text-primary-color); --topmenu-category-hover-bg: var(--pale-accent); --topmenu-hover-border-color: var(--swatch-primary); --mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color); --dropdown-bg-color: var(--swatch-alternate-color), 0.9; --dropdown-border-color: var(--swatch-text-tertiary-color), 0.5; --dropdown-links-color: var(--swatch-text-secondary-color); --dropdown-links-bg-color: 0, 0, 0, 0; --dropdown-links-hover-color: var(--swatch-text-secondary-color); --dropdown-links-hover-bg-color: var(--swatch-primary); } /* Header Background - adapted from Croquembouche's Swirling Ashes theme */ body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height-on-desktop); pointer-events: none; } body::before { -webkit-animation: sky linear var(--sky-time) infinite; animation: sky linear var(--sky-time) infinite; background: linear-gradient(to top, rgb(var(--sky-at-morning)) 0%, rgb(var(--sky-at-morning)) 11%, rgb(var(--sky-at-dawn)) 22%, rgb(var(--sky-at-night)) 33%, rgb(var(--sky-at-night)) 44%, rgb(var(--sky-at-dusk)) 55%, rgb(var(--sky-at-evening)) 66%, rgb(var(--sky-at-daytime)) 77%, rgb(var(--sky-at-daytime)) 88%, rgb(var(--sky-at-morning)) 100%); background-size: 100% calc(var(--header-height-on-desktop) * var(--sky-length)); } @-webkit-keyframes sky { from { background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length)); } to { background-position: 0 0; } } @keyframes sky { from { background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length)); } to { background-position: 0 0; } } /* Rain - adapted from EstrellaYoshte's Christmas theme */ #header-extra-div-1 { display: block; position: absolute; top: 0%; left: calc((-100vw + 100%)/2); width: 99.4vw; height: 10rem; -webkit-animation: rainOne 1.7s infinite linear, rainFade var(--sky-time) ease; animation: rainOne 1.7s infinite linear, rainFade var(--sky-time) ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png'); background-repeat: repeat; background-size: 14.375rem; pointer-events: none; -webkit-filter: blur(.9px); filter: blur(.9px); } #header-extra-div-2 { display: block; position: absolute; top: 0%; left: calc((-100vw + 100%)/2); width: 99.4vw; height: 10rem; -webkit-animation: rainTwo 1.2s infinite linear, rainFade var(--sky-time) ease; animation: rainTwo 1.2s infinite linear, rainFade var(--sky-time) ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png'); background-repeat: repeat; background-size: 23.125rem; pointer-events: none; -webkit-filter: blur(0.4px); filter: blur(0.4px); } #header-extra-div-3 { display: block; position: absolute; top: 0%; left: calc((-100vw + 100%)/2); width: 99.4vw; height: 10rem; -webkit-animation: rainThree .75s infinite linear, rainFade var(--sky-time) ease; animation: rainThree .75s infinite linear, rainFade var(--sky-time) ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png'); background-repeat: repeat; background-size: 45rem; pointer-events: none; -webkit-filter: blur(.2px); filter: blur(.2px); } @-webkit-keyframes rainOne { 0% { opacity: .9; background-position: 0rem 0rem; } 10% { opacity: 1; } 90% { opacity: 0.95; } 100% { opacity: 0.85; background-position: 0rem 46.875rem; } } @keyframes rainOne { 0% { opacity: .9; background-position: 0rem 0rem; } 10% { opacity: 1; } 90% { opacity: 0.95; } 100% { opacity: 0.85; background-position: 0rem 46.875rem; } } @-webkit-keyframes rainTwo { 0% { opacity: 0.8; background-position: 0rem -6.25rem; } 8% { opacity: 1; } 90% { opacity: 0.9; } 100% { opacity: 0.8; background-position: -3.125rem 43.75rem; } } @keyframes rainTwo { 0% { opacity: 0.8; background-position: 0rem -6.25rem; } 8% { opacity: 1; } 90% { opacity: 0.9; } 100% { opacity: 0.8; background-position: -3.125rem 43.75rem; } } @-webkit-keyframes rainThree { 0% { opacity: 0.9; background-position: 0rem 6.25rem; } 13% { opacity: 1; } 91% { opacity: 0.9; } 100% { opacity: 0.7; background-position: 0rem 46.875rem; } } @keyframes rainThree { 0% { opacity: 0.9; background-position: 0rem 6.25rem; } 13% { opacity: 1; } 91% { opacity: 0.9; } 100% { opacity: 0.7; background-position: 0rem 46.875rem; } } @-webkit-keyframes rainFade { 34%, 56% { opacity: 1; } 0%, 30%, 60%, 100% { opacity: 0; } } @keyframes rainFade { 34%, 56% { opacity: 1; } 0%, 30%, 60%, 100% { opacity: 0; } } /* Wikidot Footer Link Colors */ #footer { background: #4A4A7D; color: #55D2D8; } /* Reduce Motion Check */ @media screen and (prefers-reduced-motion: reduce) { body::before, #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { -webkit-animation: none; animation: none; } }
Interwiki Code:
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap'); #interwiki { /* Typefaces */ --body-font: "Ubuntu", sans-serif; --header-font: "Cabin Sketch", sans-serif; --title-font: "Baumans", sans-serif; --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --black-monochrome: var(--sky-at-night); --dark-gray-monochrome: var(--sky-at-evening); --pale-accent: 150, 150, 254; /* lavender, for visited links */ --bright-accent: 51, 201, 208; /* bright turquoise */ --medium-accent: 23, 152, 158; /* darker turquoise */ --dark-accent: 90, 90, 152; /* darker purple */ --alt-accent: var(--sky-at-dawn); /* pinkish red, for newpage links */ /* Sky */ --sky-at-dawn: 221, 93, 112; --sky-at-morning: 131, 192, 233; --sky-at-daytime: 104, 153, 186; --sky-at-evening: 87, 98, 106; --sky-at-dusk: 99, 100, 90; --sky-at-night: 21, 25, 43; --sky-length: 15; --sky-time: 65s; /* Primary Theme Colors */ --swatch-primary: var(--medium-accent); --swatch-primary-darker: var(--pale-accent); /* Primary Menu Colors */ --swatch-menubg-medium-dark-color: var(--medium-accent); /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--bright-accent); --swatch-tertiary-color: var(--pale-accent); /* Link Colors */ --link-color: 110, 110, 170; --visited-link-color: var(--medium-accent); } /* Side Bar Touch Up */ #interwiki .heading { background: rgba(var(--pale-accent), 0.35); font-family: var(--title-font); min-height: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; text-size: 125%; } #interwiki .heading p { color: rgb(62, 62, 104); font-family: var(--title-font); text-shadow: none; --text-shadow: none; text-align: center; } /* Reduce Motion Check */ @media screen and (prefers-reduced-motion: reduce) { body::before, #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { -webkit-animation: none; animation: none; } }
:root { /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; }
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; background: unset; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu { pointer-events: none; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; pointer-events: none; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after { opacity: 0; pointer-events: none; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar { padding: inherit; } } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @supports (-webkit-hyphens:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } }