web theme: drop terminal leftovers (prompt hero, filename eyebrows, git command lines), make light buttons readable, remove unused assets

This commit is contained in:
Martin Dvořák 2026-09-30 12:22:15 +00:00
commit 7beb197f72
10 changed files with 129 additions and 105 deletions

View file

@ -43,7 +43,7 @@ frosted-glass **web** site, and an alternate KDE/Plasma **desktop simulation**
utilities in the components (Tailwind is present via PostCSS but the look is
hand-written CSS).
- Path alias: `@/*` → `src/*`.
- Version: `2.2.0` (see `package.json`).
- Version: `2.2.1` (see `package.json`).
### Scripts
```bash
@ -123,30 +123,44 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
`skeuo` = KDE Plasma desktop simulation (desktop-only; the web sidebar's
"Desktop" control switches to it, and it has a "Web" control in its tray).
### Web theme + light/dark (v2.2.0 rework)
### Web theme + light/dark (v2.2 rework)
- `WebLayout.tsx` is the default shell. Layout is a **sticky sidebar** (brand,
section nav, light/dark switch, desktop switch, contact/clock) beside a single
content column of `.glass` panels: hero (with a compact "Find me" socials row),
a `.web-quick` 2-up (`now.txt` + `gym_sbd.db`), then services, activity,
a `.web-quick` 2-up ("Right now" + "Gym PRs"), then services, activity,
projects, hardware, features (Revival/RustyWolf) and friends. Projects/hardware
use a CSS multi-column **masonry** gallery (`.project-grid`) so short cards
don't leave half-empty grid slots. The old stacked TUI panel layout and the
`SlBackground` ASCII train were removed with it.
- **Not a terminal.** The web theme deliberately has no TUI chrome: the hero is
a name + blurb (no `$ whoami` prompt, no blinking cursor), section eyebrows are
plain words (not `README.MD` / `TECH_LIST.JSON` filenames), and the activity
panel renders without the `martin@git…:~$ echo …` / `git log -n 3` command
lines. `ContributionHeatmap` takes `variant?: "terminal" | "web"` (default
`terminal`); `WebLayout` passes `variant="web"`, the desktop app keeps the
terminal look. Don't reintroduce command prompts in the web variant.
- **Grid gotcha:** the mobile column is `minmax(0, 1fr)`, never bare `1fr`. A
`1fr` track has an automatic `min-content` floor, and with a wide child that
blew the single column out to ~2x the viewport (horizontal scroll + clipped
content on phones). Keep the `minmax(0, …)`.
- Glassmorphism lives in one utility class, `.glass`, in `web.css`: a subtle
`linear-gradient` over `--glass-hi`/`--glass-lo` with
`backdrop-filter: blur(20px) saturate(165%)`. The page blobs behind the panels
`backdrop-filter: blur(28px) saturate(180%)`. The page blobs behind the panels
are `.web-bg` (a fixed radial-gradient layer at `z-index: 0`; `.web-root` sits
at `z-index: 1`).
- Interactive surfaces (`.web-ctl`, pills, `.service-button`, `.social-button`,
`.project-card`, `.gym-item`, `.contribution-entry`, `.heatmap-container`) read
the `--btn-bg` / `--btn-bg-hi` / `--btn-border` / `--btn-shadow` tokens with
the glass tokens as **fallbacks** (`var(--btn-bg, var(--glass-lo))`). The
tokens are only defined under `html[data-theme="web"]`, so the desktop theme
falls back to the old values and is unaffected. Light-mode buttons need the
extra opacity + a visible (dark, low-alpha) outline or they melt into the pale
background.
- Colours are tokenised in `web.css` under `:root` (light) and
`html[data-theme="web"][data-scheme="dark"]` (dark). The shared token names
(`--fg`, `--gray`, `--accent`, `--green`, …) are reused so `ServiceButton` and
`ContributionHeatmap` need no changes. `skeuo.css` overrides the same names
while the desktop theme is active, so the two themes don't bleed into each
other.
(`--fg`, `--gray`, `--accent`, `--green`, …) are reused by `ServiceButton` and
`ContributionHeatmap`. `skeuo.css` overrides the same names while the desktop
theme is active, so the two themes don't bleed into each other.
- The desktop switch (`.web-ctl-desktop`) is hidden on phones: under the
`max-width: 960px` breakpoint and under `(hover: none) and (pointer: coarse)`.
There is no device sniff anymore — phones just get the responsive web shell.