vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: brutalist, geocities and nyt on the token system — single light-dark() palettes, radius scale instead of per-selector overrides

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-19 19:34:32 +00:00
parent 971cc4988e
commit 7c91e68cd1
3 changed files with 130 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
src/themes/geocities.css
View File

@@ -7,41 +7,39 @@
Light scheme → classic GeoCities pastel-on-wallpaper.
══════════════════════════════════════════════════════════════════════ */
/* ── Dark variant (default for this theme) ────────────────────────── */
/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
:root[data-style="geocities"] {
--color-text: #f2f0ff;
--color-text-secondary: #7fdbff; /* cyan */
--color-text-muted: #a99ad6; /* faded violet */
--color-on-accent: #000000; /* black on hot magenta */
/* Square corners everywhere App.css uses the radius scale. */
--radius-xs: 0;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
--radius-full: 0;
--color-bg: #0a0a2e; /* deep indigo night */
--color-surface: #1b1b46; /* raised panel */
--color-border: #00ffff; /* neon cyan */
--color-border-subtle: rgba(0, 255, 255, 0.28);
--color-accent: #ff00ff; /* hot magenta */
--color-accent-hover: #ff5cff;
--color-link: #00ffff; /* classic bright link */
--color-link-hover: #ffff00; /* yellow on hover, very 1999 */
--color-danger: #ff3860;
--color-danger-bg: #3a0a1a;
--color-danger-hover: #ff6b8a;
--color-success: #39ff14; /* neon green */
--color-success-bg: #0a2e0a;
--color-success-hover: #6fff52;
--color-overlay: rgba(8, 0, 28, 0.72);
--color-header-user-bg: rgba(0, 255, 255, 0.1);
--color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
--color-option-bg: #14143a;
--color-option-border: #00ffff;
/* Theme-local helpers */
--color-text: light-dark(#2a1a4e, #f2f0ff);
--color-text-secondary: light-dark(#aa00aa, #7fdbff);
--color-text-muted: light-dark(#7a6a9a, #a99ad6);
--color-on-accent: light-dark(#ffffff, #000000);
--color-bg: light-dark(#fff0f8, #0a0a2e);
--color-surface: light-dark(#ffffff, #1b1b46);
--color-border: light-dark(#d000d0, #00ffff);
--color-border-subtle: light-dark(rgba(208, 0, 208, 0.25), rgba(0, 255, 255, 0.28));
--color-accent: light-dark(#d000d0, #ff00ff);
--color-accent-hover: light-dark(#a000a0, #ff5cff);
--color-link: light-dark(#0000ee, #00ffff);
--color-link-hover: light-dark(#551a8b, #ffff00);
--color-danger: light-dark(#cc0033, #ff3860);
--color-danger-bg: light-dark(#ffe0e8, #3a0a1a);
--color-danger-hover: light-dark(#990022, #ff6b8a);
--color-success: light-dark(#008800, #39ff14);
--color-success-bg: light-dark(#e0ffe0, #0a2e0a);
--color-success-hover: light-dark(#006600, #6fff52);
--color-overlay: light-dark(rgba(40, 0, 40, 0.4), rgba(8, 0, 28, 0.72));
--color-header-user-bg: light-dark(rgba(208, 0, 208, 0.08), rgba(0, 255, 255, 0.1));
--color-header-user-bg-hover: light-dark(rgba(208, 0, 208, 0.16), rgba(0, 255, 255, 0.2));
--color-option-bg: light-dark(#fff0fb, #14143a);
--color-option-border: light-dark(#d000d0, #00ffff);
--geo-rainbow: linear-gradient(
90deg,
#ff004d,
@@ -51,9 +49,7 @@
#00b3ff,
#b300ff
);
/* Starfield: white pinpricks plus the odd coloured star */
--geo-pattern:
radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
--geo-pattern: radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
@@ -61,127 +57,10 @@
--geo-pattern-size: 200px 200px;
}
/* ── Light via system preference (auto color-scheme) ──────────────── */
/* Non-colour values can't go through light-dark(), so the light variants
of these still need their own scheme selectors. */
@media (prefers-color-scheme: light) {
:root[data-style="geocities"]:not([data-color-scheme]) {
--color-text: #2a1a4e;
--color-text-secondary: #aa00aa;
--color-text-muted: #7a6a9a;
--color-on-accent: #ffffff;
--color-bg: #fff0f8; /* pale lavender wallpaper */
--color-surface: #ffffff;
--color-border: #d000d0;
--color-border-subtle: rgba(208, 0, 208, 0.25);
--color-accent: #d000d0;
--color-accent-hover: #a000a0;
--color-link: #0000ee; /* unvisited blue */
--color-link-hover: #551a8b; /* visited purple */
--color-danger: #cc0033;
--color-danger-bg: #ffe0e8;
--color-danger-hover: #990022;
--color-success: #008800;
--color-success-bg: #e0ffe0;
--color-success-hover: #006600;
--color-overlay: rgba(40, 0, 40, 0.4);
--color-header-user-bg: rgba(208, 0, 208, 0.08);
--color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
--color-option-bg: #fff0fb;
--color-option-border: #d000d0;
--geo-rainbow: linear-gradient(
90deg,
#ff004d,
#ff8a00,
#ffcc00,
#00aa1a,
#0077dd,
#8800cc
);
--geo-pattern:
radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
--geo-pattern-size: 22px 22px, 22px 22px;
}
}
/* ── Manual dark override ─────────────────────────────────────────── */
:root[data-style="geocities"][data-color-scheme="dark"] {
color-scheme: dark;
--color-text: #f2f0ff;
--color-text-secondary: #7fdbff;
--color-text-muted: #a99ad6;
--color-on-accent: #000000;
--color-bg: #0a0a2e;
--color-surface: #1b1b46;
--color-border: #00ffff;
--color-border-subtle: rgba(0, 255, 255, 0.28);
--color-accent: #ff00ff;
--color-accent-hover: #ff5cff;
--color-link: #00ffff;
--color-link-hover: #ffff00;
--color-danger: #ff3860;
--color-danger-bg: #3a0a1a;
--color-danger-hover: #ff6b8a;
--color-success: #39ff14;
--color-success-bg: #0a2e0a;
--color-success-hover: #6fff52;
--color-overlay: rgba(8, 0, 28, 0.72);
--color-header-user-bg: rgba(0, 255, 255, 0.1);
--color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
--color-option-bg: #14143a;
--color-option-border: #00ffff;
--geo-rainbow: linear-gradient(
90deg,
#ff004d,
#ff8a00,
#ffee00,
#00d11a,
#00b3ff,
#b300ff
);
--geo-pattern:
radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
radial-gradient(1px 1px at 50px 190px, #ffee00, transparent);
--geo-pattern-size: 200px 200px;
}
/* ── Manual light override ────────────────────────────────────────── */
:root[data-style="geocities"][data-color-scheme="light"] {
color-scheme: light;
--color-text: #2a1a4e;
--color-text-secondary: #aa00aa;
--color-text-muted: #7a6a9a;
--color-on-accent: #ffffff;
--color-bg: #fff0f8;
--color-surface: #ffffff;
--color-border: #d000d0;
--color-border-subtle: rgba(208, 0, 208, 0.25);
--color-accent: #d000d0;
--color-accent-hover: #a000a0;
--color-link: #0000ee;
--color-link-hover: #551a8b;
--color-danger: #cc0033;
--color-danger-bg: #ffe0e8;
--color-danger-hover: #990022;
--color-success: #008800;
--color-success-bg: #e0ffe0;
--color-success-hover: #006600;
--color-overlay: rgba(40, 0, 40, 0.4);
--color-header-user-bg: rgba(208, 0, 208, 0.08);
--color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
--color-option-bg: #fff0fb;
--color-option-border: #d000d0;
--geo-rainbow: linear-gradient(
90deg,
#ff004d,
@@ -191,8 +70,23 @@
#0077dd,
#8800cc
);
--geo-pattern:
radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
--geo-pattern: radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
--geo-pattern-size: 22px 22px, 22px 22px;
}
}
:root[data-style="geocities"][data-color-scheme="light"] {
--geo-rainbow: linear-gradient(
90deg,
#ff004d,
#ff8a00,
#ffcc00,
#00aa1a,
#0077dd,
#8800cc
);
--geo-pattern: radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
--geo-pattern-size: 22px 22px, 22px 22px;
}
@@ -260,7 +154,6 @@
}
[data-style="geocities"] button:not(.dump-fab, .chat-fab) {
border-radius: 0;
border: 3px outset var(--color-border);
box-shadow: none;
font-weight: 700;
@@ -284,23 +177,10 @@
[data-style="geocities"] .comment-submit-btn,
[data-style="geocities"] .comment-cancel-btn,
[data-style="geocities"] .search-bar-btn {
border-radius: 0;
border: 3px outset var(--color-border);
box-shadow: none;
}
/* In the light variant the resting text colour is dark, but on hover the
danger button fills with the dark --color-danger-hover. Force light text on
hover so the label stays legible. */
@media (prefers-color-scheme: light) {
:root[data-style="geocities"]:not([data-color-scheme]) .btn-danger:hover {
color: #fff;
}
}
:root[data-style="geocities"][data-color-scheme="light"] .btn-danger:hover {
color: #fff;
}
/* The shared .vote-btn declares `background: transparent`, which leaves the
chunky outset bevel see-through against the card. Give the resting state a
solid raised-panel fill; the voted (--active) state keeps its accent
@@ -346,12 +226,10 @@
/* ── Segmented controls ──────────────────────────────────────────── */
[data-style="geocities"] .visibility-toggle {
border-radius: 0;
border: 3px ridge var(--color-border);
}
[data-style="geocities"] .visibility-toggle button {
border-radius: 0;
/* Zero the width (not just the style): the generic `button:active` rule flips
border-style to `inset`, and a `none` border keeps its `medium` width — so
on press a 3px border would reappear inside the toggle's own frame. */
@@ -366,7 +244,6 @@
[data-style="geocities"] .notification-item,
[data-style="geocities"] .user-result-item,
[data-style="geocities"] .journal-card {
border-radius: 0;
border: 3px ridge var(--color-border);
box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
}
@@ -379,7 +256,6 @@
edge but lighten it: thin flat border, just a whisper of the same halo. */
[data-style="geocities"] .comment-node-inner,
[data-style="geocities"] .comment-top-form {
border-radius: 0;
border: 2px solid var(--color-border-subtle);
box-shadow: 0 0 6px var(--color-border-subtle);
}
@@ -400,7 +276,6 @@
}
[data-style="geocities"] .app-header-user {
border-radius: 0;
border: 3px outset var(--color-border);
}
@@ -435,9 +310,6 @@
background-color: var(--color-bg);
}
[data-style="geocities"] .search-bar-input {
border-radius: 0;
}
/* ── Modals — heavy ridged frame ─────────────────────────────────── */
[data-style="geocities"] .modal-card,
@@ -446,7 +318,6 @@
[data-style="geocities"] .user-list-popover,
[data-style="geocities"] .mention-dropdown,
[data-style="geocities"] .emoji-picker-float {
border-radius: 0;
border: 3px ridge var(--color-border);
box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
}
@@ -462,7 +333,6 @@
/* ── Rich content cards — keep brand borders, add neon hover glow ── */
[data-style="geocities"] .rich-content-card {
border-radius: 0;
border-width: 3px;
border-style: ridge;
box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
@@ -478,30 +348,15 @@
box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
[data-style="geocities"] .rich-content-badge {
border-radius: 0;
}
/* ── Global player — neon console ────────────────────────────────── */
[data-style="geocities"] .global-player {
border-radius: 0;
border: 3px ridge var(--color-accent);
box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
[data-style="geocities"] .global-player-iframe-wrap,
[data-style="geocities"] .global-player-media-wrap,
[data-style="geocities"] .global-player .audio-player,
[data-style="geocities"] .global-player .video-player {
border-radius: 0;
}
/* Queue UI: square off the artwork and the stream progress bar. */
[data-style="geocities"] .global-player-artwork,
[data-style="geocities"] .audio-player-track--stream::before,
[data-style="geocities"] .audio-player-track--stream .audio-player-fill {
border-radius: 0;
}
[data-style="geocities"] .global-player .audio-player-btn {
color: var(--color-on-accent);
@@ -514,26 +369,10 @@
/* ── File drop zone ──────────────────────────────────────────────── */
[data-style="geocities"] .fdz {
border-radius: 0;
border-style: dashed;
}
/* ── Pills / badges — squared, and the unread bits blink ─────────── */
[data-style="geocities"] .notifications-unread-pill,
[data-style="geocities"] .playlist-badge,
[data-style="geocities"] .dump-card-private-badge,
[data-style="geocities"] .notif-icon,
[data-style="geocities"] .md code,
[data-style="geocities"] .md pre,
[data-style="geocities"] .error-card,
[data-style="geocities"] .feed-tab,
[data-style="geocities"] .category-chip,
[data-style="geocities"] .category-editor,
[data-style="geocities"] .category-editor-btn,
[data-style="geocities"] .dump-card-category-chip,
[data-style="geocities"] .profile-role-chip {
border-radius: 0;
}
/* The editor is one squared box; flatten its fields (geocities otherwise
forces a sunken inset border on every input) and drop the soft glow. */
@@ -555,13 +394,11 @@
}
[data-style="geocities"] .notification-badge {
border-radius: 0;
animation: geo-blink 1.1s step-start infinite;
}
[data-style="geocities"] .notif-dot,
[data-style="geocities"] .unread-dot {
border-radius: 0;
animation: geo-blink 1.3s step-start infinite;
}
@@ -588,7 +425,6 @@
chunky Win95 button bevel doesn't apply to menu rows. (The trigger reuses
.feed-sort-btn and keeps the bevel, matching the sort tabs.) */
[data-style="geocities"] .category-switcher-menu {
border-radius: 0;
border: 3px ridge var(--color-border);
box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
}
@@ -596,3 +432,9 @@
border: none !important;
box-shadow: none !important;
}
/* Circles App.css draws with a literal 50% (not the radius scale). */
[data-style="geocities"] .notif-icon,
[data-style="geocities"] .notif-dot {
border-radius: 0;
}