/* ============================================================= MESSAGES IN THE DARKNESS — shared stylesheet ------------------------------------------------------------- Every page links this file: The LOOK of a page is decided by the class on : theme-night (home, films index — the city at night) theme-horror (horror films) theme-warhammer (ready for when you build it) theme-gamedev (ready for when you build it) To add a new section later, pick a theme class, or copy one of the colour blocks below and change the seven values. ============================================================= */ /* ============================================================= 1. THEMES — only colours and the display font change here ============================================================= */ :root, body.theme-night { --ink: #07040e; /* page background */ --panel: #120b22; /* box / panel background */ --panel-2: #1b1030; /* slightly lifted panel */ --edge: #3a2a5c; /* all borders */ --neon: #ff3ea5; /* main accent (headings) */ --neon-2: #4fd6e8; /* links */ --glow: #ffd24a; /* dates, highlights */ --text: #cfc6e6; /* body text */ --muted: #8b80a8; /* small print */ --font-display: "Press Start 2P", "Courier New", monospace; } body.theme-horror { --ink: #080405; --panel: #150809; --panel-2: #1e0b0c; --edge: #4a1414; --neon: #d92a2a; --neon-2: #8fcf4a; --glow: #e8c547; --text: #d8c9c9; --muted: #8a7272; --font-display: "Creepster", "Times New Roman", serif; } body.theme-warhammer { --ink: #0d0a06; --panel: #1a140c; --panel-2: #241b10; --edge: #5a4422; --neon: #c9a227; --neon-2: #c46a3a; --glow: #e0cfa0; --text: #ddd0b4; --muted: #93866c; --font-display: "UnifrakturMaguntia", "Times New Roman", serif; } body.theme-gamedev { --ink: #04100a; --panel: #06180f; --panel-2: #0a2216; --edge: #1f5c3a; --neon: #39ff88; --neon-2: #4fd6e8; --glow: #d9ff5c; --text: #bfe8cf; --muted: #6f9b80; --font-display: "VT323", "Courier New", monospace; } /* ============================================================= 2. STRUCTURE — shared by every page, do not vary per section ============================================================= */ :root { --border-w: 3px; /* every border on the site */ --site-width: 900px; --font-body: Verdana, Geneva, Arial, sans-serif; --font-mono: "VT323", "Courier New", Courier, monospace; } * { box-sizing: border-box; } body { margin: 0; padding: 18px; color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; background-color: var(--ink); background-image: radial-gradient(rgba(255,255,255,.30), rgba(255,255,255,.05) 1px, transparent 2px), radial-gradient(rgba(255,255,255,.20), rgba(255,255,255,.03) 1px, transparent 2px); background-size: 430px 430px, 270px 270px; background-position: 0 0, 90px 140px; background-attachment: fixed; } .wrapper { max-width: var(--site-width); margin: 0 auto; background: var(--panel); border: var(--border-w) solid var(--edge); box-shadow: 0 0 24px rgba(0,0,0,.9); } /* ---- 2a. Banner ------------------------------------------- The cityscape gif is tiled sideways and scaled to the banner height. Swap the file name to change the banner per page. ------------------------------------------------------------ */ .banner { position: relative; height: 190px; border-bottom: var(--border-w) solid var(--edge); background-color: #05030a; background-image: url("/Cityscape.gif"); background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%; image-rendering: pixelated; display: flex; align-items: flex-start; justify-content: center; } /* darkens the sky so the title stays readable */ .banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(5,3,10,.92) 0%, rgba(5,3,10,.55) 45%, rgba(5,3,10,.15) 70%, rgba(5,3,10,.55) 100%); } .banner-inner { position: relative; text-align: center; padding: 22px 16px 0 16px; } .site-title { font-family: var(--font-display); font-size: clamp(0.85rem, 3vw, 1.5rem); line-height: 1.5; letter-spacing: 1px; margin: 0; color: #fff; text-shadow: 0 0 6px var(--neon), 0 0 18px var(--neon), 0 2px 0 rgba(0,0,0,.9); } .site-tagline { font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: 2px; margin: 8px 0 0 0; color: var(--neon-2); text-shadow: 0 0 8px var(--neon-2); } /* ---- 2b. Ticker ------------------------------------------- */ .ticker { border-bottom: var(--border-w) solid var(--edge); background: #000; padding: 4px 0; } .ticker marquee { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 1px; color: var(--glow); } /* ---- 2c. Main navigation ---------------------------------- */ .mainnav { border-bottom: var(--border-w) solid var(--edge); background: var(--panel-2); padding: 0 10px; } .mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .mainnav a { display: block; padding: 11px 16px; font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: 2px; color: var(--neon-2); text-decoration: none; border-bottom: var(--border-w) solid transparent; } .mainnav a:hover, .mainnav a:focus-visible { color: #fff; background: rgba(255,255,255,.05); border-bottom-color: var(--neon); text-shadow: 0 0 8px var(--neon); } .mainnav a[aria-current="page"] { color: var(--glow); border-bottom-color: var(--glow); } /* ---- 2d. Body columns ------------------------------------- */ .content-area { display: flex; align-items: stretch; } .sidebar { width: 215px; flex-shrink: 0; padding: 18px 16px; background: var(--panel-2); border-right: var(--border-w) solid var(--edge); } .main-col { flex-grow: 1; min-width: 0; padding: 22px 26px 30px 26px; } /* ---- 2e. Typography --------------------------------------- */ h2, h3 { font-family: var(--font-display); font-weight: normal; line-height: 1.45; color: var(--neon); text-shadow: 0 0 10px rgba(255,255,255,.12); } h2 { font-size: 1.05rem; margin: 0 0 12px 0; } h3 { font-size: .85rem; margin: 0 0 10px 0; } .main-col p { max-width: 66ch; } a { color: var(--neon-2); } a:hover { color: #fff; } :focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; } hr { border: 0; height: var(--border-w); background: var(--edge); margin: 26px 0; } .section-head { display: flex; align-items: baseline; gap: 12px; border-bottom: var(--border-w) solid var(--edge); padding-bottom: 8px; margin: 34px 0 14px 0; } .section-head h2 { margin: 0; } .section-head .note { font-size: .8rem; color: var(--muted); margin: 0; } /* ---- 2f. Blog posts --------------------------------------- */ .post { border: var(--border-w) solid var(--edge); background: var(--panel-2); padding: 16px 18px; margin-bottom: 22px; } .post-date { display: block; font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 1px; color: var(--glow); margin-bottom: 6px; } .post h2 { margin-bottom: 10px; } .post p:last-child { margin-bottom: 0; } /* ---- 2g. Sidebar bits ------------------------------------- */ .sidebar h3 { font-size: .72rem; color: var(--glow); border-bottom: 1px dashed var(--edge); padding-bottom: 8px; } .sidebar ul { list-style: none; margin: 0 0 26px 0; padding: 0; } .sidebar li { margin-bottom: 7px; } .sidebar a { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 1px; text-decoration: none; } .sidebar a::before { content: "> "; color: var(--neon); } .sidebar a:hover { text-shadow: 0 0 8px var(--neon-2); } .badges { text-align: center; margin-top: 24px; } .badge { display: inline-block; width: 120px; height: 31px; line-height: 29px; font-family: var(--font-mono); font-size: .95rem; color: var(--text); text-decoration: none; background: #000; border: 1px solid var(--edge); box-shadow: 2px 2px 0 var(--neon); margin-bottom: 9px; } .badge:hover { color: #fff; border-color: var(--neon-2); } .blink { animation: blink 1.1s steps(2, start) infinite; color: var(--neon); font-weight: bold; } @keyframes blink { to { visibility: hidden; } } /* ---- 2h. Card grid (used for film lists, project lists) ---- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 18px 0 8px 0; } .card { display: block; padding: 16px; background: var(--panel-2); border: var(--border-w) solid var(--edge); text-decoration: none; color: var(--text); } .card:hover { border-color: var(--neon); box-shadow: 0 0 16px rgba(255,255,255,.10); } .card strong { display: block; font-family: var(--font-display); font-size: .8rem; line-height: 1.5; color: var(--neon-2); margin-bottom: 9px; } .card span { font-size: .82rem; color: var(--muted); } .card.soon { opacity: .55; } .card.soon:hover { border-color: var(--edge); box-shadow: none; } /* ---- 2i. Footer ------------------------------------------- */ footer { border-top: var(--border-w) solid var(--edge); background: var(--panel-2); padding: 14px 18px; text-align: center; font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 1px; color: var(--muted); } footer a { color: var(--neon-2); } /* ============================================================= 3. SMALL SCREENS ============================================================= */ @media (max-width: 640px) { body { padding: 8px; } .banner { height: 130px; } .content-area { flex-direction: column; } .sidebar { width: auto; border-right: none; border-bottom: var(--border-w) solid var(--edge); } .main-col { padding: 18px 16px 26px 16px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }