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

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

View file

@ -5,9 +5,9 @@
It's an **editorial-style personal site** in a **gruvbox** palette, with the whole KDE
desktop simulation kept behind a "Desktop mode" button. Two modes, one content set:
- **Gruvbox editorial** (default) — a technical-print layout: serif headlines, mono labels in
the margin, hairline rules and a data strip. No images at all; the only graphics are the
social icons, used as monochrome CSS masks.
- **Web** (default) — the editorial site: a technical-print layout painted in the gruvbox
palette, with serif headlines, mono labels in the margin, hairline rules and a data strip. No
images at all; the only graphics are the social icons, used as monochrome CSS masks.
- **Desktop mode** — the KDE Plasma / Windows-style **desktop simulation**: draggable
snap-to-grid icons, resizable/floating windows, a Start menu, taskbar, live clock and a
working in-browser terminal (Alacritty). Reachable from the "Desktop mode" button and hidden
@ -19,13 +19,13 @@ heatmap**, gym SBD and links to friends' sites.
## ✨ Features
- **Gruvbox editorial by default** — a technical-print layout: serif headlines, mono labels in
the margin, hairline rules, a data strip. Text and type only — the sole graphics are the
social icons, rendered as monochrome CSS masks.
- **Desktop mode (desktop-only)** — a "Desktop mode" button swaps to the KDE-style desktop;
the choice persists in `localStorage` (applied pre-paint to avoid a flash). Phones never get
it: the pre-paint script forces gruvbox and CSS hides the button, so the old iOS-style phone
home screen is gone.
- **Web theme is the landing view** — the site always opens on the editorial page; the theme is
deliberately not persisted, so a reload never drops you into the desktop. A technical-print
layout with serif headlines, mono labels in the margin, hairline rules and a data strip. Text
and type only — the sole graphics are the social icons, rendered as monochrome CSS masks.
- **Desktop mode (desktop-only)** — a "Desktop mode" button swaps to the KDE-style desktop for
the session. Phones never get it: the buttons are hidden, so the old iOS-style phone home
screen is gone.
- **Draggable desktop icons** — free placement that snaps to a measured grid, one icon per
cell, with a follow-the-cursor drag ghost. Icons shrink on cramped viewports so they never
collide.
@ -61,10 +61,11 @@ heatmap**, gym SBD and links to friends' sites.
- **Framework:** Next.js 16 (App Router, Turbopack)
- **Language:** TypeScript, React 19 (client components everywhere interactivity lives)
- **Styling:** `src/app/globals.css` is the gruvbox editorial design system (CSS custom
properties, Tailwind v4 `@theme`/`@utility`, base + scroll reveals). `editorial.css` holds
page helpers; `page.css` keeps the shared component styles the desktop apps still use, and
`skeuo.css` is the KDE desktop. The editorial page itself is built from Tailwind utilities.
- **Styling:** `src/app/globals.css` is the web editorial design system — the gruvbox palette as
CSS custom properties, plus Tailwind v4 `@theme`/`@utility`, base and scroll reveals.
`editorial.css` holds page helpers; `page.css` keeps the shared component styles the desktop
apps still use, and `skeuo.css` is the KDE desktop. The editorial page is built from Tailwind
utilities.
- **Fonts:** Newsreader (display) + IBM Plex Sans/Mono (body/labels) via `next/font/google`;
the desktop keeps its system sans stack.
- **Images:** `next/image` — but the editorial page uses none (social SVGs as monochrome masks only).
@ -170,7 +171,7 @@ they contend for `:3000` and `.next/dev/lock`.
src/app/
page.tsx → renders <ThemeRoot/>, imports the theme stylesheets
layout.tsx → html shell + metadata; loads the fonts; injects ThemeScript
globals.css → gruvbox editorial design system (tokens, @utility classes, base)
globals.css → web editorial design system (gruvbox palette; tokens, @utility classes, base)
editorial.css → editorial page helpers (social masks, heatmap)
page.css → shared component styles still used by the desktop apps
skeuo.css → KDE desktop styles
@ -182,10 +183,10 @@ src/app/
frame/route.ts → header-stripping proxy for unframeable friend sites
ping/route.ts → service health check (HTTP + Minecraft)
components/
ThemeRoot.tsx → gruvbox editorial vs. Desktop mode
ThemeScript.tsx → pre-paint script: theme + device detection
ThemeRoot.tsx → web editorial vs. Desktop mode
ThemeScript.tsx → pre-paint script: device detection
useTheme.ts → theme state via useSyncExternalStore
EditorialSite.tsx → the gruvbox editorial page (nav, hero, sections)
EditorialSite.tsx → the web editorial page (nav, hero, sections)
editorial-ui.tsx → editorial primitives: Section, ServiceRow, Contributions, …
WindowsDesktop.tsx → desktop shell: icons, windows, taskbar, Start menu
WinWindow.tsx → one draggable/resizable window