josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Repaint theme blue with larger typography

Browse Source 
Swap the cherry-red primary for the logo's blue, bump body 13→15px
and h1 32→40px, and add semantic tokens (--bg-*, --accent-*, --text-*)
so future palette shifts are a single-file edit. Cherry-red survives
only for danger states and the brand cherry mark.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
josh
2026-09-12 12:29:02 -04:00
co-authored by Claude Opus 4.7
parent c3c799a409
commit 47051dc79a
15 changed files with 499 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+30 -30
View File
@@ -121,8 +121,8 @@
<style>
.grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 24px;
grid-template-columns: 1fr 400px;
gap: var(--gap-section);
}
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr; }
@@ -131,76 +131,76 @@
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--cherry-700);
margin-bottom: 28px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.title-block { display: flex; align-items: baseline; gap: 14px; }
.title-block { display: flex; align-items: baseline; gap: 18px; }
h1 {
margin: 0;
font-family: var(--font-display);
font-size: 32px;
font-size: var(--text-3xl);
color: var(--cream);
letter-spacing: 2px;
line-height: 1;
letter-spacing: var(--tracking-display);
line-height: var(--leading-tight);
}
.count {
font-family: var(--font-mono);
font-size: 12px;
font-size: var(--text-sm);
color: var(--ink-500);
letter-spacing: 0.5px;
}
.actions { display: flex; gap: 8px; }
.actions { display: flex; gap: 10px; }
button {
background: var(--cherry-875);
background: var(--bg-card);
color: var(--ink-100);
border: 1px solid var(--cherry-700);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 8px 16px;
padding: 10px 20px;
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
font-size: var(--text-base);
font-weight: 500;
letter-spacing: 0.3px;
transition: border-color 0.15s, box-shadow 0.15s;
}
button:hover:not(:disabled) {
border-color: var(--spark-500);
box-shadow: var(--spark-glow);
border-color: var(--accent);
box-shadow: var(--accent-glow);
}
button.primary {
background: linear-gradient(180deg, var(--cherry-500), var(--cherry-600));
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
color: var(--cream);
border-color: var(--cherry-400);
border-color: var(--blue-400);
font-weight: 600;
}
button.primary:hover:not(:disabled) {
border-color: var(--spark-500);
box-shadow: var(--spark-glow), 0 0 20px rgba(200, 16, 46, 0.4);
box-shadow: var(--spark-glow), 0 0 20px rgba(46, 134, 209, 0.45);
}
button:disabled { opacity: 0.4; cursor: default; }
.cards {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--gap-cards);
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
padding: 40px;
font-size: var(--text-base);
padding: 48px;
text-align: center;
border: 1px dashed var(--cherry-700);
border: 1px dashed var(--border);
border-radius: var(--r-md);
}
.flash {
color: var(--spark-400);
margin: 0 0 16px;
margin: 0 0 20px;
font-family: var(--font-mono);
font-size: 12px;
padding: 10px 14px;
background: rgba(34, 224, 255, 0.06);
border: 1px solid rgba(34, 224, 255, 0.25);
font-size: var(--text-mono);
padding: 12px 16px;
background: rgba(124, 212, 255, 0.06);
border: 1px solid rgba(124, 212, 255, 0.25);
border-radius: var(--r-sm);
}
</style>