/* -- Fonts (IBM Plex, SIL OFL) -------------------------------------------- */ @font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-serif-400.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plex-serif-500.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/plex-serif-400i.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/plex-sans.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-400.woff2) format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plex-mono-500.woff2) format("woff2"); } /* -- Layout --------------------------------------------------------------- */ /* Pandoc standalone puts all content directly in . We use body as the centered column container, matching the Typst template geometry. */ html { scroll-behavior: smooth; } body { font-family: "IBM Plex Serif", serif; font-size: 16px; line-height: 1.65; color: #333; background: #faf9f7; max-width: 38em; margin: 0 auto; padding: 3em 1.5em 5em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -- Home link ------------------------------------------------------------ */ nav.home { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; margin-bottom: 2em; } nav.home a { color: #888; text-decoration: none; } nav.home a:hover { color: #4682B4; } /* -- Title block ---------------------------------------------------------- */ header#title-block-header { margin-bottom: 2em; } header#title-block-header h1.title { font-family: "IBM Plex Sans", sans-serif; font-size: 26px; font-weight: 600; line-height: 1.2; color: #222; margin: 0 0 0.4em; } header#title-block-header .author, header#title-block-header .date { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; color: #888; display: inline; margin: 0; } header#title-block-header .author::after { content: " \00b7 "; } header#title-block-header .date a { color: #888; text-decoration: none; } header#title-block-header .date a:hover { color: #4682B4; } header#title-block-header .author:empty, header#title-block-header .date:empty { display: none; } /* -- Headings ------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: "IBM Plex Sans", sans-serif; color: #222; } h1 { font-size: 19px; font-weight: 500; margin: 1.8em 0 0.5em; } h2 { font-size: 16px; font-weight: 500; margin: 1.4em 0 0.4em; } /* Run-in heading: flows into the paragraph */ h3 { font-size: 16px; font-weight: 500; display: inline; margin: 0; } h3::after { content: ".\00a0\00a0"; } h3 + p { display: inline; } h3 + p + * { margin-top: 1.2em; } /* -- Body text ------------------------------------------------------------ */ p { margin: 0 0 1em; text-align: justify; hyphens: auto; } /* -- Links ---------------------------------------------------------------- */ a { color: #4682B4; text-decoration: none; transition: color 0.15s; } a:hover { text-decoration: underline; } /* -- Block quotes --------------------------------------------------------- */ blockquote { margin: 1.2em 0; padding: 0.5em 1em; border-left: 2.5px solid #89add6; color: #555; font-style: italic; } blockquote p { text-align: left; } blockquote p:last-child { margin-bottom: 0; } /* -- Code ----------------------------------------------------------------- */ code { font-family: "IBM Plex Mono", monospace; font-size: 0.875em; } pre { font-family: "IBM Plex Mono", monospace; font-size: 13px; line-height: 1.5; background: #f0f0f0; border-radius: 2px; padding: 0.6em 0.8em; margin: 1.2em 0; overflow-x: auto; } div.sourceCode { margin: 1.2em 0; } div.sourceCode pre { margin: 0; } p > code, li > code, td > code { background: #f0f0f0; padding: 0.1em 0.3em; border-radius: 2px; } /* -- Tables --------------------------------------------------------------- */ table { border-collapse: collapse; margin: 1.2em 0; font-size: 15px; width: 100%; } thead { border-bottom: 1.5px solid #bbb; } thead th { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 500; padding: 6px 10px; text-align: left; } tbody td { padding: 5px 10px; } tbody tr:last-child { border-bottom: 1px solid #ddd; } caption { font-size: 14px; font-style: italic; color: #777; caption-side: bottom; padding-top: 0.4em; } /* -- Figures -------------------------------------------------------------- */ figure { margin: 1.5em 0; text-align: center; } figure img, figure svg { max-width: 100%; height: auto; } figcaption { font-size: 14px; font-style: italic; color: #777; margin-top: 0.4em; } /* -- Footnotes ------------------------------------------------------------ */ section.footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid #ddd; font-size: 14px; color: #555; } section.footnotes hr { display: none; } section.footnotes ol { padding-left: 1.5em; } /* -- Lists ---------------------------------------------------------------- */ ul, ol { margin: 0.6em 0; padding-left: 1.5em; } li { margin-bottom: 0.3em; } /* -- Custom blocks -------------------------------------------------------- */ div.aside { background: #f0f0f0; border-radius: 2px; padding: 0.8em 1em; margin: 1.2em 0; font-size: 15px; color: #555; } div.callout { padding: 0.8em 1em; margin: 1.2em 0; border-radius: 0 2px 2px 0; } div.callout .callout-label { display: block; font-family: "IBM Plex Sans", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3em; } div.callout.note { border-left: 2.5px solid #4682B4; background: #f2f6fb; } div.callout.note .callout-label { color: #4682B4; } div.callout.tip { border-left: 2.5px solid #2d8a4e; background: #f0f8f3; } div.callout.tip .callout-label { color: #2d8a4e; } div.callout.warning { border-left: 2.5px solid #d4942a; background: #fdf6ec; } div.callout.warning .callout-label { color: #d4942a; } div.callout.important { border-left: 2.5px solid #c44040; background: #fdf0f0; } div.callout.important .callout-label { color: #c44040; } div.key { background: #f0f5fa; border: 1px solid #b8cfe0; border-radius: 2px; padding: 0.8em 1em; margin: 1.2em 0; } div.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; margin: 1.2em 0; } div.twocol > div.col { min-width: 0; } /* -- Footer --------------------------------------------------------------- */ footer { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; color: #aaa; text-align: center; margin-top: 4em; padding-top: 1em; border-top: 1px solid #e0e0e0; } footer a { color: #aaa; text-decoration: none; } footer a:hover { color: #4682B4; } /* -- Responsive ----------------------------------------------------------- */ @media (max-width: 480px) { body { padding: 1.5em 1em 3em; font-size: 15px; } div.twocol { grid-template-columns: 1fr; } } /* -- Dark mode ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { body { color: #d4d4d4; background: #1a1a1a; } h1, h2, h3, h4, header#title-block-header h1.title { color: #e0e0e0; } nav.home a, header#title-block-header .author, header#title-block-header .date, header#title-block-header .date a { color: #888; } a { color: #7aadcf; } nav.home a:hover, header#title-block-header .date a:hover, footer a:hover { color: #7aadcf; } blockquote { border-left-color: #5a8aad; color: #aaa; } pre, p > code, li > code, td > code, div.aside { background: #2a2a2a; } div.aside { color: #aaa; } div.callout.note { border-left-color: #5a8aad; background: #1c2630; } div.callout.note .callout-label { color: #7aadcf; } div.callout.tip { border-left-color: #3a9a5e; background: #1c2a20; } div.callout.tip .callout-label { color: #4db870; } div.callout.warning { border-left-color: #c4943a; background: #2a2418; } div.callout.warning .callout-label { color: #d4a44a; } div.callout.important { border-left-color: #c45050; background: #2a1c1c; } div.callout.important .callout-label { color: #d46060; } div.key { background: #1c2430; border-color: #3a5a70; } table { color: #d4d4d4; } thead { border-bottom-color: #555; } tbody tr:last-child { border-bottom-color: #444; } caption, figcaption { color: #888; } section.footnotes { border-top-color: #444; color: #aaa; } footer { border-top-color: #333; color: #666; } footer a { color: #666; } figure svg { background: #faf9f7; border-radius: 4px; padding: 0.5em; } } /* -- Print ---------------------------------------------------------------- */ @media print { body { background: white; color: black; padding: 0; max-width: none; } nav.home, footer { display: none; } a { color: inherit; text-decoration: underline; } pre { border: 1px solid #ddd; background: none; } }