falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style: warm neutral palette, full-width grid columns, subtle card elevation

Browse Source
This commit is contained in:
Falkan
2026-03-16 21:48:42 -04:00
parent 8f835c35d2
commit 15b381f08c
1 changed files with 36 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/app.css
View File

@@ -4,12 +4,34 @@
:root { :root {
--min-col-width: 160px; --min-col-width: 160px;
--grid-gap: 1rem; --grid-gap: 1rem;
/* Warm neutral palette */
--pico-background-color: #F7F5F2;
--pico-card-background-color: #FDFCFB;
--pico-card-border-color: #E8E4DF;
--pico-color: #2C2C2C;
--pico-muted-color: #888880;
--pico-muted-border-color: #E0DCD7;
--pico-primary: #5B7FA6;
--pico-primary-background: rgba(91, 127, 166, 0.08);
--pico-secondary-background: rgba(0, 0, 0, 0.03);
/* Shadow for card elevation */
--shadow-color: 30deg 8% 20%;
--shadow-low:
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.06),
0.6px 1px 1.4px hsl(var(--shadow-color) / 0.06),
1.2px 2px 2.8px hsl(var(--shadow-color) / 0.07);
--shadow-medium:
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.07),
1.2px 2px 2.8px hsl(var(--shadow-color) / 0.08),
3px 5px 7px hsl(var(--shadow-color) / 0.09);
} }
/* ── Results grid ──────────────────────────────────────────────────────────── */ /* ── Results grid ──────────────────────────────────────────────────────────── */
.results-grid { .results-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr)); grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr));
gap: var(--grid-gap); gap: var(--grid-gap);
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@@ -18,23 +40,27 @@
.result-tile { .result-tile {
cursor: pointer; cursor: pointer;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid var(--pico-muted-border-color, #ccc); background-color: var(--pico-card-background-color);
border: 1px solid var(--pico-card-border-color);
border-radius: var(--pico-border-radius, 0.25rem); border-radius: var(--pico-border-radius, 0.25rem);
box-shadow: var(--shadow-low);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.2rem;
transition: background-color 0.15s ease, border-color 0.15s ease; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
user-select: none; user-select: none;
} }
.result-tile:hover { .result-tile:hover {
background-color: var(--pico-secondary-background, rgba(0, 0, 0, 0.04)); background-color: var(--pico-card-background-color);
border-color: var(--pico-primary, #1095c1); border-color: var(--pico-primary);
box-shadow: var(--shadow-medium);
} }
.result-tile.highlighted { .result-tile.highlighted {
border-color: var(--pico-primary, #1095c1); background-color: var(--pico-card-background-color);
background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08)); border-color: var(--pico-primary);
box-shadow: var(--shadow-medium);
} }
.result-value { .result-value {
@@ -61,8 +87,9 @@
padding: 2rem 1rem; padding: 2rem 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border-radius: var(--pico-border-radius, 0.25rem); border-radius: var(--pico-border-radius, 0.25rem);
background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08)); background-color: var(--pico-card-background-color);
border: 2px solid var(--pico-primary, #1095c1); border: 2px solid var(--pico-primary);
box-shadow: var(--shadow-medium);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;