/* ============================================================ Variables ============================================================ */ :root { --bg: #ffffff; --bg-subtle: #f6f2fb; --border: #e7defa; --text: #1c0836; --text-muted: #6b5c82; --accent: #7c3aed; --accent-dim: #6425c9; --code-bg: #f3ecf9; --font-sans: system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --max-width: 720px; --gap: 1.5rem; } /* purple-dark palette, toggled via .dark-mode on (see theme-toggle.js) */ html.dark-mode { --bg: #160328; --bg-subtle: #1f0a35; --border: #3c1f57; --text: #e7daf5; --text-muted: #b6a3cc; --accent: #c79bff; --accent-dim: #a97ee0; --code-bg: #0d0320; } /* ============================================================ Reset + Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--gh-font-body, var(--font-sans)); line-height: 1.7; min-height: 100vh; display: flex; flex-direction: column; transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-dim); text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* ============================================================ Header / Navigation ============================================================ */ .site-header { border-bottom: 1px solid var(--border); padding: 1rem 0; } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gap); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-title { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .site-title:hover { color: var(--accent); text-decoration: none; } .site-header-right { display: flex; align-items: center; gap: 1.5rem; } .site-nav { display: flex; } /* {{navigation}} renders a raw */ .site-nav .nav { display: flex; gap: 1.5rem; list-style: none; } .site-nav a { font-size: 0.875rem; color: var(--text-muted); text-transform: lowercase; } .site-nav a:hover { color: var(--accent); text-decoration: none; } .site-nav a.nav-current { color: var(--text); } /* light/dark toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--accent); background: var(--bg-subtle); } .theme-toggle .icon { display: block; } .theme-toggle .icon-sun { display: none; } html.dark-mode .theme-toggle .icon-sun { display: block; } html.dark-mode .theme-toggle .icon-moon { display: none; } /* ============================================================ Main layout ============================================================ */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto; padding: 3rem var(--gap); width: 100%; } /* ============================================================ Post feed (index) ============================================================ */ .post-feed { display: flex; flex-direction: column; gap: 2.5rem; } .post-card { border-bottom: 1px solid var(--border); padding-bottom: 2.5rem; } .post-card:last-child { border-bottom: none; } .post-card-tags { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 3px; padding: 2px 6px; text-transform: lowercase; } .post-card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; font-family: var(--gh-font-heading, var(--font-sans)); } .post-card-title a { color: var(--text); } .post-card-title a:hover { color: var(--accent); text-decoration: none; } .post-card-excerpt { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.75rem; } .post-card-meta { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); } /* ============================================================ Individual post / page (hero-style header) ============================================================ */ .post-header, .page-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .post-tags { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; } /* eyebrow treatment for the hero tag row (distinct from feed-card pills) */ .post-header .tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: none; border: none; padding: 0; } .post-title, .page-title { font-family: var(--gh-font-heading, var(--font-sans)); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.75rem; } .post-dek { font-size: 1.15rem; line-height: 1.6; color: var(--text-muted); max-width: 640px; margin-bottom: 1.5rem; } .post-meta { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); } /* ============================================================ Post content typography ============================================================ */ .gh-content h1, .gh-content h2, .gh-content h3, .gh-content h4, .gh-content h5, .gh-content h6 { margin-top: 2.5rem; margin-bottom: 0.75rem; line-height: 1.3; font-weight: 600; font-family: var(--gh-font-heading, var(--font-sans)); } .gh-content h2 { font-size: 1.5rem; } .gh-content h3 { font-size: 1.2rem; } .gh-content p { margin-bottom: 1.25rem; } .gh-content ul, .gh-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .gh-content li { margin-bottom: 0.25rem; } .gh-content blockquote { border-left: 3px solid var(--accent); margin: 1.5rem 0; padding: 0.75rem 1.25rem; color: var(--text-muted); font-style: italic; } .gh-content code { font-family: var(--font-mono); font-size: 0.85em; background: var(--code-bg); border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px; } .gh-content pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 1.25rem; overflow-x: auto; margin-bottom: 1.5rem; } .gh-content pre code { background: none; border: none; padding: 0; font-size: 0.85rem; line-height: 1.6; } .gh-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } .gh-content img { border-radius: 4px; margin: 1.5rem 0; } .gh-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.875rem; } .gh-content th, .gh-content td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } .gh-content th { background: var(--bg-subtle); font-weight: 600; } /* ============================================================ Pagination ============================================================ */ .pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 3rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); } .pagination a { color: var(--accent); } /* ============================================================ Error page ============================================================ */ .error-page { text-align: center; padding: 4rem 0; } .error-code { font-size: 6rem; font-family: var(--font-mono); color: var(--accent); } .error-description { color: var(--text-muted); margin: 1rem 0 2rem; } /* ============================================================ Footer ============================================================ */ .site-footer { border-top: 1px solid var(--border); padding: 1.5rem 0; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gap); } .footer-copy { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); } .footer-copy a { color: var(--text-muted); } .footer-copy a:hover { color: var(--accent); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 600px) { .post-title, .page-title { font-size: 1.75rem; } .site-nav { gap: 1rem; } } /* ============================================================ Koenig editor wide / full-bleed image cards ============================================================ */ .gh-content .kg-width-wide { width: 100vw; max-width: 1000px; position: relative; left: 50%; transform: translateX(-50%); } .gh-content .kg-width-full { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } .gh-content .kg-width-full img, .gh-content .kg-width-full video { width: 100%; }