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:
parent
39f383b7cf
commit
40824dbcb1
10 changed files with 70 additions and 81 deletions
37
README.md
37
README.md
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue