/* Theme Name: Yaksha King Theme URI: https://louishinnant.me Author: Louis Hinnant Author URI: https://louishinnant.me Description: A quiet, editorial blog theme for louishinnant.me — Switzer type throughout (heavy headings over a clean body), a grid-card feed, a faint gradient wash, a Chinese-name watermark, and an automatic dark mode with a manual toggle. Converted from the hand-authored "Yaksha King" static design into a full WordPress CMS theme: write posts in the editor, manage the top navigation and the category filter bar from the admin, and set a featured image per post (with the signature gradient tile as a fallback). Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: yaksha-king Tags: blog, one-column, custom-menu, featured-images, translation-ready, editor-style, full-width-template, threaded-comments */ /* louishinnant.me — Yaksha King theme. Ported from the hand-authored static design, now set in Switzer (self-hosted): grid-card feed, left header, faint gradient wash, dark-mode toggle. */ /* ─── Fonts (Switzer, self-hosted — ITF Free Font License) ──────────── */ @font-face { font-family: 'Switzer'; src: url('fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* ─── Theme tokens (Yaksha King) + locked type choices ──────────────── */ :root { /* light */ --bg: #fbf3ea; --surface: #fffaf3; --text: #2a1814; --muted: #998071; --border: rgba(42,24,20,0.13); --accentText: #c2491f; /* dark */ --bg-d: #1a1110; --surface-d: #231514; --text-d: #f4e7d8; --muted-d: #a3897e; --border-d: rgba(244,231,216,0.13); --acc-d: #ffa256; /* gradients */ --gs: #fdcb16, #ff8a3d, #c5402f, #8a2127, #5a0a0d; --wm-grad-light: linear-gradient(96deg, #e0701f, #c5402f, #8a2127); --wm-grad-dark: linear-gradient(96deg, #fdcb16, #ff8a3d, #c5402f, #8a2127, #5a0a0d); /* fonts — Switzer for both body and headings (headings just heavier) */ --sans: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --cjk: 'Noto Serif SC', serif; --display: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif; /* watermark = Chinese name (overridable in the Customizer) */ --cn: '杨英杰'; --soft: color-mix(in oklab, var(--text) 62%, var(--bg)); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ─── Page shell ────────────────────────────────────────────────────── */ .hp { position: relative; overflow: hidden; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); padding: 74px 84px 60px; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* faint full-page gradient wash */ .hp::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .12; background: linear-gradient(160deg, var(--gs)); pointer-events: none; } .hp > *:not(.hp-watermark):not(.hp-toggle) { position: relative; z-index: 1; } /* big faded name watermark */ .hp-watermark { position: absolute; top: -40px; right: -10px; z-index: 0; writing-mode: vertical-rl; font-family: var(--cjk); font-weight: 600; font-size: 360px; line-height: .82; letter-spacing: -.04em; color: var(--text); opacity: .045; pointer-events: none; user-select: none; white-space: nowrap; } .hp-watermark::before { content: var(--cn); } /* dark-mode toggle button */ .hp-toggle { position: absolute; top: 28px; right: 32px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s; } .hp-toggle:hover { color: var(--text); border-color: var(--text); } /* ─── Masthead (name left, nav right) ───────────────────────────────── */ .hp-mast { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; } .hp-name { margin: 0; line-height: 1; white-space: nowrap; font-family: var(--display); font-weight: 900; font-size: 54px; letter-spacing: -.02em; color: var(--accentText); } .hp-name a { color: inherit; text-decoration: none; } .hp-nav { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; } /* normalize in case a menu falls back to a