/* eh blog stylesheet — ported from the previous Eleventy theme. * * Targets the semantic selectors emitted by fair/eh templates: *

page header *
post header *
index footer nav *
post footer nav * * No element IDs are used — eh templates don't emit any (apart from * the optional bsky comments block). / / ---------- design tokens ---------- / :root { --color-text: black; --color-background: #9E8ABF; --color-light: #E8E2A9; --color-primary: #463562; --color-primary-rgb: 70, 53, 98; --unit: 1rem; --container-width: 80ch; --font-family-sans-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS Mincho", serif; --font-family-body: "MS Mincho", "Hiragino Mincho ProN", serif; --font-family-heading: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-family-code: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace; } @media (prefers-color-scheme: dark) { :root { --color-text: #fff; --color-background: #344B61; --color-primary: #F4599D; --color-primary-rgb: 244, 89, 157; } } / ---------- fonts ---------- / @font-face { font-family: Atari; font-display: swap; src: url(/assets/fonts/Atari.ttf) format("truetype"); } @font-face { font-family: "MS Mincho"; font-display: swap; src: url(/assets/fonts/MSMINCHO.TTF) format("truetype"); } / ---------- base ---------- / body { / fair templates set max-width:720px inline; widen it for our layout. / max-width: var(--container-width) !important; margin: calc(var(--unit) 2) auto !important; padding: var(--unit) !important; color: var(--color-text); background-color: var(--color-background); font-family: var(--font-family-body); font-size: 1.2rem; line-height: 1.6; } p { margin: 0 0 1.1em; } a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; transition: text-shadow 0.3s ease; } a:hover { text-shadow: 0 0 4px rgba(var(--color-primary-rgb), 0.35); } hr { border: 0; border-top: 2px solid var(--color-light); margin: 2rem 0; } img { max-width: 100%; height: auto; } /* ---------- page header (index + posts) ---------- / body > header { font-family: Atari, var(--font-family-heading); margin-bottom: calc(var(--unit) 2); } body > header h1 { font-family: Atari, var(--font-family-heading); font-size: 2.4rem; margin: 0 0 0.5em; } body > header p { font-family: var(--font-family-sans-serif); font-size: 1rem; margin: 0.25em 0; } /* post header sits inside
; keep the body font, just style as a normal article heading. / article > header h1 { font-family: var(--font-family-heading); font-weight: 800; font-size: 2rem; margin: 0 0 0.4em; padding-bottom: 0.4rem; } article > header small { font-family: var(--font-family-sans-serif); font-size: 0.95rem; opacity: 0.85; } / ---------- inline headings ---------- / article h1, article h2, article h3, article h4, article h5, article h6 { font-family: var(--font-family-heading); font-weight: 800; margin-top: 2rem; margin-bottom: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } article h1 { margin-top: 2.5rem; } article h2 { margin-top: 2rem; } article h3 { margin-top: 1.75rem; } @media (prefers-color-scheme: dark) { article h2, article h3 { border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.25); padding-bottom: 0.4rem; } } / ---------- code ---------- / code { font-family: var(--font-family-code); font-size: 0.94em; background: rgba(var(--color-primary-rgb), 0.1); padding: 0.1em 0.35em; border-radius: 3px; } pre { background: rgba(var(--color-primary-rgb), 0.1); padding: 0.9em 1em; border-radius: 5px; overflow-x: auto; line-height: 1.45; } pre code { background: transparent; padding: 0; border-radius: 0; } / ---------- blockquote ---------- / blockquote { margin: 1.2em 0; padding: 0.4em 1em; border-left: 3px solid var(--color-light); color: inherit; opacity: 0.92; } blockquote footer { margin-top: 0.4em; font-size: 0.92em; border: 0; text-align: left; animation: none; } / ---------- figures ---------- / figure { margin: 1.5em 0; } figure img { display: block; margin: 0 auto; border-radius: 4px; } figcaption { margin-top: 0.5em; font-size: 0.92em; opacity: 0.75; text-align: center; } .image-align-left { float: left; margin: 0.5em 1.2em 0.8em 0; max-width: 50%; } .image-align-right { float: right; margin: 0.5em 0 0.8em 1.2em; max-width: 50%; } .image-align-center { margin-left: auto; margin-right: auto; } article h1, article h2, article h3, hr { clear: both; } .images-row { display: flex; flex-wrap: wrap; gap: 1em; margin: 1.5em 0; } .images-row figure, .images-row p { flex: 1 1 200px; margin: 0; } .images-row img { width: 100%; height: auto; } / ---------- footer nav (index + post) ---------- / body > footer, article > footer { margin-top: calc(var(--unit) 3); border-top: 2px solid var(--color-light); padding-top: var(--unit); } body > footer nav, article > footer nav { text-align: center; font-family: var(--font-family-sans-serif); } @media (prefers-reduced-motion: no-preference) { @keyframes rainbow-glow { 0% { border-color: #ff6b6b; box-shadow: 0 0 6px rgba(255, 107, 107, 0.3); } 16% { border-color: #ffa94d; box-shadow: 0 0 6px rgba(255, 169, 77, 0.3); } 33% { border-color: #ffd43b; box-shadow: 0 0 6px rgba(255, 212, 59, 0.3); } 50% { border-color: #51cf66; box-shadow: 0 0 6px rgba(81, 207, 102, 0.3); } 66% { border-color: #339af0; box-shadow: 0 0 6px rgba(51, 154, 240, 0.3); } 83% { border-color: #9775fa; box-shadow: 0 0 6px rgba(151, 117, 250, 0.3); } 100% { border-color: #ff6b6b; box-shadow: 0 0 6px rgba(255, 107, 107, 0.3); } } body > footer, article > footer { animation: rainbow-glow 10s linear infinite; } } /* ---------- small screens ---------- */ @media (max-width: 480px) { body { margin: var(--unit) auto !important; font-size: 1.05rem; } body > header h1 { font-size: 1.8rem; } .image-align-left, .image-align-right { float: none; max-width: 100%; margin: 1em 0; } .images-row { flex-direction: column; } }