/* ============================================================ Small Machines — Hugo port of the AI Stories design Palette: stone (default) | Font: EB Garamond ============================================================ */ /* ---- Palette tokens ---- */ :root { --bg: oklch(0.965 0.004 95); --ink: oklch(0.22 0.005 250); --ink-soft: oklch(0.46 0.006 250); --ink-faint: oklch(0.68 0.005 250); --rule: oklch(0.88 0.005 250); --accent: oklch(0.52 0.07 235); --measure: 560px; --title-size: 1.5; } /* Optional palette overrides via */ body.palette-parchment { --bg: oklch(0.968 0.012 85); --ink: oklch(0.24 0.015 60); --ink-soft: oklch(0.48 0.018 60); --ink-faint: oklch(0.68 0.015 70); --rule: oklch(0.88 0.015 75); --accent: oklch(0.55 0.09 40); } body.palette-sage { --bg: oklch(0.965 0.012 110); --ink: oklch(0.25 0.02 150); --ink-soft: oklch(0.48 0.02 150); --ink-faint: oklch(0.68 0.015 140); --rule: oklch(0.88 0.018 130); --accent: oklch(0.5 0.07 150); } body.palette-ink { --bg: oklch(0.975 0.003 85); --ink: oklch(0.18 0.005 60); --ink-soft: oklch(0.42 0.008 60); --ink-faint: oklch(0.66 0.006 60); --rule: oklch(0.88 0.006 70); --accent: oklch(0.35 0.04 50); } body.palette-dusk { --bg: oklch(0.22 0.01 70); --ink: oklch(0.92 0.012 80); --ink-soft: oklch(0.72 0.012 75); --ink-faint: oklch(0.52 0.012 75); --rule: oklch(0.32 0.012 70); --accent: oklch(0.78 0.08 60); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: 'EB Garamond', Garamond, 'Times New Roman', serif; font-size: 20px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "liga" 1, "onum" 1, "kern" 1; transition: background-color 600ms ease, color 600ms ease; } a { color: inherit; text-decoration: none; } /* ---- Page wrapper ---- */ .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: clamp(56px, 10vh, 140px) 24px clamp(80px, 14vh, 180px); } .measure { width: 100%; max-width: var(--measure); } /* ================================================================ MASTHEAD (homepage) ================================================================ */ .mast { text-align: center; margin-bottom: clamp(80px, 16vh, 180px); } .mast h1 { font-size: clamp(34px, 5.4vw, 52px); font-weight: 400; font-style: italic; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 18px; color: var(--ink); } .mast .sub { font-size: 17px; color: var(--ink-soft); font-style: italic; margin: 0; line-height: 1.5; } /* ================================================================ STORY LIST (homepage) ================================================================ */ .stories { list-style: none; margin: 0; padding: 0; } .stories li { padding: 0; margin: 0; } .stories a.entry { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); transition: color 300ms ease; } .stories li:first-child a.entry { border-top: 1px solid var(--rule); } .stories a.entry:hover { color: var(--accent); } .stories a.entry:hover .date { color: var(--accent); opacity: 0.8; } .entry-title { font-size: calc(var(--title-size) * 1em); font-weight: 400; line-height: 1.3; letter-spacing: -0.005em; } .date { font-size: 13px; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.04em; white-space: nowrap; transition: color 300ms ease; } /* ================================================================ COLOPHON (homepage footer) ================================================================ */ .colophon { margin-top: clamp(80px, 14vh, 160px); text-align: center; font-size: 14px; color: var(--ink-faint); font-style: italic; line-height: 1.7; } .colophon p { margin: 0 0 6px; } /* ================================================================ STORY PAGE ================================================================ */ .back { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: clamp(60px, 12vh, 140px); display: inline-block; transition: color 300ms ease; } .back:hover { color: var(--accent); } article header { margin-bottom: 60px; } article .chap { font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 20px; } article h1 { font-size: clamp(30px, 4.4vw, 42px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 18px; } article .meta { font-size: 14px; color: var(--ink-soft); font-style: italic; margin: 0; } /* Body copy */ .post-body p { font-size: 20px; line-height: 1.7; margin: 0 0 1.4em; color: var(--ink); text-wrap: pretty; hanging-punctuation: first last; } /* Drop cap — first letter of first paragraph */ .post-body > p:first-of-type::first-letter { font-size: 3.2em; float: left; line-height: 0.9; padding: 0.05em 0.12em 0 0; color: var(--ink); font-style: normal; } /* Section break */ .post-body .break, .post-body p.break { text-align: center; color: var(--ink-faint); letter-spacing: 0.5em; margin: 1.6em 0; font-size: 18px; } /* Blockquote */ .post-body blockquote { margin: 1.6em 0; padding: 0 0 0 1em; border-left: 1px solid var(--rule); font-style: italic; color: var(--ink-soft); } /* Hugo syntax highlighting */ .post-body pre { background: var(--rule); padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.8em; line-height: 1.5; } .post-body code { font-size: 0.85em; } /* Article footer */ article footer { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--rule); text-align: center; font-size: 14px; color: var(--ink-faint); font-style: italic; line-height: 1.7; } article footer a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color 300ms ease, border-color 300ms ease; } article footer a:hover { color: var(--accent); border-color: var(--accent); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 520px) { body { font-size: 18px; } .mast h1 { font-size: 34px; } .stories a.entry { grid-template-columns: 1fr; } .stories .date { padding-top: 4px; } .post-body p { font-size: 18px; } }