/* ============================================================ Web Book Template — CSS Mimics the layout of craftinginterpreters.com. Edit only the HTML files; this stylesheet is shared. COLOR THEMES All colors come from CSS custom properties (see :root and the body[data-theme="warm"] override below). To pick an alternative palette, set a data-theme attribute on the element, e.g. Available themes: (none) -> default cool blue/slate warm -> warm/terracotta light Add new themes by copying the body[data-theme="..."] block and overriding the tokens. ============================================================ */ @charset "UTF-8"; /* ---------- Design tokens (default theme: cool blue/slate) ---------- */ :root { --bg: #fff; --ink: #222; --accent: #1481b8; --accent-dark: #0f6a97; --accent-deep: #004466; --line: #dee9ed; --muted: #7aa0b8; --marker: #ddd; --nav-bg: #29313d; --nav-ink: #4b6781; --nav-link: #7aa0b8; --nav-link-hover: #dee9ed; --nav-border: #3b4b5e; --note-bg: #faf8f5; --note-ink: #797978; --code-ink: #595959; --code-muted: #717170; --code-faint: #bab8b7; --code-line: #dad8d6; --code-em: #999997; --code-insert: #f5f3f0; --box-text: #444; --box-1-bg: #eef4f7; --box-1-code: #e4eef1; --box-2-bg: #f6f8f2; --box-2-code: #eef1ea; --box-2-border: #c3d3a6; --box-2-title: #6a8a3c; --quote: #5985a6; --serif: 'HardingTextWeb-Regular', Georgia, serif; --sans: "Source Sans Pro", sans-serif; --mono: "Source Code Pro", Menlo, Consolas, Monaco, monospace; } /* ---------- Alternative theme: warm/terracotta light ---------- Apply by setting . Overrides only the color tokens; layout and typography are shared. */ body[data-theme="warm"] { --bg: #fffdf9; --ink: #2b2b2b; --accent: #c25e3a; --accent-dark: #a34a2a; --accent-deep: #7a331d; --line: #efe2d5; --muted: #b08968; --marker: #e6d5c2; --nav-bg: #4a3526; --nav-ink: #b99a7e; --nav-link: #d9b78c; --nav-link-hover: #f5e9dc; --nav-border: #6b4f38; --note-bg: #faf3ea; --note-ink: #6f6459; --code-ink: #5b534a; --code-muted: #71665b; --code-faint: #b3a695; --code-line: #ddd0bd; --code-em: #a79a86; --code-insert: #f4ece0; --box-text: #4a4238; --box-1-bg: #f9e9dd; --box-1-code: #f2ddcd; --box-2-bg: #f6f1e7; --box-2-code: #eee6d8; --box-2-border: #d6c39a; --box-2-title: #8a6d3b; --quote: #a3704f; } /* ---------- Harding serif font (self-hosted) ---------- */ @font-face { font-family: 'HardingTextWeb-Regular'; src: url('fonts/HardingTextWeb-Regular.eot'); src: url('fonts/HardingTextWeb-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/HardingTextWeb-Regular.woff2') format('woff2'), url('fonts/HardingTextWeb-Regular.woff') format('woff'), url('fonts/HardingTextWeb-Regular.ttf') format('truetype'), url('fonts/HardingTextWeb-Regular.svg#HardingTextWeb-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } /* ---------- Reset ---------- */ body, h1, h2, h3, h4, h5, h6, p, blockquote, code, ul, ol, dl, dd, img { margin: 0; } img { outline: none; } /* ---------- Base ---------- */ body { color: var(--ink); font: normal 16px/24px var(--serif); background: var(--bg); } a { color: var(--accent); text-decoration: none; border-bottom: solid 1px rgba(222, 233, 237, 0); transition: color 0.2s ease, border-color 0.4s ease; } a:hover { color: var(--accent); border-bottom: solid 1px var(--line); } code { font: normal 16px var(--mono); color: var(--code-muted); white-space: pre-wrap; padding: 2px; } strong code { font-weight: bold; color: inherit; } a code { color: var(--accent); } /* ---------- Inline math ---------- */ span.math { font-family: var(--serif); white-space: nowrap; } span.math em { font-style: italic; } span.math .frac { display: inline-block; vertical-align: middle; text-align: center; } span.math .frac .fnum { display: block; border-bottom: solid 1px currentColor; padding: 0 3px; } span.math .frac .fden { display: block; padding: 0 3px; } span.math .cases { display: inline-block; vertical-align: middle; text-align: left; } strong.term { font-weight: bold; color: #0070c0; } /* ---------- Sidebar navigation ---------- */ nav, .narrow-nav { font: 300 15px/24px var(--sans); background: var(--nav-bg); color: var(--nav-ink); } nav a, nav h2 a, nav h3 a, .narrow-nav a { color: var(--nav-link); text-decoration: none; border-bottom: none; } nav a:hover, .narrow-nav a:hover { color: var(--nav-link-hover); text-decoration: none; border-bottom: none; } nav img { box-sizing: border-box; width: 100%; padding: 55px 48px 23px 48px; } nav h2 { font: 400 16px/24px var(--sans); text-transform: uppercase; letter-spacing: 1px; color: var(--nav-link); } nav h3 { font: 400 18px/24px var(--sans); color: var(--nav-link); } nav h2 small, nav h3 small { float: right; font-size: 16px; color: var(--nav-ink); } nav ol, nav ul { margin: 6px 0 3px 0; padding: 6px 0 4px 24px; border-top: solid 1px var(--nav-border); border-bottom: solid 1px var(--nav-border); } nav ul { list-style-type: none; padding-left: 0; } nav hr { border: none; border-top: solid 1px var(--nav-border); margin: 6px 0 0 0; padding: 0 0 3px 0; } nav li small { float: right; font-size: 14px; color: var(--nav-ink); } nav li.divider { margin: 5px 0 7px 0; border-top: solid 1px var(--nav-border); } nav li.end-part { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } nav li.end-part small { font-weight: 300; text-transform: none; letter-spacing: 0; } nav .prev-next { padding-top: 7px; font: 400 12px/18px var(--sans); text-align: center; text-transform: uppercase; letter-spacing: 1px; } nav.wide { position: fixed; width: 336px; height: 100%; } nav.wide .contents { margin: 24px 48px; } .nav-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 70; width: 44px; height: 44px; padding: 0; border: 1px solid var(--nav-border); border-radius: 4px; background: var(--nav-bg); color: var(--nav-link); font: 400 22px/40px var(--sans); cursor: pointer; } .nav-toggle:hover { color: var(--nav-link-hover); } .nav-scrim { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 55; background: rgba(0, 0, 0, 0.5); } .left { float: left; } .right { float: right; } /* ---------- Page layout ---------- */ .page { position: relative; width: 912px; margin: 0 auto 0 384px; } article { position: relative; width: 576px; } article h1 { position: relative; font: 48px/48px var(--serif); padding: 109px 0 19px 0; z-index: 2; } article h1.part { font: 600 36px/48px var(--sans); padding: 108px 0 20px 0; text-transform: uppercase; letter-spacing: 1px; } article .number { position: absolute; top: 50px; left: 624px; z-index: 1; font: 300 96px var(--sans); color: var(--line); } article p { margin: 24px 0; } article ol, article ul { margin: 24px 0; padding: 0 0 0 24px; } article img { max-width: 100%; } article img.wide { max-width: none; width: 912px; } /* ---------- Headings ---------- */ article.chapter h2 { font: 600 30px/38px var(--serif); margin: 69px 0 0 0; padding-bottom: 3px; } article.chapter h2 small { font: 800 22px/24px var(--serif); float: right; } article.chapter h3 { font: italic 24px/30px var(--serif); margin: 30px 0 0 0; padding-bottom: 1px; } article.chapter h3 small { font: 600 16px/24px var(--serif); float: right; } /* Sub-subsections: progressively smaller, non-italic levels below h3. */ article.chapter h4 { font: 600 20px/26px var(--serif); margin: 20px 0 0 0; padding-bottom: 1px; } article.chapter h4 small { font: 600 14px/24px var(--serif); color: var(--ink); float: right; } article.chapter h5 { font: 600 17px/22px var(--serif); margin: 20px 0 0 0; } article.chapter h5 small { font: 600 13px/24px var(--serif); color: var(--ink); float: right; } article.chapter h6 { font: 600 15px/20px var(--serif); margin: 38px 0 0 0; } article.chapter h6 small { font: 600 12px/24px var(--serif); color: var(--ink); float: right; } /* All chapter headings and their links are black; the section marker (§) and right-floated number match across levels. */ article.chapter h2, article.chapter h3, article.chapter h4, article.chapter h5, article.chapter h6 { color: var(--ink); } article.chapter h2 a, article.chapter h3 a, article.chapter h4 a, article.chapter h5 a, article.chapter h6 a { color: var(--ink); border-bottom: none; } article.chapter h2 a:hover, article.chapter h3 a:hover, article.chapter h4 a:hover, article.chapter h5 a:hover, article.chapter h6 a:hover { border-bottom: none; color: inherit; } article.chapter h2 a::before, article.chapter h3 a::before { position: absolute; left: -48px; width: 48px; content: "\00A7"; color: var(--bg); transition: color 0.2s ease; text-align: center; } article.chapter h2 a:hover::before, article.chapter h3 a:hover::before { color: var(--marker); } /* ---------- Challenges & design notes ---------- */ article.chapter .challenges, article.chapter .design-note { border-radius: 3px; padding: 12px; margin: -2px -12px 26px -12px; font: normal 16px/24px var(--sans); color: var(--box-text); } article.chapter .challenges h2, article.chapter .design-note h2 { margin: 0 0 -12px 0; padding: 0; font: 600 16px/24px var(--sans); text-transform: uppercase; letter-spacing: 1px; } article.chapter .challenges h2 a, article.chapter .design-note h2 a { color: inherit; } article.chapter .challenges h2 a::before, article.chapter .design-note h2 a::before { content: none; } article.chapter .challenges ol, article.chapter .design-note ol { padding: 0 0 0 18px; } article.chapter .challenges ol li, article.chapter .design-note ol li { padding: 0 0 0 6px; font-weight: 600; } article.chapter .challenges ol li p, article.chapter .design-note ol li p { font-weight: 400; } article.chapter .challenges pre, article.chapter .design-note pre { margin: 0; } article.chapter .challenges > blockquote p, article.chapter .design-note > blockquote p { margin: 0 24px; font: italic 16px/24px var(--sans); color: var(--box-text); } article.chapter .challenges > blockquote::before, article.chapter .challenges > blockquote::after, article.chapter .design-note > blockquote::before, article.chapter .design-note > blockquote::after { content: none; } article.chapter .challenges { background: var(--box-1-bg); } article.chapter .challenges code, article.chapter .challenges .codehilite { background: var(--box-1-code); } article.chapter .design-note { background: var(--box-2-bg); } article.chapter .design-note code, article.chapter .design-note .codehilite { background: var(--box-2-code); } /* ---------- Tables ---------- */ article.chapter table { width: 100%; border-collapse: collapse; margin: 24px 0; } article.chapter table caption { text-align: left; font: 600 13px/20px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: 0 0 6px 0; } article.chapter table thead { font: 700 15px var(--serif); } article.chapter table th { border-bottom: solid 2px var(--line); text-align: left; padding: 4px 12px 4px 0; } article.chapter table td { border-bottom: solid 1px var(--line); line-height: 22px; padding: 3px 12px 3px 0; margin: 0; } article.chapter table td + td { padding-left: 12px; } /* ---------- Figures ---------- */ article.chapter figure { margin: 32px 0; text-align: center; } article.chapter figure img { max-width: 100%; border: 1px solid var(--line); padding: 8px; box-sizing: border-box; cursor: zoom-in; } article.chapter figure figcaption { margin-top: 8px; font: 600 13px/20px var(--sans); color: var(--muted); text-align: center; } /* ---------- Figure modal (lightbox) ---------- */ .figure-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.75); padding: 40px; cursor: zoom-out; } .figure-modal-box { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; } .figure-modal-box img { max-width: 100%; max-height: calc(100vh - 120px); background: var(--bg); border: 1px solid var(--line); padding: 8px; box-sizing: border-box; } .figure-modal-caption { margin-top: 12px; font: 600 13px/20px var(--sans); color: #fff; text-align: center; } /* ---------- Equations ---------- */ article.chapter .equation { margin: 24px 0; text-align: center; font-style: italic; font-size: 17px; white-space: nowrap; overflow-x: auto; } /* ---------- Example & definition boxes ---------- */ article.chapter .example { margin: 32px 0; border-radius: 3px; background: var(--box-1-bg); padding: 14px 16px; } article.chapter .example .example-title { font: 600 13px/20px var(--sans); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin: 0 0 10px 0; } article.chapter .example p { margin: 12px 0; } article.chapter .definition { margin: 32px 0; border-radius: 3px; background: var(--box-2-bg); padding: 14px 16px; border-left: 4px solid var(--box-2-border); } article.chapter .definition .definition-title { font: 600 13px/20px var(--sans); text-transform: uppercase; letter-spacing: 1px; color: var(--box-2-title); margin: 0 0 8px 0; } article.chapter .definition p { margin: 12px 0; } /* ---------- Bibliography ---------- */ ol.bibliography { margin: 24px 0; padding: 0 0 0 24px; counter-reset: bib; list-style: none; } ol.bibliography li { position: relative; margin: 0 0 16px 0; padding-left: 24px; font: normal 16px/24px var(--serif); } ol.bibliography li::before { position: absolute; left: -8px; content: "[" counter(bib) "]"; counter-increment: bib; color: var(--muted); font: 600 13px/24px var(--sans); } ol.bibliography li a[title] { border: none; font-size: 13px; color: var(--muted); } ol.bibliography li a[title]:hover { color: var(--accent); } /* ---------- Contents page ---------- */ article.contents h2 { margin: 22px 0 6px 0; font: 600 normal 18px/24px var(--sans); text-transform: uppercase; letter-spacing: 1px; } article.contents h2 .num { display: inline-block; width: 36px; } article.contents ul { margin: -12px 0 0 0; padding: 6px 0 14px 0; } article.contents li { padding: 12px 0 0 36px; font: normal 16px/24px var(--sans); color: var(--muted); list-style-type: none; } article.contents li .num { float: left; letter-spacing: 1px; width: 36px; } article.contents li.sub { padding-left: 74px; } article.contents li.sub .num { width: 62px; } article.contents li.sub a { font: 500 15px/24px var(--sans); } article.contents li a { display: block; overflow: hidden; font: 600 17px/24px var(--sans); } article.contents li.design-note { padding-top: 0; } article.contents li.design-note a { font: 400 16px/23px var(--sans); } article.contents .chapters { display: table; width: 864px; } article.contents .row { display: table-row; } article.contents .first, article.contents .second { display: table-cell; vertical-align: top; } article.contents .second { padding-left: 48px; } article.contents footer { width: 864px; } /* ---------- Blockquote ---------- */ blockquote { position: relative; margin: 29px 0 31px 0; } blockquote::before, blockquote::after { position: absolute; top: -20px; font: italic 72px var(--serif); color: var(--line); } blockquote::before { content: "\201C"; left: -7px; } blockquote::after { content: "\201D"; right: 8px; } blockquote p { margin: 0 48px; font: italic 24px/36px var(--serif); color: var(--quote); } blockquote p em { font-style: normal; } blockquote cite { display: block; text-align: right; color: var(--muted); font-style: normal; font-size: 18px; } blockquote cite::before { content: "\2014\00A0"; color: var(--line); } blockquote cite em { font-style: italic; } /* ---------- Aside (margin note) ---------- */ aside { float: right; clear: right; width: 288px; margin-right: -336px; font: normal 14px/20px var(--serif); border-top: solid 1px var(--line); } aside p { margin: 20px 0; } aside p:first-child, aside img:first-child { margin-top: 4px; } aside p:last-child { margin-bottom: 4px; } aside code { font-size: 14px; border-radius: 2px; padding: 1px 2px; } aside .codehilite { padding: 6px; margin: -12px 0; } aside .codehilite:last-child { margin-bottom: 4px; } aside img.above { position: absolute; bottom: 100%; margin-bottom: 16px; } aside blockquote { margin: 20px 0; } aside blockquote::before, aside blockquote::after { content: none; } aside blockquote p { margin: 0 12px; font: italic 15px/20px var(--serif); color: inherit; } aside.bottom { border-top: none; border-bottom: solid 1px var(--line); } /* ---------- Code blocks ---------- */ .codehilite { color: var(--code-ink); background: var(--note-bg); border-radius: 3px; padding: 12px; margin: -12px; } pre { font: normal 13px/20px var(--mono); margin: 0; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .codehilite pre { color: var(--note-ink); } .codehilite .k { color: #0099e6; } /* keyword */ .codehilite .n { color: #dd713c; } /* number */ .codehilite .s { color: #c38e22; } /* string */ .codehilite .e { color: #e8ba30; } /* ? */ .codehilite .c { color: #aaa9a7; } /* comment */ .codehilite .a { color: #9966cc; } /* annotation */ .codehilite .i { color: #1b6e98; } /* identifier */ .codehilite .t { color: #00a4b3; } /* type */ .codehilite .insert { margin: -2px -12px; padding: 2px 10px; border-left: solid 2px var(--code-line); border-right: solid 2px var(--code-line); background: var(--code-insert); } .codehilite .delete { margin: -2px -12px; padding: 2px 10px; border-left: solid 2px var(--code-line); border-right: solid 2px var(--code-line); background: repeating-linear-gradient(-45deg, var(--code-line), var(--code-line) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 6px); } .codehilite .delete span { color: var(--code-faint); } .codehilite .insert-before, .codehilite .insert-after { color: var(--code-faint); } .source-file, .source-file-narrow { font: normal 11px/16px var(--mono); color: var(--code-faint); } .source-file em, .source-file-narrow em { color: var(--code-em); font-style: normal; } .source-file-narrow { display: none; margin: 0px -12px 0 0; padding: 14px 0 0 0; text-align: right; } .source-file { position: absolute; right: -336px; width: 288px; padding: 2px 0 0 0; } .source-file::before { content: "<<"; color: var(--code-line); position: absolute; left: -36px; width: 36px; text-align: center; } /* ---------- Footer ---------- */ footer { position: relative; border-top: solid 1px var(--line); color: var(--muted); font: 400 15px var(--sans); text-align: center; margin: 48px 0; padding-top: 48px; } footer a, footer a:hover { border: none; } footer .next { position: absolute; right: 0; top: -13px; padding-left: 4px; background: var(--bg); font: 400 17px/24px var(--sans); text-transform: uppercase; letter-spacing: 1px; } footer .next:hover { color: var(--accent-deep); border: none; } /* ---------- Responsive: hide side nav, use floating ---------- */ @media only screen and (max-width: 1344px) { nav.wide { position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: 336px; max-width: 85vw; transform: translateX(-100%); transition: transform 0.2s ease; overflow-y: auto; box-shadow: 0 0 24px rgba(0, 0, 0, 0.25); z-index: 60; } nav.wide.open { transform: translateX(0); } .nav-toggle { display: block; } .nav-scrim.open { display: block; } body { margin: 0 24px; } .page { position: relative; width: inherit; max-width: 912px; margin: 0 auto; } article { width: inherit; margin-right: 336px; } article .number { top: 73px; left: inherit; right: 0; font-size: 72px; } article h1 { padding: 110px 0 18px 0; font-size: 44px; } article.contents .chapters, article.contents .row, article.contents .first, article.contents .second { display: block; width: auto; } article.contents .second { padding-left: 0; } article.contents footer { width: inherit; } } /* Narrow layout: side note moves inline, footer nav shown */ @media only screen and (max-width: 960px) { body { margin: 0; } .page { margin: 0 48px; width: inherit; } article { margin: 0; } article img.wide { width: inherit; max-width: 100%; } aside { float: none; clear: none; width: inherit; margin-right: 0; border-bottom: solid 1px var(--line); } aside p:first-child { margin-top: 8px; } aside p:last-child { margin-bottom: 8px; } aside div.codehilite:last-child { margin-bottom: 12px; } aside img { display: block; max-width: 288px; margin: 0 auto; } aside img.above { position: relative; } aside + div.codehilite { margin-top: 12px; } div.codehilite + aside { margin-top: 24px; } .source-file { display: none; } .source-file-narrow { display: block; } .narrow-nav { display: block !important; } } @media only screen and (max-width: 630px) { .page { margin: 0 24px; width: inherit; } } @media only screen and (max-width: 580px) { body { font-size: 15px; line-height: 22px; } article h1 { font-size: 36px; padding: 100px 0 14px 0; } article h1.part { font-size: 30px; padding: 97px 0 17px 0; } article .number { top: 61px; font-size: 72px; } article p { margin: 22px 0; } article ol, article ul { margin: 22px 0; padding: 0 0 0 22px; } blockquote { margin: 27px 0 28px 0; } blockquote::before, blockquote::after { top: -17px; font-size: 52px; } blockquote p { margin: 0 22px; font-size: 20px; line-height: 33px; } article.chapter h2 { margin-top: 64px; padding-bottom: 2px; font-size: 22px; line-height: 22px; } article.chapter h3 { margin-top: 64px; padding-bottom: 0; font-size: 20px; } article.chapter h2 a::before, article.chapter h3 a::before { left: -24px; width: 24px; } } /* ---------- Inline mobile prev/next bar ---------- */ .narrow-nav { display: none; text-align: center; } .narrow-nav a { padding: 8px 16px; } /* ---------- Export PDF button ---------- */ .export-btn { position: fixed; right: 24px; bottom: 24px; z-index: 50; font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: 1px; color: #fff; background: var(--accent); border: none; border-radius: 3px; padding: 12px 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); text-decoration: none; } .export-btn:hover { background: var(--accent-dark); } /* ---------- Citation tooltip ---------- */ .cite-tip { position: fixed; z-index: 100; max-width: 420px; padding: 9px 12px; background: var(--ink); color: var(--bg); font: normal 13px/18px var(--sans); border-radius: 3px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } .cite-tip a { color: #9cd2f7; text-decoration: underline; } .cite-tip a:hover { color: #c8e6fb; } /* ---------- Print ---------- */ @media print { html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } nav, .narrow-nav, .prev-next, .export-btn, .nav-toggle, .nav-scrim { display: none !important; } .page { margin: 0; width: auto; } article { width: auto; max-width: none; margin: 0; } article .number { display: none; } article h1 { padding: 0 0 6mm 0; font-size: 26pt; } .codehilite, .challenges, .design-note, .example, .definition, blockquote { -webkit-print-color-adjust: exact; print-color-adjust: exact; } aside { position: static; float: none; width: auto; display: block; margin: 4mm 0; padding: 3mm; border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); } aside p { margin: 0; } .source-file { display: none; } .source-file-narrow { display: block; font-size: 8pt; color: var(--code-em); text-align: right; } .codehilite, .challenges, .design-note, .example, .definition, .figure, table, pre, blockquote { page-break-inside: avoid; } .equation { white-space: normal; font-size: 13pt; } h1, h2, h3 { page-break-after: avoid; } }