/* gatestyle.css — the merged gate stylesheet. Replaces gatestyle1.css (The Gates / index.html) and gatestyle2.css (ASCII Graveyard / not_found.html). Scoping: each page sets a class on . body.gates — gate pillars + shill-free signage, fixed reading pane body.graveyard — fence pillars, horizontal tombstone scroll, epitaphs The gate ASCII lives under body.gates only, so it can never appear on the error page. */ /* ============ Fonts ============ */ @font-face { font-family: 'Special Gothic'; src: url('../fonts/SpecialGothic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Dico'; src: url('../fonts/Dico.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Alagard'; src: url('../fonts/alagard.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Tandy'; src: url('../fonts/PxPlus_Tandy1K-II_200L-2y.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Birchleaf'; src: url('../fonts/BirchLeaf.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spoopy'; src: url('../fonts/SpoopyGhostPixels.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'ObeliskDemo'; src: url('../fonts/Obelisk-Demo.ttf') format('truetype'); font-display: swap; } /* ============ Shared variables ============ */ :root { --headerfont1: 'ObeliskDemo', serif; --headerfont2: 'Alagard', serif; --buttonfont: 'Alagard', serif; --bodyfont: 'Dico', sans-serif; --asciifont: 'Tandy', monospace; --titlefont: 'Spoopy', monospace; --dropcapfont: 'Birchleaf', serif; --pagebg: #080808; --boxbg: none; --color: #D3D3D3; --link: #D3D3D3; --titlecolor: #D3D3D3; --titlebg: #080808; --navbg: #080808; --sidebarbg: #080808; --menucolor: #D3D3D3; --ascii: #D3D3D3; --ascii-solid: #D3D3D3; --accentbg: #080808; --hr: #D3D3D3; } @media (prefers-color-scheme: light) { :root { --pagebg: #f0f0f0; --boxbg: #f0f0f0; --color: #080808; --link: #080808; --titlecolor: #080808; --titlebg: #f0f0f0; --navbg: #080808; --sidebarbg: #f0f0f0; --menucolor: #080808; --ascii: #080808; --ascii-solid: #080808; --accentbg: #f0f0f0; --hr: #080808; } } /* ============ Shared base ============ */ * { margin: 0; padding: 0; } img { margin: 5px; max-width: 100%; } a { color: var(--link); } a:hover { font-weight: bold; } /* Shared bones of the fixed corner ASCII; each page supplies its own content, position and cutoff below. */ body.gates::before, body.gates::after, body.graveyard::before, body.graveyard::after { position: fixed; bottom: 0; overflow: hidden; font-family: var(--asciifont); font-size: 14px; line-height: 1; white-space: pre; color: var(--color); pointer-events: none; z-index: 0; } /* ==================================================================== THE GATES (index.html) ==================================================================== */ body.gates *, body.gates *::before, body.gates *::after { box-sizing: border-box; } body.gates { color: var(--color); background: var(--pagebg); font-family: var(--bodyfont); font-size: 1.05rem; letter-spacing: .5px; padding-bottom: 600px; } body.gates main { padding: 10px 10px 0; width: calc(90% - 40px); max-width: 900px; position: fixed; top: 2em; left: 50%; transform: translateX(-50%); z-index: 1; height: 44vh; overflow-y: scroll; opacity: 0.95; } body.gates li a { text-decoration: underline; } body.gates main h1, body.gates main h2 { font-size: 1.6em; font-family: var(--headerfont2); text-align: center; padding: 5px; } body.gates main h1 { border-bottom: 1px dashed var(--color); margin: 5px 0; } body.gates main h2 { margin: 10px 0; } body.gates dl dt { font-size: 1.3em; font-family: var(--bodyfont); font-variant: small-caps; letter-spacing: 0.05em; margin: 1rem; } body.gates dl dd { padding: 0.5em 0 1em; margin-left: 1rem; } body.gates main pre { padding: 10px; background: var(--pagebg); margin: 10px auto; border-radius: 5px; overflow: auto; } body.gates main footer { text-align: center; margin-top: 10px; padding: 5px; border-radius: 5px; } body.gates .mobile-hide { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none; } body.gates::before, body.gates::after { opacity: 0.6; max-width: 25vw; } body.gates::before { content: " : :;;;;;;.-----.;;;;;;;;;;; ;;;;;;;\A\ ¦ ¦%%%%%( O v O )%%%%%%%%%b .d6%%%%%%\A\ { } {%%%%7 ;;;; \\%%%%%%%%b .d6%/ __}%b\A\ } { }%%%\\ ;;; \\ \\%%7 _}%%%%%7 7%%b\A\ { { {% m m %%%%7 7%%%/ _______}%b . .\A\ ¦ } ___________ __________/ . . . .\A\ ¦ { } \\_\\ . . *\A\ ¦ } { * .\A\ { { .---. . ^v^ .adAHHAbn. \A\ } } .--```--\\_/ ) dHHHHH7\A\ ¦ { / / o __ * . dHHHHH\A\ ¦ . ___) | | __)) ^v^ dHHHHH\A\ ¦ ' ( \\_/_ \\_ * HHHHHh\A\ ' \\ ,__/ \\_/ . VHHHHhn\A\ .' .--\\ \\ YHHHHHhn.\A\ | \\ .' ^v^ '^YUHHHHhn.\A\ | \\ \\\A\ \\ _____\\ \\ _ \A\ \\_______(____]_]\A\ ¦ \A\ ¦ /\\ /\\ /\\ /\\\A\ __.--.^..^.--._ ¦ ||___||___||___||\A\ | '' | ¦ /\\__/ _____________]\A\ | WE DONT SHILL | ¦ /\\ /\\ _|| ___/ :.-. nn .-.:\A\ | OR E-BEG AT | |__||___||__/ ___/:: ¦ (;;) ¦\A\ | THE DOOR! | |_____________/: ¦¦ | .--..--. |\A\ |_______________| | :: :: ¦¦ || || [__] ||\A\ |__¦¦___¦¦____¦¦___¦¦___¦¦___¦¦___¦¦\A\ |-----------------------------------\A\ | \A\ | :: :: :: :: :: :: ::\A\ _______________ | ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦\A\ | | | || || || || || || ||\A\ | ░▀█▀░█▀▄░█▀▀ | | || || || || || || ||\A\ | ░░█░░█▀▄░█░░ | | || || || || || || ||\A\ | ░▀▀▀░▀░▀░▀▀▀ | | || || || || || || ||\A\ | | | || || || || || || ||\A\ | ░█▀█░█▀▄░█░█ | | || || || || || || ||\A\ | ░█░█░█░█░█▄█ | ¦ || || || || || || ||\A\ | ░▀░▀░▀▀▀░▀░▀ | ¦__¦¦___¦¦____¦¦___¦¦___¦¦___¦¦___¦¦\A\ |_______________| ¦------------------------------------\A\ ¦ :: :: :: :: :: :: ::\A\ ¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦\A\ : || || // || || || ||\A\ : || || \\\\ || || || ||\A\ : || || // || || || ||\A\ : ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦\A\ :__::___::____::___::___::___::___::\A\ :------------------------------------\A\ : :: :: :: :: :: :: ::\A\ : ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦\A\ : ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦\A\ : :: - :: -- :: - :: - :: - :: - ::\A\ _}\A\ }_\A\ }\A\ _}\A\ }_ \A\ }\A\ }_\A\ }\A\ "; left: 0; } body.gates::after { content: " .-----.\A\ ____ ( O v O ) _} {\A\ {___ \\ __ / ;;;;;; } }\A\ ___\\ \\___ {_ \\ /__/ ;;;; _{ {\A\ . . {_______ \\____\\ \\____m m__} }\A\ . . . . \\__________ ___________ {\A\ * . . /_/ { }\A\ . * } {\A\ * . .---. }\A\ ( \\_/--```--. {\A\ __ o \\ \\ {\A\ ((__ | | (___ . {\A\ _/ _\\_/ ) ' {\A\ \\_/ \\__, / '\A\ / /--. '.\A\ '. / |\A\ / / |\A\ _ / /_____ /\A\ [_[____)_______/\A\ ¦\A\ /\\ /\\ /\\ /\\ ¦\A\ ||___||___||___|| ¦ _____________\A\ [_____________ \\__/\\ ¦ | |\A\ ;.-. nn .-.: \\___ ||_ /\\ /\\ ¦ | ARCHIVE |\A\ ¦ (;;) ¦ ::\\___ \\__||___||__| | EVERYTHING! |\A\ | .--..--. | ¦¦ :\\_____________| |_____________|\A\ || [__] || || ¦¦ :: :: | \A\ ¦¦___¦¦___¦¦___¦¦___¦¦____¦¦___¦¦__| ______________\A\ -----------------------------------| | |\A\ :: :: :: :: :: :: :: | | DEGOOGLE |\A\ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ | | YOUR NET!! |\A\ || || || || || || || | | ---- |\A\ || || || || || || || | | FIREFOX IS A |\A\ || || || || || || || | | GOOGLE ASSET |\A\ || || || || || || || | |______________|_\A\ || || || || || || || | _/ |\A\ || || || || || || || | | THIS IS YOUR |\A\ || || || || || || || | | REMINDER TO |\A\ || || || || || || || ¦ | BACK-UP YOUR |\A\ ¦¦___¦¦___¦¦___¦¦___¦¦____¦¦___¦¦__¦ | HARD DRIVES! |\A\ ------------------------------------¦ |________________|\A\ :: :: :: :: :: :: :: ¦\A\ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦\A\ || || || || || || || ¦\A\ || || || || || || || :\A\ || || || || || || || :\A\ || || || || || || || :..\A\ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ :\A\ ::___::___::___::___::____::___::__:....\A\ ----------------------------------- :\A\ :: :: :: :: :: :: :: :..\A\ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ :\A\ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ ¦¦ :....\A\ :: :: :: :: :: :: :: :\A\ {_\A\ _{\A\ {\A\ {_\A\ _{\A\ {\A\ _{\A\ {"; right: 0; } @media screen and (max-width: 1800px) { body.gates::before, body.gates::after, body.gates .mobile-hide { display: none; } body.gates { padding-bottom: 0; } body.gates main { position: static; transform: none; width: 95%; height: auto; overflow-y: visible; margin: 1em auto; } } .ascii-art-label pre { display: table; font-family: var(--asciifont); margin: 0 auto; text-align: left; font-size: 16px; } /* ==================================================================== THE ASCII GRAVEYARD (not_found.html) ==================================================================== */ body.graveyard { color: var(--color); background: var(--pagebg); font-family: var(--bodyfont); font-size: 1rem; letter-spacing: .35px; } body.graveyard main { padding: 20px; width: calc(90% - 40px); max-width: 800px; margin: auto; background: transparent; } body.graveyard li a { text-decoration: none; } body.graveyard p { margin: 10px 0; line-height: 1.5; } body.graveyard main h1 { font-family: var(--headerfont1); font-size: 2em; margin: 5px 0; color: var(--titlecolor); text-align: center; } body.graveyard main h2 { font-family: var(--headerfont1); font-size: 1.8em; margin: 10px 0; color: var(--titlecolor); text-align: center; } body.graveyard main h3 { font-family: var(--headerfont2); font-size: 1.5em; margin: 5px 0; text-align: center; } body.graveyard main h4 { font-family: var(--headerfont2); font-size: 1em; font-style: italic; margin: 5px 0 20px; text-align: center; } body.graveyard main input, body.graveyard textarea, body.graveyard select, body.graveyard button { background: var(--accentbg); color: var(--color); font-family: var(--bodyfont); font-size: 1rem; border: none; padding: 5px; margin: 5px; border-radius: 5px; } body.graveyard main textarea { width: 90%; } body.graveyard input[type="submit"], body.graveyard input[type="reset"] { font-size: 1rem; font-family: var(--buttonfont); background: var(--accentbg); } body.graveyard input[type="submit"]:hover, body.graveyard input[type="reset"]:hover { background: var(--hr); cursor: pointer; } body.graveyard main table { margin: 10px auto; padding: 5px; width: 100%; border-collapse: collapse; } body.graveyard main th { padding: 5px; text-align: left; } body.graveyard main td { padding: 3px; } body.graveyard main tr:nth-child(2n) { background: var(--accentbg); } body.graveyard main ul, body.graveyard ol { list-style-position: outside; margin: 8px 0 8px 20px; } body.graveyard main li { margin: 5px 0; line-height: 1.5; } body.graveyard main ul li ul, body.graveyard main ol li ol { margin-left: 15px; } body.graveyard main blockquote { padding: 10px; background: var(--accentbg); } body.graveyard main blockquote cite { font-size: .95em; position: relative; right: 0; } body.graveyard main summary { cursor: pointer; margin: 5px 0; } body.graveyard main details { padding: 10px; background: var(--accentbg); margin: 5px 0; border-radius: 5px; } body.graveyard main hr { border: none; margin: 20px auto; } body.graveyard main pre { padding: 10px; background: var(--accentbg); margin: 10px auto; border-radius: 5px; overflow: auto; font-family: var(--asciifont); } body.graveyard main footer { text-align: center; margin-top: 10px; padding: 10px; } /* The graveyard keeps its own corner ASCII (fence pillars), distinct from the gate pillars above. */ body.graveyard::before { content: " .---.___\A\ .-.-' e )__\\\A\ .' \\ _.'\A\ / uu / \\\A\ UuUuU |\A\ / ____/ . . . \A\ /_/ M M / \\ / \\ / \\\A\ /_ _\\ /_ _\\ /_ _\\ /_ _\\\A\ ________| |_________| |_________| |_________| |\A\ --------| |---------| |---------| |---------| |\A\ | | | | | | | |\A\ --------| |---------| |---------| |---------| |--------.\A\ ' ' ' ' ' ' ' ' _.-' |_____\A\ --------------------------------------------------' _.-' _.-')\A\ ----------------------------------------------------' _.-' /\A\ ____________________________________________________.-' \\ \A\ : : : : : | \A\ : : : : : |\A\ -----'-----------'-----------'-----------'----------' |\A\ : : : : : | \A\ : : : : : |\A\ -----------'-----------'-----------'----------'-----' / \A\ : : : : : / \A\ : : : : : |\A\ -----'-----------'-----------'-----------'----------' |\A\ : : : : : \\ \A\ : : : : : \\\A\ -----------'-----------'-----------'----------'-----' | \A\ : : : : : / \A\ : : : : : |\A\ -----'-----------'-----------'-----------'----------' \\\A\ : : : : : | \A\ : : : : : \A\ -----------'-----------'-----------'----------'----- "; left: 0; max-width: 40vw; } body.graveyard::after { content: " . . . . \A\ / \\ / \\ / \\ / \\ \A\ /_ _\\ /_ _\\ /_ _\\ /_ _\\ \A\ | |_________| |_________| |_________| |________\A\ | |---------| |---------| |---------| |--------\A\ | | | | | | | | \A\ .--------| |---------| |---------| |---------| |--------\A\ _____| '-._ ' ' ' ' ' ' ' ' \A\ ('-._ '-._ '--------------------------------------------------\A\ \\ '-._ '----------------------------------------------------\A\ / '-.____________________________________________________\A\ | : : : : : \A\ | : : : : : \A\ | '----------'-----------'-----------'-----------'-----\A\ | : : : : : \A\ | : : : : : \A\ \\ '-----'----------'-----------'-----------'-----------\A\ \\ : : : : : \A\ | : : : : : \A\ | '----------'-----------'-----------'-----------'-----\A\ / : : : : : \A\ / : : : : : \A\ | '-----'----------'-----------'-----------'-----------\A\ \\ : : : : : \A\ | : : : : : \A\ / '----------'-----------'-----------'-----------'-----\A\ | : : : : : \A\ : : : : : \A\ -----'----------'-----------'-----------'-----------"; right: 0; transform: none; max-width: 40vw; } @media (max-width: 1500px) { body.graveyard::before, body.graveyard::after { display: none; } } /* Horizontal tombstone scroll */ .graveyard-stage { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); background: var(--pagebg); padding-bottom: 20px; } .graveyard-scroll { overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-size: 1rem; letter-spacing: 0; } .grave-stone { display: inline-block; vertical-align: bottom; text-decoration: none; color: var(--ascii-solid); background: var(--pagebg); cursor: pointer; font-size: 1rem; margin-right: -0.31em; } .grave-stone:hover, .grave-stone:focus { color: var(--ascii-solid); font-weight: normal; outline: none; } .grave-stone:focus-visible { outline: 2px solid var(--ascii-solid); outline-offset: 4px; border-radius: 3px; } .graveyard-stage pre { margin: 0; border-radius: 0; background: transparent; overflow: visible; white-space: pre; word-break: normal; padding: 16px 8px 16px 8px; font-family: var(--asciifont); color: inherit; font-size: 1rem; box-shadow: none; } /* Epitaphs — revealed via :target, default resting text otherwise */ .epitaph { display: none; padding: 20px 0 10px; margin-top: 16px; background: none; } .epitaph:target { display: block; } .epitaph h2 { font-family: var(--headerfont1); font-size: 1.4em; margin: 0 0 8px; color: var(--titlecolor); text-align: center; } .epitaph p { margin: 0; text-align: center; } .epitaph a { color: var(--link); } .epitaph a:hover { font-weight: bold; } #ep-default { display: block; } :is(#ep-credits, #ep-fangsalot, #ep-fiction, #ep-library, #ep-outgoing, #ep-rabbitholes, #ep-shrines, #ep-sitemap, #ep-webcomic, #ep-unnamed1, #ep-unnamed2, #ep-unnamed3):target ~ #ep-default { display: none; } #site-footer { text-align: center; font-size: 1em; padding: 1em 0; font-style: italic; width: 100%; margin: 0 auto; box-sizing: border-box; } #site-footer a { color: var(--link); } #site-footer a:hover { font-weight: bold; }