/* ============================================ THEME DEFINITIONS Each [data-theme] block defines a set of color variables. Switching themes only requires changing the data-theme attribute on the element — everything else updates automatically. ============================================ */ [data-theme="amber"] { --bg: #170800; --bg-alt: #1f0e00; --fg: #ff9a10; --fg-dim: rgba(255, 155, 0, 0.5); --accent: #ffb830; --border: rgba(255, 155, 0, 0.2); --glow: rgba(255, 155, 0, 0.45); --glow-dim: rgba(255, 155, 0, 0.2); --font: "VT323", "Departure Mono", "JetBrains Mono", monospace; --font-size-base: 16px; --line-height: 1.6; } [data-theme="green"] { --bg: #000; --bg-alt: #0a0f0a; --fg: rgba(160, 224, 68, 0.9); --fg-dim: rgba(160, 224, 68, 0.45); --accent: #a0e044; --border: rgba(160, 224, 68, 0.2); --glow: rgba(0, 155, 65, 0.55); --glow-dim: rgba(0, 155, 65, 0.25); --font: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --font-size-base: 14px; --line-height: 1.7; } /* ============================================ RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================ BASE ============================================ */ html { font-size: var(--font-size-base); scroll-behavior: smooth; /* The glow on everything — this is the single line that makes it feel like a real phosphor terminal screen */ text-shadow: 0 0 8px var(--glow); } body { background-color: var(--bg); color: var(--fg); font-family: var(--font); line-height: var(--line-height); padding: 1.5rem; /* Smooth transition when switching themes */ transition: background-color 0.2s ease, color 0.2s ease; min-height: 100vh; } /* ============================================ LAYOUT ============================================ */ #container { max-width: 680px; margin: 0 auto; padding: 3rem 0; display: flex; flex-direction: column; gap: 3rem; } /* ============================================ HEADER ============================================ */ header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; } header a { color: var(--accent); font-weight: bold; text-decoration: none; letter-spacing: 0.05em; text-shadow: 0 0 12px var(--glow); } nav { display: flex; gap: 1.5rem; } nav a { color: var(--fg-dim); text-decoration: none; transition: color 0.15s ease, text-shadow 0.15s ease; } nav a:hover { color: var(--fg); text-shadow: 0 0 10px var(--glow); } /* ============================================ THEME SWITCHER BUTTON A small toggle that will live in your header ============================================ */ #theme-toggle { background: none; border: 1px solid var(--border); color: var(--fg-dim); cursor: pointer; font-family: var(--font); font-size: 0.8rem; padding: 0.2rem 0.6rem; transition: all 0.15s ease; text-shadow: inherit; } #theme-toggle:hover { border-color: var(--fg); color: var(--fg); } /* ============================================ FOOTER ============================================ */ footer { border-top: 1px solid var(--border); padding-top: 1.5rem; color: var(--fg-dim); font-size: 0.85rem; } /* ============================================ TYPOGRAPHY ============================================ */ h1 { color: var(--accent); font-size: 1.4rem; margin-bottom: 0.75rem; letter-spacing: 0.03em; text-shadow: 0 0 14px var(--glow); } h2, h3, h4 { color: var(--accent); margin: 1.5rem 0 0.75rem; text-shadow: 0 0 12px var(--glow); } p { margin-bottom: 1.5rem; } a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease; } a:hover { color: var(--accent); } /* Selected text matches theme */ ::selection { background-color: var(--fg); color: var(--bg); text-shadow: none; } /* ============================================ TERMINAL PROMPT LINES ============================================ */ .prompt { color: var(--fg-dim); font-size: 0.85rem; margin-bottom: 0.75rem; user-select: none; text-shadow: 0 0 6px var(--glow-dim); } /* Blinking cursor appended to prompt lines */ .prompt::after { content: "▋"; color: var(--fg); animation: blink 1.2s step-end infinite; margin-left: 2px; text-shadow: 0 0 8px var(--glow); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================ POST LISTS (homepage + blog index) ============================================ */ ul.post-list, .recent-posts ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } ul.post-list li, .recent-posts li { display: flex; gap: 1.5rem; align-items: baseline; } .date { color: var(--fg-dim); font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; text-shadow: 0 0 5px var(--glow-dim); } /* ============================================ ARTICLE (individual post page) ============================================ */ .post-header { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .post-content { display: flex; flex-direction: column; gap: 0.75rem; } .post-content p { margin-bottom: 0; } .post-footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } /* ============================================ CODE BLOCKS ============================================ */ pre { background: var(--bg-alt); border: 1px solid var(--border); border-left: 2px solid var(--accent); padding: 1.5rem; overflow-x: auto; font-size: 0.9rem; margin: 1.5rem 0; /* Code blocks don't glow — they should feel distinct from surrounding text */ text-shadow: none; box-shadow: 0 0 20px rgba(0,0,0,0.5); } code { font-family: var(--font); font-size: 0.9em; background: var(--bg-alt); padding: 0.1em 0.4em; text-shadow: none; color: var(--accent); } pre code { background: none; padding: 0; color: var(--fg); } /* ============================================ SCANLINE EFFECT A subtle horizontal line overlay that reinforces the CRT monitor aesthetic. Pure CSS, no images needed. ============================================ */ body::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px ); pointer-events: none; z-index: 9999; } /* ============================================ SCROLLBAR ============================================ */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); } ::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }