/* ========================================================================= Emerald Legacy — HTML theme for the collected stories. A sibling of the theme in the rules-documents repository: same parchment, same Source Serif 4, same green. Where that one is built for looking things up, this one is built for reading a story end to end, so it is a single quiet column with more air in it. The frames down both edges are cropped from the clan backgrounds the PDF already uses (docs/images/background_*.jpg). The Rakefile reads the same attribute the PDF does and tags with clan-crab, clan-dragon and so on, so each story carries its own clan's frame on the web too. ========================================================================= */ /* --- Faces ------------------------------------------------------------- */ /* Subset to Latin-1, Latin Extended-A and the punctuation the stories use, with the weight axis left variable, so one file covers regular to bold. */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/sourceserif4.woff2) format('woff2-variations'), url(fonts/sourceserif4.woff2) format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/sourceserif4-italic.woff2) format('woff2-variations'), url(fonts/sourceserif4-italic.woff2) format('woff2'); } /* --- Tokens ------------------------------------------------------------ */ :root { --parchment: #f3ebe0; --parchment-sunk: #e8dcc8; --ink: #1f2119; --ink-soft: #5c5f52; --ink-faint: #8d9081; --emerald: #2a6419; --emerald-deep: #1b4310; --emerald-wash: #2a641914; /* Clan colours, as the Emerald Edict's PDF theme defines them. */ --crab: #294056; --crane: #4b7ba8; --dragon: #426c44; --lion: #8a7133; --neutral: #494848; --phoenix: #bc510a; --scorpion: #742425; --unicorn: #4e2e6a; --clan: var(--neutral); --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --measure: clamp(20rem, 62vw, 42rem); /* ~65 characters of prose at the top end */ --gutter: clamp(1rem, 4vw, 3rem); --column: calc(var(--measure) + 2 * var(--gutter)); --frame: 36px; --frame-left: url(assets/frame-neutral-left.webp); --frame-right: url(assets/frame-neutral-right.webp); } /* Each story's clan, taken from the page background it sets for the PDF. */ body.clan-crab { --clan: var(--crab); --frame-left: url(assets/frame-crab-left.webp); --frame-right: url(assets/frame-crab-right.webp); } body.clan-crane { --clan: var(--crane); --frame-left: url(assets/frame-crane-left.webp); --frame-right: url(assets/frame-crane-right.webp); } body.clan-dragon { --clan: var(--dragon); --frame-left: url(assets/frame-dragon-left.webp); --frame-right: url(assets/frame-dragon-right.webp); } body.clan-lion { --clan: var(--lion); --frame-left: url(assets/frame-lion-left.webp); --frame-right: url(assets/frame-lion-right.webp); } body.clan-neutral { --clan: var(--neutral); --frame-left: url(assets/frame-neutral-left.webp); --frame-right: url(assets/frame-neutral-right.webp); } body.clan-phoenix { --clan: var(--phoenix); --frame-left: url(assets/frame-phoenix-left.webp); --frame-right: url(assets/frame-phoenix-right.webp); } body.clan-scorpion { --clan: var(--scorpion); --frame-left: url(assets/frame-scorpion-left.webp); --frame-right: url(assets/frame-scorpion-right.webp); } body.clan-unicorn { --clan: var(--unicorn); --frame-left: url(assets/frame-unicorn-left.webp); --frame-right: url(assets/frame-unicorn-right.webp); } /* --- Page -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--parchment); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } body { margin: 0; min-height: 100vh; padding: 0 var(--frame); background-color: var(--parchment); background-image: var(--frame-left), var(--frame-right), linear-gradient(#f8f2ea 0%, var(--parchment) 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-position: left top, right top, center top; background-size: var(--frame) auto, var(--frame) auto, 100% 900px; color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; /* a story is read at length, so a little larger */ line-height: 1.75; font-feature-settings: 'kern' 1, 'liga' 1; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: var(--emerald-deep); text-decoration: underline; text-decoration-color: #2a641955; text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color 0.12s ease, text-decoration-color 0.12s ease; } a:hover { color: var(--clan); text-decoration-color: currentColor; } a:focus-visible, :focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 2px; } /* --- Title ------------------------------------------------------------- */ #header { max-width: var(--column); margin: 0 auto; padding: clamp(3rem, 10vw, 7rem) var(--gutter) 0; text-align: center; } #header h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 400; line-height: 1.15; color: var(--ink); } /* The author, which Asciidoctor puts in the details block. The build sets no revision number or date, so those spans hold nothing but the comma that separates them. */ #header .details { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1rem; font-style: italic; } #header .details br { display: none; } #header .details span { display: inline; } #header .details #revnumber, #header .details #revdate { display: none; } /* A short rule in the clan's colour under the title, the one place the frame's colour appears inside the text. */ #header::after { content: ''; display: block; width: 4.5rem; height: 2px; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; background: var(--clan); opacity: 0.65; } /* --- The story --------------------------------------------------------- */ #content { max-width: var(--column); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 5rem; } #content .paragraph { margin: 0 0 1.15rem; } #content p { margin: 0 0 1.15rem; } #content .paragraph > p:last-child { margin-bottom: 0; } /* Stories open on a line of dialogue or a scene-setting sentence often enough that a drop cap would fight the text; the opening line is given a little more room instead. */ #content > .sect1 > .sectionbody > .paragraph:first-child > p, #content > .paragraph:first-child > p { margin-top: 0; } em, i { font-style: italic; } strong, b { font-weight: 700; } /* Scene break. The source marks these with ''' — in print they are a rule, and here they are a small mark in the clan's colour with air either side. */ #content hr { width: 100%; height: auto; margin: 2.75rem 0; border: 0; text-align: center; overflow: visible; } #content hr::before { content: '◆'; display: block; color: var(--clan); opacity: 0.55; font-size: 0.75rem; letter-spacing: 0.9em; text-indent: 0.9em; /* balance the trailing letter-space */ } /* --- Quotes, verse, captions ------------------------------------------- */ #content .quoteblock { margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--clan); color: var(--ink-soft); font-style: italic; } #content .quoteblock .attribution { margin-top: 0.5rem; color: var(--ink-faint); font-size: 0.92rem; font-style: normal; } #content .quoteblock .attribution cite { font-style: italic; } #content .verseblock { margin: 2rem 0; padding-left: 1.5rem; white-space: pre-wrap; font-style: italic; color: var(--ink-soft); } #content .imageblock { margin: 2.5rem 0; text-align: center; } #content .imageblock .title, #content .title { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.92rem; font-style: italic; } /* --- Document roles ---------------------------------------------------- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .underline { text-decoration: underline; text-underline-offset: 0.15em; } .small { font-size: 0.85em; } /* --- The index --------------------------------------------------------- */ /* index.adoc has no clan of its own, so it keeps the neutral frame. Its one list is the way into everything else, so it is set as a proper contents page rather than as running prose. */ #content .ulist.none > ul { list-style: none; margin: 0; padding: 0; } #content .ulist.none > ul > li { margin: 0; border-bottom: 1px solid #2a641926; } #content .ulist.none > ul > li > p { margin: 0; } #content .ulist.none > ul > li a { display: block; padding: 0.6rem 0.5rem; color: var(--ink); text-decoration: none; border-radius: 2px; } #content .ulist.none > ul > li a:hover { background: var(--emerald-wash); color: var(--emerald-deep); } #content h2 { margin: clamp(2.5rem, 6vw, 3.5rem) 0 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--emerald); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 400; color: var(--emerald-deep); } #content .sect1:first-child > h2 { margin-top: 0; } /* --- Footer ------------------------------------------------------------ */ #footer { max-width: var(--column); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; border-top: 1px solid #2a641926; color: var(--ink-soft); font-size: 0.85rem; text-align: center; } /* --- Narrow screens ---------------------------------------------------- */ @media (max-width: 700px) { :root { --frame: 14px; --measure: 100%; --gutter: 1rem; } body { font-size: 1.0625rem; } #content { max-width: 100%; } } /* --- Print ------------------------------------------------------------- */ @media print { html, body { background: #fff; } body { padding: 0; font-size: 11pt; } #content, #header, #footer { max-width: none; } #content .imageblock { break-inside: avoid; } a { color: var(--ink); text-decoration: none; } }