/* ============================================================= Auto Theme — adapts to OS dark/light preference. Dark = terminal (phosphor green CRT aesthetic). Light = paper (warm typewriter-on-parchment aesthetic). Manual override via [data-theme="terminal"|"paper"] on . ============================================================= */ /* ------------------------------------------------------------- */ /* Variables — dark (terminal) defaults */ /* ------------------------------------------------------------- */ :root { --bg: #0d0d0d; --bg-panel: #0a150a; --border: #1a3a1a; --ink: #00ff41; --ink-mid: #00b32d; --ink-faint: rgba(0, 255, 65, 0.45); --ink-tint: rgba(0, 255, 65, 0.08); --accent: #00ff41; --accent-hover: #33ff77; --glow: 0 0 8px #00ff41, 0 0 18px rgba(0, 255, 65, 0.35); --glow-sm: 0 0 6px rgba(0, 255, 65, 0.45); --code-bg: #011501; --code-ink: #7dff9a; --nav-case: uppercase; --nav-gap: 0.12em; --img-filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(2.5) brightness(0.82) contrast(1.1); --img-hover: grayscale(0.15) sepia(0.3) hue-rotate(80deg) saturate(1.2) brightness(0.95) contrast(1.05); --font: 'Courier New', Courier, monospace; } /* ------------------------------------------------------------- */ /* Variables — light (paper) via OS preference */ /* ------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root { --bg: #fdfbf7; --bg-panel: #f5eedf; --border: #e8ddd0; --ink: #1c1008; --ink-mid: #4a3422; --ink-faint: #8a7464; --ink-tint: transparent; --accent: #8b2e1a; --accent-hover: #6a2012; --glow: none; --glow-sm: none; --code-bg: #f5eedf; --code-ink: inherit; --nav-case: lowercase; --nav-gap: 0.06em; --img-filter: sepia(0.35) contrast(1.05) brightness(0.93) saturate(0.85); --img-hover: sepia(0.15) contrast(1.0) brightness(1.0) saturate(1.0); } } /* ------------------------------------------------------------- */ /* Variables — manual override: terminal (dark) */ /* ------------------------------------------------------------- */ [data-theme="terminal"] { --bg: #0d0d0d; --bg-panel: #0a150a; --border: #1a3a1a; --ink: #00ff41; --ink-mid: #00b32d; --ink-faint: rgba(0, 255, 65, 0.45); --ink-tint: rgba(0, 255, 65, 0.08); --accent: #00ff41; --accent-hover: #33ff77; --glow: 0 0 8px #00ff41, 0 0 18px rgba(0, 255, 65, 0.35); --glow-sm: 0 0 6px rgba(0, 255, 65, 0.45); --code-bg: #011501; --code-ink: #7dff9a; --nav-case: uppercase; --nav-gap: 0.12em; --img-filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(2.5) brightness(0.82) contrast(1.1); --img-hover: grayscale(0.15) sepia(0.3) hue-rotate(80deg) saturate(1.2) brightness(0.95) contrast(1.05); } /* ------------------------------------------------------------- */ /* Variables — manual override: paper (light) */ /* ------------------------------------------------------------- */ [data-theme="paper"] { --bg: #fdfbf7; --bg-panel: #f5eedf; --border: #e8ddd0; --ink: #1c1008; --ink-mid: #4a3422; --ink-faint: #8a7464; --ink-tint: transparent; --accent: #8b2e1a; --accent-hover: #6a2012; --glow: none; --glow-sm: none; --code-bg: #f5eedf; --code-ink: inherit; --nav-case: lowercase; --nav-gap: 0.06em; --img-filter: sepia(0.35) contrast(1.05) brightness(0.93) saturate(0.85); --img-hover: sepia(0.15) contrast(1.0) brightness(1.0) saturate(1.0); } /* ------------------------------------------------------------- */ /* Reset */ /* ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ------------------------------------------------------------- */ /* Base */ /* ------------------------------------------------------------- */ html { background-color: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.75; color-scheme: dark light; } body { min-height: 100vh; background-color: var(--bg); transition: background-color 0.2s ease, color 0.2s ease; } /* ------------------------------------------------------------- */ /* CRT effects — terminal / dark only */ /* ------------------------------------------------------------- */ /* Scanlines */ body::before { content: ''; display: none; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.045) 2px, rgba(0, 0, 0, 0.045) 4px ); } /* Vignette */ body::after { content: ''; display: none; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%); } @media (prefers-color-scheme: dark) { html:not([data-theme="paper"]) body::before, html:not([data-theme="paper"]) body::after { display: block; } } [data-theme="terminal"] body::before, [data-theme="terminal"] body::after { display: block; } [data-theme="paper"] body::before, [data-theme="paper"] body::after { display: none; } /* ------------------------------------------------------------- */ /* Paper ruled lines — paper / light only */ /* ------------------------------------------------------------- */ @media (prefers-color-scheme: light) { html:not([data-theme="terminal"]) body { background-image: repeating-linear-gradient( 0deg, transparent, transparent 29px, rgba(180, 155, 110, 0.07) 29px, rgba(180, 155, 110, 0.07) 30px ); } } [data-theme="paper"] body { background-image: repeating-linear-gradient( 0deg, transparent, transparent 29px, rgba(180, 155, 110, 0.07) 29px, rgba(180, 155, 110, 0.07) 30px ); } [data-theme="terminal"] body { background-image: none; } /* ------------------------------------------------------------- */ /* Layout */ /* ------------------------------------------------------------- */ .site-wrapper { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; } main { padding-bottom: 4rem; } /* ------------------------------------------------------------- */ /* Header */ /* ------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--border); padding: 1.25rem 0; margin-bottom: 3rem; } /* Terminal header: subtle green glow on underline */ @media (prefers-color-scheme: dark) { html:not([data-theme="paper"]) .site-header { box-shadow: 0 1px 12px rgba(0, 255, 65, 0.1); } } [data-theme="terminal"] .site-header { box-shadow: 0 1px 12px rgba(0, 255, 65, 0.1); } [data-theme="paper"] .site-header { box-shadow: none; } .site-header .site-wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 2rem; } .header-brand { display: flex; flex-direction: column; gap: 0.1rem; } .header-controls { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .site-title a { font-size: 1.4rem; font-weight: bold; text-decoration: none; color: var(--ink); letter-spacing: 0.05em; text-shadow: var(--glow); text-transform: uppercase; transition: text-shadow 0.15s; } .site-title a:hover { color: var(--accent); } .site-tagline { color: var(--ink-mid); font-size: 0.82rem; opacity: 0.7; letter-spacing: 0.06em; } /* ------------------------------------------------------------- */ /* Theme toggle button */ /* ------------------------------------------------------------- */ .theme-toggle { background: none; border: 1px solid var(--border); color: var(--ink-mid); font-family: var(--font); font-size: 0.9rem; line-height: 1; padding: 0.25rem 0.55rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s; flex-shrink: 0; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow-sm); } /* ------------------------------------------------------------- */ /* Nav */ /* ------------------------------------------------------------- */ nav ul { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; } nav a { color: var(--ink-mid); text-decoration: none; font-size: 0.82rem; letter-spacing: var(--nav-gap); text-transform: var(--nav-case); transition: color 0.1s, text-shadow 0.1s; } nav a:hover { color: var(--accent); text-shadow: var(--glow-sm); } /* ------------------------------------------------------------- */ /* Post list (home) */ /* ------------------------------------------------------------- */ .post-list { list-style: none; } /* Base (paper/light): editorial — border dividers */ .post-list-item { position: relative; overflow: hidden; padding-bottom: 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px solid var(--border); background: none; transition: border-color 0.15s, box-shadow 0.15s; } .post-list-item:last-child { border-bottom: none; margin-bottom: 0; } /* Terminal/dark: boxed cards */ @media (prefers-color-scheme: dark) { html:not([data-theme="paper"]) .post-list-item { background: var(--bg-panel); border: 1px solid var(--border); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } html:not([data-theme="paper"]) .post-list-item:last-child { border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; } html:not([data-theme="paper"]) .post-list-item:hover { border-color: var(--ink-mid); box-shadow: 0 0 16px var(--ink-tint); } } [data-theme="terminal"] .post-list-item { background: var(--bg-panel); border: 1px solid var(--border); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } [data-theme="terminal"] .post-list-item:last-child { border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; } [data-theme="terminal"] .post-list-item:hover { border-color: var(--ink-mid); box-shadow: 0 0 16px var(--ink-tint); } [data-theme="paper"] .post-list-item { background: none; border: none; border-bottom: 1px solid var(--border); padding: 0 0 2.75rem; margin-bottom: 2.75rem; } [data-theme="paper"] .post-list-item:last-child { border-bottom: none; margin-bottom: 0; } /* Thumbnail — bleeds out of cards in terminal, constrained in paper */ .post-thumb { width: 100%; max-height: 200px; object-fit: cover; display: block; margin-bottom: 1rem; filter: var(--img-filter); transition: filter 0.3s ease; } .post-list-item:hover .post-thumb { filter: var(--img-hover); } /* Full-bleed in terminal card */ @media (prefers-color-scheme: dark) { html:not([data-theme="paper"]) .post-thumb { width: calc(100% + 3rem); margin: -1.25rem -1.5rem 1rem; } } [data-theme="terminal"] .post-thumb { width: calc(100% + 3rem); margin: -1.25rem -1.5rem 1rem; } [data-theme="paper"] .post-thumb { width: 100%; margin: 0 0 1.1rem; max-height: 220px; } .post-title { font-size: 1.05rem; margin-bottom: 0.35rem; letter-spacing: 0.02em; } .post-title a { color: var(--accent); text-decoration: none; text-shadow: var(--glow-sm); } /* Stretched link — whole card clickable */ .post-title a::after { content: ''; position: absolute; inset: 0; } .post-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .post-meta { font-size: 0.75rem; color: var(--ink-faint); margin-bottom: 0.55rem; letter-spacing: 0.06em; } .post-description { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.6; } .no-posts { color: var(--ink-mid); opacity: 0.6; padding: 2rem 0; } /* ------------------------------------------------------------- */ /* Pagination */ /* ------------------------------------------------------------- */ .pagination { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 2rem; } .pagination ul { list-style: none; display: flex; gap: 1.5rem; align-items: center; justify-content: center; } .pagination a { color: var(--accent); text-decoration: none; padding: 0.3rem 0.9rem; border: 1px solid var(--border); font-size: 0.88rem; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .pagination a:hover { border-color: var(--accent); background: var(--ink-tint); box-shadow: var(--glow-sm); } .pagination-info { color: var(--ink-faint); font-size: 0.8rem; } /* ------------------------------------------------------------- */ /* Single post / page — header */ /* ------------------------------------------------------------- */ .post-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .post-header h1 { font-size: 1.65rem; line-height: 1.3; margin-bottom: 0.6rem; text-shadow: var(--glow); } .post-header .post-meta { font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.06em; } /* ------------------------------------------------------------- */ /* Post body — prose */ /* ------------------------------------------------------------- */ .post-body { line-height: 1.8; } .post-body p { margin-bottom: 1.25rem; } .post-body h2, .post-body h3, .post-body h4, .post-body h5 { margin: 2rem 0 0.7rem; color: var(--ink); text-shadow: var(--glow-sm); letter-spacing: 0.02em; } .post-body h2 { font-size: 1.25rem; } .post-body h3 { font-size: 1.08rem; } .post-body h4 { font-size: 1rem; } /* Underline on h2 in paper mode only */ @media (prefers-color-scheme: light) { html:not([data-theme="terminal"]) .post-body h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; } } [data-theme="paper"] .post-body h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; } [data-theme="terminal"] .post-body h2 { border-bottom: none; padding-bottom: 0; } .post-body a { color: var(--accent); text-underline-offset: 3px; } .post-body a:hover { color: var(--accent-hover); text-shadow: var(--glow-sm); } .post-body ul, .post-body ol { margin: 0 0 1.25rem 1.75rem; } .post-body li { margin-bottom: 0.35rem; } .post-body blockquote { border-left: 3px solid var(--ink-mid); margin: 1.5rem 0; padding: 0.5rem 1.25rem; color: var(--ink-mid); font-style: italic; opacity: 0.85; } .post-body blockquote p { margin-bottom: 0; } .post-body code { font-family: var(--font); background: var(--code-bg); border: 1px solid var(--border); padding: 0.1em 0.45em; font-size: 0.88em; color: var(--code-ink); } .post-body pre { background: var(--code-bg); border: 1px solid var(--border); border-left: 3px solid var(--ink-mid); padding: 1.2rem 1.4rem; overflow-x: auto; margin-bottom: 1.5rem; line-height: 1.6; } .post-body pre code { background: none; border: none; padding: 0; font-size: 0.88rem; color: var(--code-ink); } /* Images in post body */ .post-body p:has(> img) { position: relative; line-height: 0; margin: 1.75rem 0; } .post-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; filter: var(--img-filter); transition: filter 0.3s ease; border: 1px solid var(--border); } .post-body img:hover { filter: var(--img-hover); } /* Terminal image: rounded corners + CRT inner glow overlay */ @media (prefers-color-scheme: dark) { html:not([data-theme="paper"]) .post-body p:has(> img) { border-radius: 12px; overflow: hidden; } html:not([data-theme="paper"]) .post-body p:has(> img)::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 255, 65, 0.06); pointer-events: none; } html:not([data-theme="paper"]) .post-body img { box-shadow: 0 0 16px rgba(0, 255, 65, 0.07); } } [data-theme="terminal"] .post-body p:has(> img) { border-radius: 12px; overflow: hidden; } [data-theme="terminal"] .post-body p:has(> img)::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 255, 65, 0.06); pointer-events: none; } [data-theme="terminal"] .post-body img { box-shadow: 0 0 16px rgba(0, 255, 65, 0.07); } [data-theme="paper"] .post-body p:has(> img) { border-radius: 0; overflow: visible; } [data-theme="paper"] .post-body p:has(> img)::after { display: none; } [data-theme="paper"] .post-body img { box-shadow: none; } .post-body hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } .post-body strong { font-weight: bold; color: var(--ink); } .post-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.88rem; } .post-body th, .post-body td { border: 1px solid var(--border); padding: 0.5rem 0.8rem; text-align: left; } .post-body th { background: var(--bg-panel); color: var(--accent); } /* ------------------------------------------------------------- */ /* Post nav (prev / next) */ /* ------------------------------------------------------------- */ .post-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--border); margin-top: 3rem; } .post-nav a { color: var(--accent); text-decoration: none; padding: 0.35rem 0.8rem; border: 1px solid var(--border); font-size: 0.88rem; transition: border-color 0.15s, box-shadow 0.15s; } .post-nav a:hover { border-color: var(--accent); box-shadow: var(--glow-sm); } .post-nav .next-post { margin-left: auto; } /* ------------------------------------------------------------- */ /* 404 */ /* ------------------------------------------------------------- */ .error-page { text-align: center; padding: 5rem 0; } .error-page h1 { font-size: 5rem; letter-spacing: 0.1em; margin-bottom: 1rem; text-shadow: var(--glow); color: var(--ink-faint); } .error-page p { color: var(--ink-mid); margin-bottom: 1rem; opacity: 0.8; } .error-page a { color: var(--accent); } /* ------------------------------------------------------------- */ /* Footer */ /* ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: 1.25rem 0; margin-top: 4rem; text-align: center; font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.07em; opacity: 0.6; } /* ------------------------------------------------------------- */ /* Responsive */ /* ------------------------------------------------------------- */ @media (max-width: 600px) { html { font-size: 15px; } .site-header { margin-bottom: 2rem; } .post-header h1 { font-size: 1.3rem; } .post-nav { flex-direction: column; align-items: flex-start; } .post-nav .next-post { margin-left: 0; } .header-controls { gap: 1rem; } }