/* strand.wf — a web terminal that cosplays as three real ones. Switch the OS skin with [data-theme="powershell" | "mac" | "linux"] on . Everything below is driven by CSS variables, so each theme is just a palette (plus a window-chrome flavor and a CSS-rendered shell prompt). */ /* ============================ THEME PALETTES ============================ */ /* --- Windows PowerShell: the iconic navy console + PSReadLine syntax. --- */ :root[data-theme="powershell"] { --bg: #012456; --text: #eeedf0; --muted: #8c9bc0; --cmd: #f9f1a5; /* PSReadLine Command = yellow */ --string: #76c0e0; /* String = cyan */ --comment: #6fcf6f; /* Comment = green */ --num: #f2f2f2; --param: #cfd6e6; --link: #76c0e0; --error: #e74856; --border: rgba(255, 255, 255, 0.14); --border-soft: rgba(255, 255, 255, 0.08); --linenum: rgba(255, 255, 255, 0.28); --code-bg: rgba(0, 0, 0, 0.28); --titlebar: #0a2f6b; --titlebar-fg: #c5cee6; --ps1a: "PS C:\\strand.wf> "; --ps1a-c: var(--text); --ps1b: ""; --ps1b-c: var(--text); --wintitle: "Windows PowerShell"; } /* --- macOS Terminal.app, default "Basic" profile: white, black text. --- */ :root[data-theme="mac"] { --bg: #ffffff; --text: #1d1d1f; --muted: #6e6e73; --cmd: #0b54c2; /* command = blue */ --string: #c41a16; /* string = red (Xcode-ish) */ --comment: #007400; /* comment = green */ --num: #1d1d1f; --param: #1d1d1f; --link: #0b66c2; --error: #c41a16; --border: rgba(0, 0, 0, 0.14); --border-soft: rgba(0, 0, 0, 0.07); --linenum: rgba(0, 0, 0, 0.32); --code-bg: rgba(0, 0, 0, 0.05); --titlebar: linear-gradient(#ececec, #d6d6d6); --titlebar-fg: #4d4d4d; --ps1a: "strand.wf ~ % "; --ps1a-c: var(--text); --ps1b: ""; --ps1b-c: var(--text); --wintitle: "strand.wf \2014 -zsh \2014 80x24"; } /* --- Ubuntu GNOME Terminal: aubergine bg, green+blue bash prompt. --- */ :root[data-theme="linux"] { --bg: #300a24; --text: #ffffff; --muted: #b8a6b0; --cmd: #8ae234; /* executables show green in Ubuntu's ls colors */ --string: #ad7fa8; --comment: #9e8ea8; --num: #ffffff; --param: #d3d7cf; --link: #729fcf; --error: #ef2929; --border: rgba(255, 255, 255, 0.14); --border-soft: rgba(255, 255, 255, 0.07); --linenum: rgba(255, 255, 255, 0.30); --code-bg: rgba(0, 0, 0, 0.28); --titlebar: #2d2d2d; --titlebar-fg: #d3c7ce; --ps1a: "visitor@strand.wf"; --ps1a-c: #8ae234; /* user@host = bold green */ --ps1b: ":~$ "; --ps1b-c: #729fcf; /* path = blue */ --wintitle: "visitor@strand.wf: ~"; } /* Sensible fallback before the head script sets a theme. */ :root { --bg: #012456; --text: #eeedf0; --muted: #8c9bc0; --cmd: #f9f1a5; --string: #76c0e0; --comment: #6fcf6f; --num: #f2f2f2; --param: #cfd6e6; --link: #76c0e0; --border: rgba(255,255,255,.14); --border-soft: rgba(255,255,255,.08); --linenum: rgba(255,255,255,.28); --code-bg: rgba(0,0,0,.28); --titlebar: #0a2f6b; --titlebar-fg: #c5cee6; --ps1a: "PS C:\\strand.wf> "; --ps1a-c: #eeedf0; --ps1b: ""; --ps1b-c: #eeedf0; --wintitle: "Windows PowerShell"; } /* ============================== BASE ============================== */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Lucida Console", "SFMono-Regular", "JetBrains Mono", Menlo, monospace; font-size: 15px; line-height: 1.4; } /* macOS terminal uses SF Mono / Menlo; lead with those when in that skin. */ [data-theme="mac"] body, [data-theme="mac"] html { font-family: "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Mono", monospace; } [data-theme="linux"] body, [data-theme="linux"] html { font-family: "Ubuntu Mono", "DejaVu Sans Mono", "Cascadia Mono", monospace; font-size: 16px; } /* Full-bleed console — fills the whole window, no card, no glow, no scanlines. */ .crt { min-height: 100%; background: var(--bg); padding: 0; } .terminal { width: 100%; min-height: 100vh; background: var(--bg); border: none; border-radius: 0; box-shadow: none; padding: 14px 18px 18px; } /* ---- window chrome (the part that says "this is an OS terminal") ---- */ .titlebar { display: flex; align-items: center; gap: 10px; margin: -14px -18px 0; padding: 7px 12px; background: var(--titlebar); color: var(--titlebar-fg); border-bottom: 1px solid var(--border); font-size: 0.78rem; user-select: none; } .titlebar .wintitle { flex: 1; text-align: center; } .titlebar .wintitle::before { content: var(--wintitle); } /* traffic lights — only meaningful on macOS */ .lights { display: none; gap: 8px; align-items: center; } .lights span { width: 12px; height: 12px; border-radius: 50%; display: block; } .lights span:nth-child(1) { background: #ff5f57; } .lights span:nth-child(2) { background: #febc2e; } .lights span:nth-child(3) { background: #28c840; } [data-theme="mac"] .lights { display: flex; } /* min / max / close glyphs — Windows + Linux */ .wincontrols { display: flex; gap: 14px; font-size: 0.8rem; } [data-theme="mac"] .wincontrols { display: none; } [data-theme="mac"] .titlebar .wintitle { text-align: center; } /* ---- tab bar + theme switcher ---- */ .tabs { display: flex; align-items: center; margin: 0 -18px 16px; border-bottom: 1px solid var(--border); } .tab { padding: 9px 18px; color: var(--muted); text-decoration: none; border-right: 1px solid var(--border-soft); font-size: 0.9rem; letter-spacing: 0.04em; } .tab:hover { color: var(--text); } .tab.active { color: var(--cmd); background: var(--code-bg); font-weight: 700; } .ver { margin-left: auto; align-self: center; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.04em; } .ver + .switch { margin-left: 12px; } .switch { display: flex; gap: 6px; margin-left: auto; padding-right: 12px; align-items: center; } .switch button { font: inherit; font-size: 0.74rem; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 11px; } .switch button:hover { color: var(--text); } .switch button.active { color: var(--cmd); border-color: var(--cmd); font-weight: 700; } /* ---- line-numbered hero buffer ---- */ .editor { counter-reset: ln; margin: 4px 0 10px; } .editor .line { counter-increment: ln; display: flex; gap: 20px; white-space: pre-wrap; word-break: break-word; min-height: 1.55em; line-height: 1.55; color: var(--text); } .editor .line::before { content: counter(ln); width: 2ch; flex: none; text-align: right; color: var(--linenum); user-select: none; } .editor .comment { color: var(--comment); } .editor .dim { color: var(--muted); } .editor .key { color: var(--muted); word-break: break-all; } .editor .cmd { color: var(--cmd); font-weight: 700; } #screen { white-space: normal; } .logo { color: var(--cmd); margin: 0 0 6px; font-size: 12px; line-height: 1.1; overflow-x: auto; } .block { margin: 10px 0; } .cmdline { color: var(--text); margin-bottom: 2px; } .out { white-space: pre-wrap; word-break: break-word; min-height: 1.2em; color: var(--text); } .out a { color: var(--link); text-decoration: none; } .out a:hover { text-decoration: underline; } .reply { font: inherit; cursor: pointer; margin-top: 6px; color: var(--cmd); background: transparent; border: 1px solid var(--cmd); border-radius: 6px; padding: 4px 12px; } .reply:hover { background: var(--code-bg); } .muted { color: var(--muted); } .hint { color: var(--cmd); font-weight: 600; } em { color: var(--cmd); font-style: normal; } /* The shell prompt is rendered entirely in CSS, so it morphs with the theme. */ .ps1 { user-select: none; white-space: pre; } .ps1::before { content: var(--ps1a); color: var(--ps1a-c); font-weight: 600; } .ps1::after { content: var(--ps1b); color: var(--ps1b-c); font-weight: 600; } #prompt { display: flex; align-items: center; gap: 8px; margin-top: 10px; } #prompt input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font: inherit; caret-color: var(--text); } .cursor { color: var(--text); animation: blink 1.1s steps(1) infinite; margin-left: -8px; } @keyframes blink { 50% { opacity: 0; } } .htmx-request .cursor { opacity: 0.4; } /* ---- /docs page ---- */ .docs { line-height: 1.6; } .docnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .docnav.bottom { border-bottom: none; border-top: 1px solid var(--border); margin-top: 24px; padding-top: 14px; } .docnav a, .docs a { color: var(--link); text-decoration: none; } .docnav a:hover, .docs a:hover { text-decoration: underline; } .docs .lead { color: var(--muted); max-width: 60ch; } .docs h2 { color: var(--cmd); font-size: 1.02rem; font-weight: 700; margin: 28px 0 8px; } .docs p { color: var(--text); max-width: 70ch; margin: 8px 0; } .docs ul { color: var(--text); max-width: 70ch; padding-left: 1.2em; } .docs li { margin: 4px 0; } .docs code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--cmd); font-size: 0.9em; } .docs pre.code { background: var(--code-bg); border: 1px solid var(--border); border-left: 3px solid var(--cmd); border-radius: 6px; padding: 12px 14px; overflow-x: auto; color: var(--text); line-height: 1.5; font-size: 0.88rem; } .docs pre.code code { background: none; border: none; padding: 0; color: inherit; } .docs kbd { background: var(--code-bg); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--text); font-size: 0.85em; } .docs .callout { border-left: 3px solid var(--string); background: var(--code-bg); padding: 8px 12px; border-radius: 0 6px 6px 0; } .docs b { color: var(--text); } @media (max-width: 560px) { body { font-size: 13px; } .logo { font-size: 9px; } .titlebar .wintitle { display: none; } .switch button { padding: 2px 8px; font-size: 0.68rem; } }