hobokenchicken/webdev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): coffee colors from dustin.coffee + fix meta quotes

Browse Source 
Ultraworked with Sisyphus

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Dustin Newkirk
2026-02-11 20:08:48 -05:00
parent b5d3866f64
commit 173c7a768b
5 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
styles.css
View File

@@ -1,15 +1,21 @@
:root {
/* Palette */
--color-charcoal: #1a1a1a;
--color-cream: #f8f5f0;
--color-electric-blue: #00b4d8;
/* Palette - Coffee Theme */
--color-coffee-dark: #3b2f2f; /* Dark Roast - Replaces Charcoal */
--color-coffee-medium: #6F4E37; /* Medium Roast */
--color-cream: #F5E8C7; /* Light Roast/Foam */
--color-gold: #D4A574; /* Caramel/Gold Accent */
--color-teal: #1D7874; /* Deep Teal Accent - Optimized for contrast */
--color-orange: #E76F51; /* Warm Orange/Terracotta */
/* Semantic Colors - Light Mode Default */
--bg-body: var(--color-cream);
--text-body: var(--color-charcoal);
--bg-surface: #ffffff;
--border-subtle: color-mix(in srgb, var(--color-charcoal), transparent 90%);
--shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-charcoal), transparent 90%);
--text-body: var(--color-coffee-dark);
--bg-surface: color-mix(in srgb, var(--color-cream), white 40%);
--color-primary: var(--color-teal); /* Replaces Electric Blue */
--color-secondary: var(--color-gold);
--border-subtle: color-mix(in srgb, var(--color-coffee-medium), transparent 85%);
--shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-coffee-dark), transparent 90%);
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
@@ -17,23 +23,23 @@
/* BS Overrides */
--bs-body-bg: var(--bg-body);
--bs-body-color: var(--text-body);
--bs-primary: var(--color-electric-blue);
--bs-primary-rgb: 0, 180, 216;
--bs-primary: var(--color-primary);
--bs-primary-rgb: 42, 157, 143; /* RGB of Teal */
}
@media (prefers-color-scheme: dark) {
:root {
/* Semantic Colors - Dark Mode */
--bg-body: var(--color-charcoal);
--bg-body: var(--color-coffee-dark);
--text-body: var(--color-cream);
--bg-surface: color-mix(in srgb, var(--color-cream), transparent 95%);
--bg-surface: color-mix(in srgb, var(--color-coffee-dark), black 20%);
--border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);
--shadow-soft: 0 4px 20px -2px black;
/* BS Overrides */
--bs-body-bg: var(--bg-body);
--bs-body-color: var(--text-body);
--bs-dark: #121212;
--bs-dark: #1f1a17;
}
}
@@ -48,7 +54,7 @@ body {
}
a {
color: var(--color-electric-blue);
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: text-decoration-color 0.2s;
@@ -77,7 +83,7 @@ h2 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
margin-top: 3rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--color-electric-blue);
border-bottom: 2px solid var(--color-secondary);
display: inline-block;
}
@@ -88,7 +94,7 @@ header {
margin-bottom: 2rem;
h1 {
color: var(--color-electric-blue) !important; /* Force override inline style if present, ideally remove inline */
color: var(--color-coffee-medium) !important; /* Elegant coffee tone for main title */
}
p {
@@ -118,7 +124,7 @@ header {
&:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--shadow-soft);
border-color: var(--color-electric-blue);
border-color: var(--color-secondary);
}
.card-img-top {
@@ -161,19 +167,19 @@ header {
transition: background-color 0.2s;
&:hover {
background-color: color-mix(in srgb, var(--color-electric-blue), transparent 95%);
border-left: 4px solid var(--color-electric-blue);
background-color: color-mix(in srgb, var(--color-primary), transparent 95%);
border-left: 4px solid var(--color-secondary);
}
}
}
/* Footer */
footer {
background-color: var(--color-charcoal) !important;
background-color: var(--color-coffee-dark) !important;
color: var(--color-cream) !important;
padding: 3rem 0;
margin-top: 5rem;
border-top: 4px solid var(--color-electric-blue);
border-top: 4px solid var(--color-secondary);
a {
color: var(--color-cream);
@@ -181,7 +187,7 @@ footer {
&:hover {
opacity: 1;
color: var(--color-electric-blue);
color: var(--color-secondary);
}
}
}
@@ -211,8 +217,8 @@ footer {
/* Utility Overrides for Bootstrap Buttons to match theme */
.btn-primary {
background-color: var(--color-electric-blue);
border-color: var(--color-electric-blue);
background-color: var(--color-primary);
border-color: var(--color-primary);
color: white; /* Electric blue needs white text for contrast */
font-weight: 700;
text-transform: uppercase;
@@ -222,7 +228,7 @@ footer {
border-radius: 50px; /* Pill shape */
&:hover, &:focus, &:active {
background-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important;
border-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important;
background-color: color-mix(in srgb, var(--color-primary), black 10%) !important;
border-color: color-mix(in srgb, var(--color-primary), black 10%) !important;
}
}