/* ============================================================ GLOBAL STYLES — Gabriel Olufemi Kusoro Portfolio This file holds everything shared across all pages: - CSS custom properties & theme tokens - Reset & base element styles - Layout chrome: topbar, nav, theme toggle, footer - Responsive overrides for the shared chrome Each page keeps its own page-specific styles inline (work list, post list, article prose, etc.) to avoid shipping unused CSS to every page. ============================================================ */ /* ── Design Tokens ──────────────────────────────────────── */ /* Light mode is the default. Dark mode overrides via [data-theme="dark"] on . The theme toggle in theme.js swaps between them and persists to localStorage. */ :root { --bg: #ffffff; --text-primary: #111111; --text-secondary: #555555; --text-muted: #8d8d8d; --border: #e5e5e5; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --max-w: 660px; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --dur: 180ms; } [data-theme="dark"] { --bg: #111111; --text-primary: #f0f0f0; --text-secondary: #aaaaaa; --text-muted: #666666; --border: #2a2a2a; } /* ── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-gutter: stable; } body { background-color: var(--bg); color: var(--text-primary); font-family: var(--font); font-size: 15px; line-height: 1.65; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; transition: text-decoration-color var(--dur) var(--ease); } a:hover { text-decoration-color: var(--text-primary); } /* ============================================================ SHARED LAYOUT — topbar, nav, theme toggle, footer Every page uses this same chrome. The HTML is identical across all 4 pages; the styles live here so a change (nav hover color, footer layout, avatar size) only needs one edit. ============================================================ */ .shell { max-width: var(--max-w); margin: 0 auto; padding: 48px 24px 64px; } /* ── Top bar ── */ .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; transition: opacity 0.2s var(--ease); min-width: 0; } .brand:hover { opacity: 0.75; } .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; background: var(--border); flex-shrink: 0; } .brand__name { font-size: 14px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; } .nav { display: flex; align-items: center; gap: 20px; height: 52px; flex-shrink: 0; } .nav a { font-size: 14px; color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); } .nav a:hover { color: var(--text-primary); text-decoration-color: var(--text-primary); } .nav a[aria-current="page"] { color: var(--text-primary); text-decoration-color: var(--text-primary); } /* ── Theme toggle ── */ .theme-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: color 0.2s var(--ease); flex-shrink: 0; } .theme-btn:hover { color: var(--text-primary); } .theme-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } [data-theme="dark"] .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="light"] .icon-sun { display: none; } [data-theme="light"] .icon-moon { display: block; } /* ── Footer ── */ /* Default margin-top is 48px. Post pages (notes-on-agents, notes-on-rag) override this to 56px inline for more breathing room after long article content. */ .footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .footer__updated { font-size: 13px; color: var(--text-muted); } /* ── Responsive ── */ /* Shared chrome adjustments for small screens. Page-specific elements (intro, post-title, etc.) handle their own responsive overrides inline. */ @media (max-width: 480px) { .shell { padding: 32px 18px 48px; } .avatar { width: 44px; height: 44px; } .nav { height: 44px; gap: 16px; } .brand { gap: 10px; } .brand__name { font-size: 13px; } }