/* ============================================================ STATIC "book-of-books" terminal menu Distilled from book.rymcg.tech's Hugo "terminal" theme. Drop this file + menu.js + site-menu.js into any collection of plain .html files -- no build step, no server-side templating. ============================================================ */ /* ---------- palettes ----------------------------------------------- Everything below this block is written against these variables only, so a palette is nothing but a set of seven colors. The active one is chosen by data-theme on ; menu.js flips that attribute (and remembers your choice) when you click the ◐ button in the sidebar. Add more palettes by copying either block below. */ :root, /* default = amber, dark */ :root[data-theme="amber"]{ --bg: #0d0e0c; --panel: #131512; --fg: #eed2a7; --fg-dim: #6f776b; --fg-bright: #d6ddd0; --accent: #dfa22c; --rule: #2a2d27; --shadow: rgba(0,0,0,.5); --scrim: rgba(4,5,4,.74); color-scheme: dark; } /* black on white: paper, not a screen. The accent is darkened well past the amber above so it still passes contrast on white. */ :root[data-theme="lite"]{ --bg: #ffffff; --panel: #f3f3f0; --fg: #1b1b19; --fg-dim: #6a6e67; --fg-bright: #000000; --accent: #9a5200; --rule: #d8d8d2; --shadow: rgba(0,0,0,.22); --scrim: rgba(70,70,66,.55); color-scheme: light; } :root{ --col: 74ch; /* reading width of the text column */ --gutter: clamp(1.25rem, 3vw, 3rem); /* space either side of it */ --font-mono: "Inconsolata", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-read: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } *{ box-sizing:border-box; } html,body{ margin:0; } body{ min-height:100vh; background:var(--bg); color:var(--fg); font-family:var(--font-mono); line-height:1.7; } a{ color:inherit; } /* ---------- layout: sidebar + reading column ---------------------- */ .wrap{ display:grid; grid-template-columns:30ch minmax(0,1fr); min-height:100vh; } /* ---------- sidebar: book-of-books tree ---------------------------- */ .sidebar{ border-right:1px solid var(--rule); padding:.85rem 1.1rem 1.4rem; position:sticky; top:0; align-self:start; height:100vh; overflow:hidden; display:flex; flex-direction:column; background:var(--panel); font-size:.82rem; } .sidebar .brand{ color:var(--accent); font-weight:600; margin-bottom:.2rem; flex:none; } .sidebar .brand a{ color:inherit; text-decoration:none; } .sidebar .brand a:hover{ color:var(--fg-bright); } .sidebar .tag{ color:var(--fg-dim); font-size:.85em; margin-bottom:1.3rem; flex:none; } .tree{ list-style:none; margin:0; padding:0; flex:1 1 auto; min-height:0; overflow:auto; } .tree li{ overflow-wrap:anywhere; } .tree a{ color:var(--fg); text-decoration:none; display:block; padding:1px 0; } .tree a:hover{ color:var(--accent); } /* top-level "book" entries: ▸ closed / ▾ open */ .tree > li.book::before{ content:"▸ "; color:var(--fg-dim); } .tree > li.book.open::before{ content:"▾ "; color:var(--accent); } .tree > li.book.open > a{ color:var(--fg-bright); } /* nested "chapter" list, indented with a rule down the left edge */ .tree .chapters{ list-style:none; margin:.1rem 0 .7rem; padding:0 0 0 1.6ch; border-left:1px solid var(--rule); } .tree .chapters li::before{ content:none; } .tree .chapters a::before{ content:"· "; color:var(--fg-dim); } .tree .chapters a.active{ color:var(--accent); } .tree .chapters a.active::before{ content:"› "; color:var(--accent); } /* third-level "section" list -- same treatment, one notch deeper */ .tree .sections{ list-style:none; margin:.1rem 0 .4rem; padding:0 0 0 1.6ch; border-left:1px solid var(--rule); } .tree .sections a::before{ content:"· "; color:var(--fg-dim); } .tree .sections a.active{ color:var(--accent); } .tree .sections a.active::before{ content:"› "; color:var(--accent); } /* ---- per-page "#" outline ------------------------------------------ menu.js renders