dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rename the editorial theme to "web" and make it the landing view (stop persisting the theme, so a reload never opens the desktop)

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 08:20:50 +00:00
commit 40824dbcb1
10 changed files with 70 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

19
agents.md
View file

@ -34,7 +34,7 @@ When in doubt, prefer updating. A stale README **or** agents.md is treated as a
## What this project is
Personal portfolio site for **dvorakmortonxd.dev**. The default view is a
**gruvbox editorial page** (a technical-print layout, no images); a "Desktop mode"
**web editorial page** (a technical-print layout, no images); a "Desktop mode"
button swaps to a **KDE Plasma desktop simulation**. Phones only ever get the
editorial page.
@ -77,7 +77,7 @@ token.** Do not print it, copy it into new files, or push it anywhere else.
src/app/
page.tsx → renders <ThemeRoot/>, imports the theme stylesheets
layout.tsx → html shell, metadata, next/font, ThemeScript
globals.css → gruvbox editorial design system (tokens, @utility, base, reveals)
globals.css → web editorial design system (gruvbox palette; tokens, @utility, base, reveals)
editorial.css → editorial page helpers (social masks, heatmap)
page.css → shared component styles used by the desktop apps
skeuo.css → KDE Plasma desktop styles
@ -90,7 +90,7 @@ src/app/
frame/route.ts → header-stripping proxy so an unframeable friend site loads in a window; host allowlist
components/
ThemeRoot.tsx → editorial page by default, desktop when theme === "skeuo"
EditorialSite.tsx → the gruvbox editorial page (nav, hero, sections)
EditorialSite.tsx → the web editorial page (nav, hero, sections)
editorial-ui.tsx → editorial primitives: Reveal, Section, ServiceRow, Contributions, …
WindowsDesktop.tsx → "skeuo" theme, desktop: icons, windows, taskbar
WinWindow.tsx → a single draggable/resizable window
@ -109,19 +109,18 @@ scripts/
```
### How UI selection works
1. `ThemeScript` runs before paint. It reads `localStorage.theme` and sets
`data-theme` (`gruvbox` | `skeuo`) and `data-device` (`phone` | `desktop`) on
`<html>` from a user-agent sniff. On a phone it forces `gruvbox` and CSS hides
every `.desktop-toggle`, so the desktop is unreachable there.
1. `ThemeScript` runs before paint and sets `data-device` (`phone` | `desktop`)
from a user-agent sniff. It does **not** read a stored theme, so the page always
lands on `web`. CSS hides every `.desktop-toggle` on phones.
2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via `useSyncExternalStore`;
`setTheme` writes the attribute, persists to `localStorage`, and dispatches
`theme-change`.
`setTheme` sets the attribute and dispatches `theme-change`. Nothing is
persisted, so a reload returns to `web`.
3. `ThemeRoot` renders `EditorialSite` unless `theme === "skeuo"`, in which case it
mounts `WindowsDesktop` instead. The editorial page stays mounted (hidden) while
the desktop is up so its scroll position survives; the desktop mounts on demand
(phones can never reach `skeuo`).
Modes: `gruvbox` = the default editorial site, `skeuo` = KDE Plasma desktop.
Modes: `web` = the editorial site (default/landing), `skeuo` = KDE Plasma desktop.
The editorial page is **asset-free** apart from the social SVGs, which are used as
monochrome CSS masks (`.social-mask` in `editorial.css`). `linkedin.svg` is a filled