style: dark stealth theme with teal/burgundy pieces and cache-busting

Darken the DaisyUI theme and game board colors for a muted, low-chroma
aesthetic. Pieces use dark teal vs burgundy for subtle contrast.
Add MD5-based cache busting to the DaisyUI stylesheet link so CSS
changes are picked up without a hard refresh.
This commit is contained in:
Ryan Hamamura
2026-02-05 09:51:36 -10:00
parent 9a3d1fd164
commit 73128dc119
3 changed files with 1962 additions and 42 deletions

View File

@@ -7,35 +7,35 @@
default: true; default: true;
color-scheme: light; color-scheme: light;
/* Playful & brightwarm, casual board game feel */ /* Muted stealthdark, subtle chroma */
--color-base-100: oklch(98% 0.005 90); /* warm white */ --color-base-100: oklch(78% 0.008 260);
--color-base-200: oklch(95% 0.01 90); /* light cream */ --color-base-200: oklch(72% 0.008 260);
--color-base-300: oklch(90% 0.015 85); /* warm gray border */ --color-base-300: oklch(64% 0.008 260);
--color-base-content: oklch(25% 0.02 50); /* dark warm text */ --color-base-content: oklch(22% 0.01 260);
--color-primary: oklch(60% 0.22 30); /* warm red — matches game pieces */ --color-primary: oklch(38% 0.02 260);
--color-primary-content: oklch(98% 0.005 90); --color-primary-content: oklch(90% 0.006 260);
--color-secondary: oklch(82% 0.17 85); /* golden yellow — matches game pieces */ --color-secondary: oklch(52% 0.015 260);
--color-secondary-content: oklch(25% 0.02 50); --color-secondary-content: oklch(22% 0.01 260);
--color-accent: oklch(65% 0.19 250); /* board blue */ --color-accent: oklch(48% 0.02 280);
--color-accent-content: oklch(98% 0.005 90); --color-accent-content: oklch(90% 0.006 260);
--color-neutral: oklch(35% 0.03 260); --color-neutral: oklch(35% 0.015 260);
--color-neutral-content: oklch(95% 0.01 90); --color-neutral-content: oklch(88% 0.006 260);
--color-success: oklch(72% 0.19 155); --color-success: oklch(52% 0.02 160);
--color-success-content: oklch(20% 0.04 155); --color-success-content: oklch(22% 0.01 160);
--color-warning: oklch(82% 0.17 85); --color-warning: oklch(58% 0.02 80);
--color-warning-content: oklch(25% 0.04 85); --color-warning-content: oklch(28% 0.01 80);
--color-error: oklch(60% 0.22 30); --color-error: oklch(45% 0.03 20);
--color-error-content: oklch(97% 0.01 30); --color-error-content: oklch(90% 0.006 20);
--color-info: oklch(70% 0.15 240); --color-info: oklch(48% 0.02 250);
--color-info-content: oklch(20% 0.04 240); --color-info-content: oklch(22% 0.01 250);
--radius-selector: 0.5rem; --radius-selector: 0.5rem;
--radius-field: 0.5rem; --radius-field: 0.5rem;
--radius-box: 0.75rem; --radius-box: 0.75rem;
--border: 1px; --border: 1px;
--depth: 1; --depth: 0;
--noise: 0; --noise: 0;
}; };
@@ -43,38 +43,38 @@
.board { .board {
display: flex; display: flex;
gap: 8px; gap: 8px;
background: #2563eb; background: #334;
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
} }
.column { display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 8px; } .column { display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 8px; }
.column.clickable { cursor: pointer; } .column.clickable { cursor: pointer; }
.column.clickable:hover { background: rgba(255,255,255,0.15); } .column.clickable:hover { background: rgba(255,255,255,0.08); }
.cell { width: 48px; height: 48px; border-radius: 50%; background: #1e40af; transition: background 0.2s; } .cell { width: 48px; height: 48px; border-radius: 50%; background: #556; transition: background 0.2s; }
.cell.red { background: #dc2626; } .cell.red { background: #4a2a3a; }
.cell.yellow { background: #facc15; } .cell.yellow { background: #2a4545; }
.cell.winning { animation: pulse 0.5s ease-in-out infinite alternate; } .cell.winning { animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes pulse { @keyframes pulse {
from { transform: scale(1); box-shadow: 0 0 10px rgba(255,255,255,0.5); } from { transform: scale(1); box-shadow: 0 0 4px rgba(0,0,0,0.15); }
to { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,0.8); } to { transform: scale(1.03); box-shadow: 0 0 8px rgba(0,0,0,0.25); }
} }
.player-chip { width: 20px; height: 20px; border-radius: 50%; background: #666; } .player-chip { width: 20px; height: 20px; border-radius: 50%; background: #445; }
.player-chip.red { background: #dc2626; } .player-chip.red { background: #4a2a3a; }
.player-chip.yellow { background: #facc15; } .player-chip.yellow { background: #2a4545; }
/* Snake game */ /* Snake game */
.snake-board { .snake-board {
display: inline-grid; display: inline-grid;
gap: 0; gap: 0;
background: #1a1a2e; background: #556;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
border: 3px solid #333; border: 3px solid #445;
} }
.snake-row { display: contents; } .snake-row { display: contents; }
.snake-cell { .snake-cell {
background: #16213e; background: #667;
border: 1px solid rgba(255,255,255,0.03); border: 1px solid rgba(0,0,0,0.08);
} }
.snake-cell.snake-head { .snake-cell.snake-head {
border-radius: 4px; border-radius: 4px;
@@ -85,14 +85,14 @@
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
.snake-cell.snake-food { .snake-cell.snake-food {
background: #ff6b6b; background: #334;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 6px rgba(255,107,107,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.2);
animation: food-pulse 1.2s ease-in-out infinite alternate; animation: food-pulse 1.2s ease-in-out infinite alternate;
} }
@keyframes food-pulse { @keyframes food-pulse {
from { box-shadow: 0 0 6px rgba(255,107,107,0.4); transform: scale(0.85); } from { box-shadow: 0 0 3px rgba(0,0,0,0.1); transform: scale(0.85); }
to { box-shadow: 0 0 12px rgba(255,107,107,0.9); transform: scale(1); } to { box-shadow: 0 0 6px rgba(0,0,0,0.2); transform: scale(1); }
} }
.snake-cell.snake-dead { .snake-cell.snake-dead {
opacity: 0.35; opacity: 0.35;
@@ -100,3 +100,11 @@
transition: opacity 400ms ease-out; transition: opacity 400ms ease-out;
} }
.snake-wrapper:focus { outline: none; } .snake-wrapper:focus { outline: none; }
/* Desaturate inline-styled snake body/head colors */
.snake-cell[style*="background"] {
filter: saturate(0) brightness(0.85);
}
.snake-cell.snake-head[style] {
box-shadow: none !important;
}

File diff suppressed because one or more lines are too long

View File

@@ -2,8 +2,10 @@ package main
import ( import (
"context" "context"
"crypto/md5"
"database/sql" "database/sql"
_ "embed" _ "embed"
"encoding/hex"
"log" "log"
"net/http" "net/http"
"os" "os"
@@ -32,11 +34,13 @@ var (
var daisyUICSS []byte var daisyUICSS []byte
func DaisyUIPlugin(v *via.V) { func DaisyUIPlugin(v *via.V) {
sum := md5.Sum(daisyUICSS)
version := hex.EncodeToString(sum[:4])
v.HTTPServeMux().HandleFunc("GET /_plugins/daisyui/style.css", func(w http.ResponseWriter, r *http.Request) { v.HTTPServeMux().HandleFunc("GET /_plugins/daisyui/style.css", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "text/css") w.Header().Set("Content-Type", "text/css")
_, _ = w.Write(daisyUICSS) _, _ = w.Write(daisyUICSS)
}) })
v.AppendToHead(h.Link(h.Rel("stylesheet"), h.Href("/_plugins/daisyui/style.css"))) v.AppendToHead(h.Link(h.Rel("stylesheet"), h.Href("/_plugins/daisyui/style.css?v="+version)))
} }
func port() string { func port() string {