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 {
--min-col-width: 160px;
--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 {
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);
margin-top: 1.5rem;
}
@@ -18,23 +40,27 @@
.result-tile {
cursor: pointer;
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);
box-shadow: var(--shadow-low);
display: flex;
flex-direction: column;
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;
}
.result-tile:hover {
background-color: var(--pico-secondary-background, rgba(0, 0, 0, 0.04));
border-color: var(--pico-primary, #1095c1);
background-color: var(--pico-card-background-color);
border-color: var(--pico-primary);
box-shadow: var(--shadow-medium);
}
.result-tile.highlighted {
border-color: var(--pico-primary, #1095c1);
background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08));
background-color: var(--pico-card-background-color);
border-color: var(--pico-primary);
box-shadow: var(--shadow-medium);
}
.result-value {
@@ -61,8 +87,9 @@
padding: 2rem 1rem;
margin-bottom: 1.5rem;
border-radius: var(--pico-border-radius, 0.25rem);
background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08));
border: 2px solid var(--pico-primary, #1095c1);
background-color: var(--pico-card-background-color);
border: 2px solid var(--pico-primary);
box-shadow: var(--shadow-medium);
display: flex;
flex-direction: column;
align-items: center;