/* https://meyerweb.com/eric/tools/css/reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } #root, #__next { isolation: isolate; } html { interpolate-size: allow-keywords; } /* fonts.css */ @font-face { font-family: "Erode"; src: url("/shared/Modern-Serif-Eroded.ttf") format("truetype"); } @font-face { font-family: "Playwrite"; src: url("/shared/PlaywriteFRModerne.ttf") format("truetype"); } @font-face { font-family: "BioRhyme"; src: url("/shared/BioRhyme.ttf") format("truetype"); } @font-face { font-family: "Vollkorn"; src: url("/shared/Vollkorn-Medium.ttf"); } @font-face { font-family: "Vollkorn"; src: url("/shared/Vollkorn-Italic.ttf"); font-style: italic; } @font-face { font-family: "Vollkorn"; src: url("/shared/Vollkorn-ExtraBold.ttf"); font-weight: bold; } @font-face { font-family: "Vollkorn"; src: url("/shared/Vollkorn-ExtraBoldItalic.ttf"); font-weight: bold; font-style: italic; } @font-face { font-family: "CrimsonPro"; src: url("/shared/CrimsonPro.ttf") format("truetype"); } @font-face { font-family: "CrimsonPro"; src: url("/shared/CrimsonPro-Italic.ttf") format("truetype"); font-style: italic; } @font-face { font-family: "CormorantGaramond"; src: url("/shared/CormorantGaramond-Regular.ttf") format("truetype"); } @font-face { font-family: "CormorantGaramond"; src: url("/shared/CormorantGaramond-Italic.ttf") format("truetype"); font-style: italic; } @font-face { font-family: "CormorantGaramond"; src: url("/shared/CormorantGaramond-Bold.ttf") format("truetype"); font-weight: bold; } @font-face { font-family: "CormorantGaramond"; src: url("/shared/CormorantGaramond-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: bold; } @font-face { font-family: "Courier Prime"; src: url("/shared/CourierPrime-Regular.ttf") format("truetype"); } @font-face { font-family: "Courier Prime"; src: url("/shared/CourierPrime-Italic.ttf") format("truetype"); font-style: italic; } @font-face { font-family: "Courier Prime"; src: url("/shared/CourierPrime-Bold.ttf") format("truetype"); font-weight: bold; } @font-face { font-family: "Courier Prime"; src: url("/shared/CourierPrime-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: bold; } @font-face { font-family: "Arvo"; src: url("/shared/Arvo-Regular.ttf") format("truetype"); } @font-face { font-family: "Arvo"; src: url("/shared/Arvo-Italic.ttf") format("truetype"); font-style: italic; } @font-face { font-family: "Arvo"; src: url("/shared/Arvo-Bold.ttf") format("truetype"); font-weight: bold; } @font-face { font-family: "Arvo"; src: url("/shared/Arvo-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: bold; } @font-face { font-family: "Kreative Square"; src: url("/shared/KreativeSquare.ttf") format("truetype"); } @font-face { font-family: "DejaVu Sans Mono"; src: url("/shared/DejaVuSansMono.ttf"); } @font-face { font-family: "DejaVu Sans Mono"; font-style: italic; src: url("/shared/DejaVuSansMono-Oblique.ttf"); } @font-face { font-family: "DejaVu Sans Mono"; font-weight: bold; src: url("/shared/DejaVuSansMono-Bold.ttf"); } @font-face { font-family: "DejaVu Sans Mono"; font-style: italic; font-weight: bold; src: url("/shared/DejaVuSansMono-BoldOblique.ttf"); } /* main */ /*:root { --mainbg: #202824; --mainfg: #fff; --altbg: #283834; --link1: #afa; --link2: #cfc; --link3: #8b8; --accent1: #ded8; --accent2: #bbb; --button1: #243; --button2: #354; --codefg: #eee; --codebg: #000; --extlink: #8dd; }*/ :root { --mainbg: #ddd; --mainfg: #000; --altbg: #ccc; --lolite: #bbb; --link1: #464; --link2: #262; --link3: #232; --accent1: #242; --accent2: #696; --button1: #cdc; --button2: #9a9; --codefg: #000; --codebg: #eee; --extlink: #466; } @media (prefers-color-scheme: dark) { :root { --mainbg: #101613; --mainfg: #efe; --altbg: #283834; --link1: #adb; --link2: #afc; --link3: #aba; --accent1: #686; --accent2: #bbb; --button1: #243; --button2: #354; --codefg: #eee; --codebg: #000; --extlink: #8dd; } } html { font-display: optional; font-family: "CrimsonPro", serif; } body { margin: auto; color: var(--mainfg); line-height: 1.75; min-height: 100vh; } :root { font-size: 22px; } @media (max-width: 650px) { :root { font-size: 16px; } article,.subarticle { text-align: left; } div.toc li a {grid-column: 1 / span 3; } div.toc li .date { grid-column: 2; } } @media (max-width: 400px) { :root { font-size: 14px; } } /* background pattern */ html { background: black; } body { --s: 3em; --c1: #132; --c2: #000800; --_g:#0000, #0004 5%, var(--c2) 6% 14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%, var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%, var(--c2) 86% 94%,#0004 95%,#0000; background: radial-gradient(100% 50% at 100% 0 ,var(--_g)), radial-gradient(100% 50% at 0 50% ,var(--_g)), radial-gradient(100% 50% at 100% 100%,var(--_g)); background-size: var(--s) calc(2*var(--s)); } /* layout */ body > * { max-width: min(95%, 40em); color: var(--mainfg); background: var(--mainbg); border: .2em solid var(--accent1); margin: auto; } main { padding: .25em 1em; text-align: justify; hyphens: auto; } header, footer { width: fit-content; padding: .25em; text-align: center; } header h1, header h2, header h3 { margin: 0 0 .25em; } body > header { margin: 0 auto .5em; } aside { font-size: 80%; width: fit-content; max-width: 35em; margin: .25em auto; padding: .25em; border: .1em solid var(--accent2); } main aside { border-left: none; border-right: none; } body > aside { border: solid .2em var(--accent1); } aside:first-child, aside+aside { border-top: none; } aside:last-child { border-bottom: none; } /* headings */ .heading:not(section) { font-weight: bold; margin: .5em 0; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; text-align: left; line-height: 1.2; margin-bottom: .25em; text-wrap: balance; } .heading a { text-decoration: none; } h1 { font-size: 2.00em; } h2 { font-size: 1.75em; } h3 { font-size: 1.50em; } h4 { font-size: 1.25em; } h5 { font-size: 1.10em; } h6 { font-size: 1.00em; } article .heading { border-bottom: .1em dotted var(--accent2); } article .heading:has(+ .heading) { border-bottom: none; padding-bottom: 0; } article h2 { margin-bottom: .5em; padding-bottom: .25em; } article h3 { margin-bottom: .25em; padding-bottom: .125em; } /* paragraphs */ p:first-of-type { margin-top:.25em; } p:last-of-type { margin-bottom:.25em; } p { text-indent: 2em; margin: 0; } p:first-child, h1 + p, h2 + p, h3 + p, hr + p, .nav + p, aside + p, summary + p { text-indent: 0; } /* breaks */ hr { height: 0; margin: 1.25em; border: none; border-top: .1em solid var(--accent2); text-align: center; overflow: visible; clear: left; } hr::after { content: "* * *"; top: -.75em; padding: 0 .25em; font-size: 125%; position: relative; color: var(--accent2); background: var(--mainbg); } /* links */ a { text-decoration: underline dotted; color: var(--link1); } a:visited { color: var(--link3);} a:hover { color: var(--link2); text-decoration: underline; } main a[href^="https://"], main a[href^="http://"] { color: var(--extlink); } main a[href^="https://"]:after, main a[href^="http://"]:after { content: "↗"; font-size: 50%; vertical-align: super; border: 1px solid; border-radius: 5px; padding: 0 .1rem; font-weight: bold; opacity: 50%; } /* quotes */ blockquote { margin: .25em 2em; padding: 0 .5em; border-left: 5px solid var(--accent2); background-color: var(--altbg); width: fit-content; } /* lists */ ul { margin: 0 .5em; list-style: "◈ "; } li { margin-bottom: 0.25em; padding-left: .25em; } dt { font-weight: bold; } dd { text-indent: 2em; } /* code */ pre, code { color: var(--codefg); font-family: "Courier Prime", monospace; } pre { display: block; padding: 1em; font-size: 0.9em; background: var(--codebg); border: 1px solid var(--codefg); overflow-x: auto; } code, kbd, samp { white-space: pre-wrap; } pre > code { padding: 0; background: transparent; white-space: pre; font-size: 1em; } /* buttons */ input,textarea { border: 1px solid var(--mainfg);} input:focus, textarea:focus { border: 1px solid var(--accent1); } textarea { width: 100%; } .button, button, input[type=button] { padding: .25em; color: var(--mainfg); background: var(--button1); border: 1px solid var(--accent1); border-radius: 1px; cursor: pointer; } .button[disabled], button[disabled], input[disabled] { cursor: default; opacity: 0.5; } .button:hover, button:hover, input[type=button]:hover { color: var(--mainfg); background: var(--button2); outline: 0; } .button:focus-visible, button:focus-visible, input[type=button]:focus-visible { outline-style: solid; outline-width: 2px; } textarea, select, input { color: var(--mainfg); background: var(--altbg); border: 1px solid var(--altbg); } textarea:focus, select:focus, input:focus { border: 1px solid var(--accent1); outline: 0; } /* misc */ small, sub, sup { font-size: 60%; } del { opacity: 80%;} cite { margin-top: .25em; padding-top: .25em; font-style: unset; } img, video { height: auto; max-width: 100%; margin-top: 0px; max-width: 75%; min-width: 25%; } table { text-align: justify; width: 100%; border-collapse: collapse; margin-bottom: 2rem; } td, th { padding: 0.5em; border-bottom: 1px solid var(--accent1); } /* details */ .sq-details { margin: .25em 0; } summary:hover { background: var(--button2); } summary { list-style: none; cursor: pointer; padding: .25em .5em; background: var(--button1); border: 1px solid var(--accent1); } summary * { display:inline; } .sq-details[open] { border-bottom: dotted .2em var(--accent2); margin-bottom: .5em; } .sq-details[open] .expansion { padding: 0em .5em; } .sq-details[open] > summary { border-bottom-style: dashed; background: var(--altbg); width: 100%; } .sq-details[open] > summary:hover { background: var(--button2); } .sq-details .heading { border:none; } .sq-details .expansion { height: 0; overflow: hidden; transition: height 0.5s ease; } .sq-details[open] .expansion { height: auto; } /* site design */ .line-block { margin-left: 2em; } .hide { display:none; visibility:hidden; } .subtitle { font-style: italic; } .center { text-align:center; } .right { text-align:right; } .italic { font-style: italic; } em em, .italics em, .subtitle em { font-style: italic; font-variant: small-caps; } p .break:after { margin-right: 2em; content: ""; } .handwritten { font-family: "Playwrite"; } .date, .wc, #date, #wc { font-family: "Courier Prime", monospace; } /* header */ header h1 a { text-decoration: underline; } header .sitenav { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: repeat(5, 1fr); } .sitenav .first { grid-row: 1; } .sitenav .second { grid-row: 2; } .sitenav .third { grid-row: 3; } nav a, .nav a { padding: .1em; border: solid 1px var(--accent1); color: var(--link1); background: var(--button1); text-decoration: none; white-space: nowrap; } nav a:hover, .nav a:hover { color: var(--link3); background: var(--button2); } nav a.inline, .nav a.inline { padding:revert; border:revert; background: revert; text-decoration: revert; } .quicknav { text-align:center; border-bottom: 2px dotted var(--accent2); padding-bottom: .5em; margin-bottom: .5em; } /* mini deets */ .sq-details-mini { width: fit-content; margin: auto; } .sq-details-mini[open] { border-bottom: none; margin-bottom: 0; } .sq-details-mini[open] > summary { width: fit-content; } .sq-details-mini > summary { display: inline-block; padding: .1em .3em; } .sq-details-mini[open] > summary { border: none; } aside .sq-details-mini { position: relative; padding :0; } @media (min-width: 850px) { aside .sq-details-mini[open] > summary { position: absolute; right: calc(100% + .5em); } } /*aside .sq-details-mini:has(> summary:last-child) { display: none; }*/ /* spoiler */ .spoiler > label > input, .note > label > input { display:none; } .spoiler > label > input ~ .text { background-color: currentColor; border-radius: .25em; opacity:80%; } .spoiler > label > input:not(:checked) ~ .text:hover { opacity:50%; } .spoiler > label > input:checked ~ .text { background-color: revert; opacity:100%; cursor: text; filter: revert; text-shadow: revert; } /* footnotes */ .note > label > .button { border-radius: 5px; margin:.1em; padding: .1em .2em; } .note > label > .text { font-size: max(75%, 12px); text-indent: 0; } .note > label > input:not(:checked) ~ .text { display:none; } .note > label > input:not(:checked) ~ .button { border: 2px dashed var(--accent1); background: var(--button1); } .note > label > input:not(:checked) ~ .button:hover { border: 2px solid var(--accent2); background: var(--button2); } .note > label > input:checked ~ .button { border: 2px solid; background:revert; opacity: 40%; } .note > label > .text { display: block; margin: .2em auto; padding: .5em; max-width: min(90%, 30rem); background: var(--altbg); border: .25em var(--accent1) solid; } /* mini footnotes */ .note.joke > label input:checked ~ .text, .note.joke > label input:hover ~ .text { display:inline; border-width: .1em; padding: .1em; margin: .5em; border-style: dashed; } .note.joke > label input:checked ~ .text:hover, .note.joke > label input:hover ~ .text:hover { border-style: solid; } .note.joke > label input:checked ~ .button, .note.joke > label input:hover ~ .button { display:none; } .note > label > .text:hover { border: .25em var(--accent2) solid; } /* chapter stuff */ header > .stats { display:flex; justify-content: space-between; gap: 2em; border-top: .1em dashed var(--accent1); margin-top: .2em; margin-bottom: -.5em; opacity: 75% } /* next prev */ .internav { margin:1em; } .internav aside { border: .1em solid var(--accent1); border-left: none; border-right: none; padding: .5em; } .chapnav { width:fit-content; margin: .75em auto; } .chapnav a, .secnav a { font-size: 100%; color:var(--mainfg); border: solid 1px var(--accent1); background: var(--button1); text-decoration:none; margin: .5em; padding: .5em 1em; } .chapnav a:hover, .secnav a:hover { background: var(--button2); } /* subchapter */ .secnav a { font-size: 75%; margin: .1em; padding: .5em; width: 2em; } .subchapter.no-break + .subchapter p:first-child { text-indent: 2em; } /*main:has(:target) .subchapter:not(:target), header:has(+ main .subchapter + .subchapter:target) .prev, main:has(.subchapter + .subchapter:target) .before, main:has(.subchapter + .subchapter:target) + footer .prev, header:has(+ main .subchapter:target + .subchapter) .next, main:has(.subchapter:target + .subchapter) .after, main:has(.subchapter:target + .subchapter) + footer .next { display:none; } header:has(+ main .subchapter:target:nth-of-type(1)) .secnav a:nth-child(2), main:has(.subchapter:target:nth-of-type(1)) + footer .secnav a:nth-child(2), header:has(+ main .subchapter:target:nth-of-type(2)) .secnav a:nth-child(3), main:has(.subchapter:target:nth-of-type(2)) + footer .secnav a:nth-child(3), header:has(+ main .subchapter:target:nth-of-type(3)) .secnav a:nth-child(4), main:has(.subchapter:target:nth-of-type(3)) + footer .secnav a:nth-child(4), header:has(+ main .subchapter:target:nth-of-type(4)) .secnav a:nth-child(5), main:has(.subchapter:target:nth-of-type(4)) + footer .secnav a:nth-child(5), header:has(+ main .subchapter:target:nth-of-type(5)) .secnav a:nth-child(6), main:has(.subchapter:target:nth-of-type(5)) + footer .secnav a:nth-child(6), header:has(+ main .subchapter:target:nth-of-type(6)) .secnav a:nth-child(7), main:has(.subchapter:target:nth-of-type(6)) + footer .secnav a:nth-child(7), header:has(+ main .subchapter:target:nth-of-type(7)) .secnav a:nth-child(8), main:has(.subchapter:target:nth-of-type(7)) + footer .secnav a:nth-child(8), header:has(+ main .subchapter:target:nth-of-type(8)) .secnav a:nth-child(9), main:has(.subchapter:target:nth-of-type(8)) + footer .secnav a:nth-child(9), header:has(+ main .subchapter:target:nth-of-type(9)) .secnav a:nth-child(10), main:has(.subchapter:target:nth-of-type(9)) + footer .secnav a:nth-child(10), header:has(+ main .subchapter:target:nth-of-type(10)) .secnav a:nth-child(11), main:has(.subchapter:target:nth-of-type(10)) + footer .secnav a:nth-child(11), header:has(+ main .subchapter:target:nth-of-type(11)) .secnav a:nth-child(12), main:has(.subchapter:target:nth-of-type(11)) + footer .secnav a:nth-child(12), header:has(+ main .subchapter:target:nth-of-type(12)) .secnav a:nth-child(13), main:has(.subchapter:target:nth-of-type(12)) + footer .secnav a:nth-child(13), header:has(+ main .subchapter:target:nth-of-type(13)) .secnav a:nth-child(14), main:has(.subchapter:target:nth-of-type(13)) + footer .secnav a:nth-child(14), header:has(+ main .subchapter:target:nth-of-type(14)) .secnav a:nth-child(15), main:has(.subchapter:target:nth-of-type(14)) + footer .secnav a:nth-child(15) { background: var(--mainbg); border-style: dashed; } header:has(+ main .subchapter:nth-child(1)) .secnav a:nth-child(2) { background: var(--mainbg); border-style: dashed; } .nosub { display:none; } header:has(+ main .subchapter:target) .nosub, main:has(:target) + footer .nosub { display:revert; }*/ /* story index */ div.toc .wordcount { margin-left:2em; opacity:75%; float:right; margin-left:1em; } div.toc ul { text-align:left; list-style:none; } div.toc li { width:100%; border-bottom: 1px solid var(--accent1); display: grid; grid-template-columns: 1fr 6em 6em; gap: .2em; text-wrap:balance; } div.toc li:last-child { border-bottom: none; } div.toc .wc, div.toc .date { background: var(--altbg); border: .1em solid var(--accent1); padding: .2em; font-family: "Courier Prime"; font-size: 75%; text-align:center; } /* post listing */ .post summary, .post summary p { width: 100%; display: grid; grid-template-columns: 1fr auto; text-align:left; text-wrap:balance; } .post .category { opacity: 75%; margin-right: 1em; } .post summary strong a { font-size: 120%; } .post[open] > summary > .wc, .post[open] > summary > .subtitle { display:inline; opacity: 75%; } .frontmatter summary { display: grid; grid-template-columns: 1fr auto; width: 100%; } .frontmatter summary h3 { margin:0; } .subtitle { font-style: italic; } .post .date { text-align: right; } .post .title, .post .subtitle { grid-column: 1; } .post .date, .post .wc { grid-column: 2; } .post .title, .post .date { grid-row: 1; } .post .subtitle, .post .wc { grid-row: 2; } .postgroup .sq-details:not([open]) { margin-left: 1em; margin-right: 1em; } .postgroup .sq-details { margin-left: .5em; margin-right: .5em; } .post summary > h2 { margin: 0; padding: 0; } /* pagehead */ .titleblock h1 { margin-top:0; text-align: center; } .pagehead blockquote { max-width: 25em; margin:auto; } .pagehead .contents { width:fit-content; margin: auto; } .pagehead .contents summary { width: fit-content; margin: auto; background: var(--altbg); border:none; border-bottom: .1em solid var(--accent2); } .pagehead .contents summary:hover { background: var(--button1); text-decoration: underline dotted; } .pagehead .contents[open] summary { border-bottom: .1em dashed var(--accent2); } .pagehead .stats { font-family: "Courier Prime", monospace; white-space: nowrap; display:grid; grid-template-columns: 1fr fit-content(7em); gap: 1em; } .titleblock { margin: auto; width: fit-content; } .titleblock .subtitle { text-align:center; margin-bottom: .5em; } /*.before > :first-child > :first-child:last-child { display: none; }*/ .prenotes ul { list-style: none; padding: 0; } .prenotes li { padding: 0; }