/* ============================================================================ * CosmicBlog site.css * ---------------------------------------------------------------------------- * Single source of truth for palette + typography + spacing + card system. * Tunable via CSS custom properties at the top. Dark mode is a [data-theme] * + prefers-color-scheme override block; toggle lives in the site header. * * Layout rules: * - Single column, ~680px reading width. * - Mobile-first; same vertical card order at every viewport (no side-by- * side cover-image variant — see Plan 6 cross-cutting decision #3). * - Bootstrap 5 utilities still load earlier; this file overrides where it * touches body, typography, links, and the .card-item system. * ========================================================================== */ /* === Inter font (self-hosted, SIL OFL) ================================== */ @font-face { font-family: "Inter"; src: url("/lib/inter/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/lib/inter/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/lib/inter/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* === Tokens ============================================================== */ :root { /* Palette (Molly-direction muted neutrals + a single accent) */ --color-bg: #ffffff; --color-bg-alt: #fafafa; --color-text: #1a1a1a; --color-text-muted: #6b6b6b; --color-border: #e6e6e6; --color-accent: #1a5490; --color-accent-hover: #0d3a6b; --color-tag-bg: #f4f4f5; /* Type */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Inter", var(--font-body); /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; /* Radii */ --radius-sm: 4px; --radius-md: 8px; /* Reading column */ --content-width: 680px; } /* Dark mode: opt-in via [data-theme="dark"] on , OR honor system pref when no explicit theme is set. */ [data-theme="dark"] { --color-bg: #0f0f10; --color-bg-alt: #17171a; --color-text: #ededed; --color-text-muted: #a3a3a3; --color-border: #2a2a2a; --color-accent: #6ea8e0; --color-accent-hover: #99c2ec; --color-tag-bg: #1f1f22; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0f0f10; --color-bg-alt: #17171a; --color-text: #ededed; --color-text-muted: #a3a3a3; --color-border: #2a2a2a; --color-accent: #6ea8e0; --color-accent-hover: #99c2ec; --color-tag-bg: #1f1f22; } } /* === Base ================================================================ */ html { background: var(--color-bg); color: var(--color-text); } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; color: var(--color-text); } main, .container > main { max-width: var(--content-width); margin: 0 auto; padding: var(--space-xl) var(--space-md); } a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-accent-hover); } p { margin: 0 0 var(--space-md); } img { max-width: 100%; height: auto; } code, pre { background: var(--color-bg-alt); border-radius: var(--radius-sm); } code { padding: 1px 6px; font-size: 0.9em; } pre { padding: var(--space-md); overflow-x: auto; } pre code { background: transparent; padding: 0; } blockquote { border-left: 3px solid var(--color-border); padding-left: var(--space-md); color: var(--color-text-muted); margin: var(--space-md) 0; } /* === Site header / footer ============================================== */ .site-header { max-width: var(--content-width); margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-md); } .site-header__brand { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-md); } .site-header__photo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: inline-block; text-decoration: none; } .site-header__photo--placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-tag-bg); color: var(--color-text-muted); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; } .site-header__photo--placeholder:hover { color: var(--color-text); background: var(--color-border); } .site-header__brand-text { flex: 1 1 auto; min-width: 0; } .site-header__name { margin: 0; font-size: 1.5rem; line-height: 1.2; } .site-header__name a { text-decoration: none; color: var(--color-text); } .site-header__name a:hover { color: var(--color-accent); } .site-header__tagline { margin: var(--space-xs) 0 0; color: var(--color-text-muted); font-size: 0.95rem; } .site-header__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-sm) 0; font-size: 0.95rem; } .site-header__nav a { text-decoration: none; color: var(--color-text-muted); } .site-header__nav a:hover { color: var(--color-accent); } .site-header__nav-spacer { flex: 1 1 auto; } .site-header__logout { display: inline; margin: 0; } .site-header__logout button { background: transparent; border: 0; padding: 0; color: var(--color-text-muted); cursor: pointer; font: inherit; text-decoration: none; } .site-header__logout button:hover { color: var(--color-accent); } .site-footer { max-width: var(--content-width); margin: var(--space-xl) auto 0; padding: var(--space-md); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.9rem; } .site-footer a { color: var(--color-text-muted); text-decoration: none; } .site-footer a:hover { color: var(--color-accent); } /* === Card system ========================================================= */ .card-item { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); } .card-item:last-child { border-bottom: none; } .card-item__meta { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-xs); } .card-item__title { font-size: 1.5rem; margin: 0 0 var(--space-sm); } .card-item__title a { text-decoration: none; color: var(--color-text); } .card-item__title a:hover { text-decoration: underline; color: var(--color-accent); } /* Cover image: full-card-width, capped height so screenshots don't dominate. `object-fit: cover` crops to the height limit. Same shape at every viewport (no desktop side-by-side variant; see Plan 6). */ .card-item__cover { display: block; margin: 0 0 var(--space-sm); } .card-item__cover img { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radius-md); display: block; } /* Excerpt: posts only. 3-line clamp. */ .card-item__excerpt { color: var(--color-text); margin: 0 0 var(--space-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Note body: full inline render, no clamp (the note IS the content). */ .card-item__note-body { color: var(--color-text); margin: 0 0 var(--space-sm); } .card-item__note-body p:last-child { margin-bottom: 0; } .card-item__link { font-size: 0.9rem; margin: var(--space-sm) 0; } .card-item__tags { margin: var(--space-sm) 0; } .tag-chip { display: inline-block; padding: 2px 8px; margin-right: var(--space-xs); background: var(--color-tag-bg); color: var(--color-text-muted); border-radius: var(--radius-sm); font-size: 0.8rem; text-decoration: none; } .tag-chip:hover { color: var(--color-accent); background: var(--color-tag-bg); text-decoration: none; } .card-item__cta { font-size: 0.95rem; margin: var(--space-sm) 0 0; } .card-item__cta a { text-decoration: none; } .card-item__cta a:hover { text-decoration: underline; } /* === Page content (About, etc.) ========================================= */ .page-content { /* Inherits the main column width via the surrounding
. */ } .about-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; float: right; margin: 0 0 var(--space-md) var(--space-lg); } .about-photo--placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-tag-bg); color: var(--color-text-muted); font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; } @media (max-width: 480px) { .about-photo { float: none; margin: 0 0 var(--space-md); width: 140px; height: 140px; font-size: 2.5rem; } } .about-disambiguation { font-size: 0.9rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-md); margin-top: var(--space-xl); } /* === Theme toggle button ================================================ */ .theme-toggle { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: 0.9rem; } .theme-toggle:hover { color: var(--color-text); border-color: var(--color-text-muted); }