/* * Theme engine. * * Every theme is a block of CSS custom properties keyed by * :root[data-theme=""]; the server stamps the id on from the * viewer's "theme" cookie. Component classes below only ever reference the * variables, so adding a theme = adding one :root block here and one entry * to templates.Themes. */ /* ---- tron (default): Tron: Legacy. Near-black grid, cyan glow, CLU-orange accents. */ :root, :root[data-theme="tron"] { --bg: #04090f; /* the old wordpress site's seamless grid-canyon texture */ --bg-image: url("/static/zacpod-background2.png"); --bg-size: auto; /* old site banner, left-anchored, fading into the bar colour before the controls */ --topbar-image: linear-gradient(to right, rgba(6, 18, 29, 0.1) 0%, rgba(6, 18, 29, 0.92) 55%, #06121d 75%), url("/static/zacpod-header3.png"); --topbar-size: auto 100%; --panel: #081724; --panel-2: #0c2233; --text: #cfeef7; --muted: #6f93a3; --accent: #6fc3df; --accent-bright: #aef3ff; --accent-2: #ff9f1c; --border: #14384d; --glow: rgba(111, 195, 223, 0.45); --glow-2: rgba(255, 159, 28, 0.4); --topbar-bg: #06121d; --font-display: "Orbitron", ui-sans-serif, system-ui, sans-serif; --display-case: uppercase; --display-spacing: 0.08em; } /* ---- clu: the orange side of the Grid. */ :root[data-theme="clu"] { --bg: #0d0704; --bg-image: linear-gradient(rgba(255, 159, 28, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 159, 28, 0.06) 1px, transparent 1px); --bg-size: 48px 48px; --topbar-image: none; --topbar-size: auto; --panel: #1c1008; --panel-2: #2a180b; --text: #f7e7cf; --muted: #a3906f; --accent: #ffab2e; --accent-bright: #ffd9a1; --accent-2: #6fc3df; --border: #4d3514; --glow: rgba(255, 159, 28, 0.45); --glow-2: rgba(111, 195, 223, 0.4); --topbar-bg: #170d05; --font-display: "Orbitron", ui-sans-serif, system-ui, sans-serif; --display-case: uppercase; --display-spacing: 0.08em; } /* ---- catppuccin: Catppuccin Mocha (https://catppuccin.com/palette). Flat and soft: base/mantle/crust surfaces, mauve+lavender accents, peach for admin. No grid, no glow. */ :root[data-theme="catppuccin"] { --bg: #1e1e2e; --bg-image: none; --bg-size: auto; --topbar-image: none; --topbar-size: auto; --panel: #181825; --panel-2: #313244; --text: #cdd6f4; --muted: #a6adc8; --accent: #cba6f7; --accent-bright: #b4befe; --accent-2: #fab387; --border: #45475a; --glow: transparent; --glow-2: transparent; --topbar-bg: #11111b; --font-display: ui-sans-serif, system-ui, sans-serif; --display-case: none; --display-spacing: normal; } /* ---- noctalia: deep navy + periwinkle, gold-flecked, flat (from the Noctalia shell). */ :root[data-theme="noctalia"] { --bg: #0e1228; --bg-image: none; --bg-size: auto; --topbar-image: none; --topbar-size: auto; --panel: #161b38; --panel-2: #1e2448; --text: #ccd2f0; --muted: #7a80a8; --accent: #8b93f8; --accent-bright: #b8bdff; --accent-2: #ee6d8a; --border: #262c55; --glow: transparent; --glow-2: transparent; --topbar-bg: #0a0e20; --font-display: ui-sans-serif, system-ui, sans-serif; --display-case: none; --display-spacing: normal; } /* ---- classic: the original light sky look. No grid, no glow. */ :root[data-theme="classic"] { --bg: #ffffff; --bg-image: none; --bg-size: auto; --topbar-image: none; --topbar-size: auto; --panel: #f3f4f6; --panel-2: #e5e7eb; --text: #1f2937; --muted: #6b7280; --accent: #0369a1; --accent-bright: #0284c7; --accent-2: #a855f7; --border: #d1d5db; --glow: transparent; --glow-2: transparent; --topbar-bg: #0ea5e9; --font-display: ui-sans-serif, system-ui, sans-serif; --display-case: none; --display-spacing: normal; } /* ---- base ---- */ body { background-color: var(--bg); background-image: var(--bg-image); background-size: var(--bg-size); background-attachment: fixed; color: var(--text); min-height: 100vh; } /* ---- top bar ---- */ .topbar { background-color: var(--topbar-bg); background-image: var(--topbar-image); background-repeat: no-repeat; background-position: left center; background-size: var(--topbar-size); color: var(--text); border-bottom: 1px solid var(--accent); box-shadow: 0 0 18px var(--glow); } :root[data-theme="classic"] .topbar { color: #ffffff; border-bottom: none; } .site-title { font-family: var(--font-display); text-transform: var(--display-case); letter-spacing: var(--display-spacing); } .site-title a { color: var(--accent-bright); text-shadow: 0 0 12px var(--glow); } :root[data-theme="classic"] .site-title a { color: #ffffff; } /* ---- buttons / inputs / picker ---- */ .btn { background-color: var(--panel-2); color: var(--accent-bright); border: 1px solid var(--accent); border-radius: 0.25rem; box-shadow: 0 0 6px var(--glow); } .btn:hover { box-shadow: 0 0 12px var(--glow); } :root[data-theme="classic"] .btn { background-color: #0369a1; color: #ffffff; border-color: #0369a1; } /* admin-flavoured button: the "other" accent (orange on tron) */ .btn-admin { background-color: var(--panel-2); color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 0.25rem; box-shadow: 0 0 6px var(--glow-2); } .btn-admin:hover { box-shadow: 0 0 12px var(--glow-2); } :root[data-theme="classic"] .btn-admin { background-color: #7e22ce; color: #ffffff; border-color: #7e22ce; } .input, .theme-picker { background-color: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 0.25rem; } .input:focus, .theme-picker:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 6px var(--glow); } .theme-picker { font-size: 0.875rem; padding: 0.125rem 0.25rem; } .error { color: var(--accent-2); } /* ---- category tabs ---- */ .tabs { background-color: var(--panel); border-bottom: 1px solid var(--border); } .tab { color: var(--muted); } .tab:hover { color: var(--accent-bright); background-color: var(--panel-2); } .tab-active { color: var(--accent-bright); background-color: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent), 0 0 10px var(--glow); text-shadow: 0 0 8px var(--glow); } /* ---- dropdown menus ---- */ .menu { background-color: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 0 14px var(--glow); } .menu-item:hover { background-color: var(--panel-2); color: var(--accent-bright); } /* ---- posts ---- */ /* Posts are solid panels in every theme, so the body background image/pattern only shows at the page edges and in the gaps between posts. */ .post { background-color: var(--panel); border: 1px solid var(--border); border-radius: 0.375rem; box-shadow: 0 0 12px var(--glow); } .posts { display: flex; flex-direction: column; gap: 1rem; } .post-link { color: var(--accent); } .post-link:hover { color: var(--accent-bright); text-shadow: 0 0 8px var(--glow); } .post-title { font-family: var(--font-display); text-transform: var(--display-case); letter-spacing: var(--display-spacing); color: var(--accent-bright); text-shadow: 0 0 10px var(--glow); } .muted { color: var(--muted); } .link-admin { color: var(--accent-2); } /* Markdown body (replaces the never-installed Tailwind `prose` plugin). */ .postbody h1, .postbody h2, .postbody h3, .postbody h4 { font-family: var(--font-display); text-transform: var(--display-case); letter-spacing: var(--display-spacing); color: var(--accent-bright); font-weight: 700; margin: 1rem 0 0.5rem; } .postbody h1 { font-size: 1.5rem; } .postbody h2 { font-size: 1.25rem; } .postbody h3 { font-size: 1.125rem; } .postbody p { margin: 0.5rem 0; } .postbody a { color: var(--accent); text-decoration: underline; } .postbody a:hover { color: var(--accent-bright); } .postbody code { background-color: var(--panel); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0 0.25rem; font-size: 0.875em; } .postbody pre { background-color: var(--panel); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.75rem; overflow-x: auto; margin: 0.5rem 0; } .postbody pre code { border: none; padding: 0; } .postbody blockquote { border-left: 3px solid var(--accent); padding-left: 0.75rem; color: var(--muted); margin: 0.5rem 0; } .postbody ul, .postbody ol { list-style: revert; margin: 0.5rem 0; padding-left: 1.5rem; } .postbody img { border: 1px solid var(--border); border-radius: 0.25rem; box-shadow: 0 0 12px var(--glow); } /* ---- sidebar ---- */ .side-heading { color: var(--muted); font-family: var(--font-display); text-transform: var(--display-case); letter-spacing: var(--display-spacing); } .side-link { color: var(--accent); } .side-link:hover { color: var(--accent-bright); text-shadow: 0 0 8px var(--glow); } /* ---- sidebar drawer (narrow screens) ---- */ /* Below the md breakpoint the sidebar is hidden and becomes a fixed drawer toggled by the header hamburger ("open" class). md+ keeps the normal flow. */ @media (max-width: 767px) { #sidebar { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 14rem; background-color: var(--panel); border-left: 1px solid var(--border); box-shadow: 0 0 18px var(--glow); overflow-y: auto; z-index: 20; } #sidebar.open { display: block; } } /* When #sitecontrols has been relocated into the drawer (sitecontrols.js), restack the horizontal topbar cluster into a column that fits 14rem. */ #sidebar #sitecontrols { flex-direction: column; align-items: stretch; gap: 0.5rem; margin-bottom: 1rem; } #sidebar #sitecontrols form, #sidebar #authbar > div { flex-direction: column; align-items: stretch; } #sidebar #sitecontrols .theme-picker, #sidebar #sitecontrols input { width: 100%; } /* the admin dropdown flows inline inside the drawer instead of floating */ #sidebar #sitecontrols .menu { position: static; margin-top: 0.25rem; } /* ---- footer ---- */ .footer { background-color: var(--panel); border-top: 1px solid var(--border); color: var(--muted); }