avi/Keynctr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(theme): Workshop atmosphere — Moi's graph-paper grid + mint/clay washes

Browse source 
The Moi dark material is not just tokens: site.css paints a 24px hairline grid (rgba(235,230,220,0.035)) plus pine and clay radial washes over the paper. Applied the identical background stack to .main under both workshop themes (fixed attachment), with per-theme --wk-grid/--wk-wash-mint/--wk-wash-clay/--wk-copper tokens from Moi's light and dark blocks. Sidebar stays a clean opaque surface. Verified against the live Moi site in a browser: both render body #12110f with grid:true, wash:true, pine #7eb89a, copper #d4a574.
This commit is contained in:
Avi 2026-09-28 09:10:00 -05:00
commit de804c8fc5
1 changed files with 32 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/styles.css
View file

@ -600,6 +600,11 @@ html[data-theme='cosmic'] .empty-state {
--shadow-modal: 0 12px 40px rgba(28, 24, 20, 0.18);
--radius: 14px;
--radius-sm: 9px;
/* Moi atmosphere layer: hairline graph-paper grid + soft mint/clay washes */
--wk-grid: rgba(28, 24, 20, 0.04);
--wk-wash-mint: rgba(33, 92, 72, 0.1);
--wk-wash-clay: rgba(191, 112, 64, 0.1);
--wk-copper: #8b5a32;
}
/* Workshop type: Iowan/Palatino serif for display surfaces, everything
@ -649,10 +654,37 @@ html[data-theme='workshop'] h2 {
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.6);
--radius: 14px;
--radius-sm: 9px;
/* Moi dark atmosphere (site.css dark block): pale grid + pine/clay washes */
--wk-grid: rgba(235, 230, 220, 0.035);
--wk-wash-mint: rgba(126, 184, 154, 0.08);
--wk-wash-clay: rgba(212, 165, 116, 0.07);
--wk-copper: #d4a574;
}
/* One accent rule: pine carries focus and active states; copper marks
index-like mono elements instead of a second saturated hue. */
html[data-theme='workshop'] .main,
html[data-theme='workshop-dark'] .main {
/* Moi body canvas: graph-paper hairlines at 24px + mint/clay washes.
Applied to .main (the scroll surface) with fixed attachment so it
reads as the room, not a texture on a panel. */
background-image:
linear-gradient(var(--wk-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--wk-grid) 1px, transparent 1px),
radial-gradient(50% 40% at 88% 8%, var(--wk-wash-mint), transparent 70%),
radial-gradient(45% 36% at 8% 92%, var(--wk-wash-clay), transparent 68%);
background-size:
24px 24px,
24px 24px,
auto,
auto;
background-attachment: fixed;
}
html[data-theme='workshop'] .sidebar,
html[data-theme='workshop-dark'] .sidebar {
/* keep the sidebar a clean surface over the grid */
background: var(--surface);
}
html[data-theme='workshop'] code,
html[data-theme='workshop-dark'] code,
html[data-theme='workshop'] .mono,