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

1
dist/assets/index-BDKv4rRo.css vendored Normal file
View File

@@ -0,0 +1 @@
:root{--color-coffee-dark: #3b2f2f;--color-coffee-medium: #6F4E37;--color-cream: #F5E8C7;--color-gold: #D4A574;--color-teal: #1D7874;--color-orange: #E76F51;--bg-body: var(--color-cream);--text-body: var(--color-coffee-dark);--bg-surface: color-mix(in srgb, var(--color-cream), white 40%);--color-primary: var(--color-teal);--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%);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-primary: var(--color-primary);--bs-primary-rgb: 42, 157, 143}@media(prefers-color-scheme:dark){:root{--bg-body: var(--color-coffee-dark);--text-body: var(--color-cream);--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-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-dark: #1f1a17}}body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}a{color:var(--color-primary);text-decoration:none;font-weight:600;transition:text-decoration-color .2s}a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.03em;color:currentColor;margin-bottom:1rem}h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.1}h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-top:3rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-secondary);display:inline-block}header{background-color:var(--bg-body);padding:3rem 1rem;margin-bottom:2rem}header h1{color:var(--color-coffee-medium)!important}header p{font-size:1.25rem;opacity:.8;max-width:600px;margin-inline:auto}.card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s ease;height:100%;view-timeline-name:--card-entry;view-timeline-axis:block;animation:fade-in-up linear both;animation-timeline:view();animation-range:entry 10% cover 20%}.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-soft);border-color:var(--color-secondary)}.card .card-img-top{aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}.card:hover .card-img-top{transform:scale(1.05)}.card .card-body{padding:1.5rem;display:flex;flex-direction:column}.card .card-body h5.card-title{font-size:1.25rem;margin-bottom:.75rem}.card .card-body p.card-text{font-size:.95rem;opacity:.9;flex-grow:1}.list-group{--bs-list-group-bg: transparent;--bs-list-group-border-color: var(--border-subtle)}.list-group .list-group-item{background-color:var(--bg-surface);border-color:var(--border-subtle);font-weight:500;transition:background-color .2s}.list-group .list-group-item:hover{background-color:color-mix(in srgb,var(--color-primary),transparent 95%);border-left:4px solid var(--color-secondary)}footer{background-color:var(--color-coffee-dark)!important;color:var(--color-cream)!important;padding:3rem 0;margin-top:5rem;border-top:4px solid var(--color-secondary)}footer a{color:var(--color-cream);opacity:.7}footer a:hover{opacity:1;color:var(--color-secondary)}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card-body{container-type:inline-size}@container (max-width: 300px){.card-title{font-size:1.1rem}}.btn-primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;padding:.6em 1.2em;border-radius:50px}.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:color-mix(in srgb,var(--color-primary),black 10%)!important;border-color:color-mix(in srgb,var(--color-primary),black 10%)!important}

1
dist/assets/index-DihxhKIl.css vendored
View File

@@ -1 +0,0 @@
:root{--color-charcoal: #1a1a1a;--color-cream: #f8f5f0;--color-electric-blue: #00b4d8;--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%);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-primary: var(--color-electric-blue);--bs-primary-rgb: 0, 180, 216}@media(prefers-color-scheme:dark){:root{--bg-body: var(--color-charcoal);--text-body: var(--color-cream);--bg-surface: color-mix(in srgb, var(--color-cream), transparent 95%);--border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);--shadow-soft: 0 4px 20px -2px black;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-dark: #121212}}body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}a{color:var(--color-electric-blue);text-decoration:none;font-weight:600;transition:text-decoration-color .2s}a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.03em;color:currentColor;margin-bottom:1rem}h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.1}h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-top:3rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-electric-blue);display:inline-block}header{background-color:var(--bg-body);padding:3rem 1rem;margin-bottom:2rem}header h1{color:var(--color-electric-blue)!important}header p{font-size:1.25rem;opacity:.8;max-width:600px;margin-inline:auto}.card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s ease;height:100%;view-timeline-name:--card-entry;view-timeline-axis:block;animation:fade-in-up linear both;animation-timeline:view();animation-range:entry 10% cover 20%}.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-soft);border-color:var(--color-electric-blue)}.card .card-img-top{aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}.card:hover .card-img-top{transform:scale(1.05)}.card .card-body{padding:1.5rem;display:flex;flex-direction:column}.card .card-body h5.card-title{font-size:1.25rem;margin-bottom:.75rem}.card .card-body p.card-text{font-size:.95rem;opacity:.9;flex-grow:1}.list-group{--bs-list-group-bg: transparent;--bs-list-group-border-color: var(--border-subtle)}.list-group .list-group-item{background-color:var(--bg-surface);border-color:var(--border-subtle);font-weight:500;transition:background-color .2s}.list-group .list-group-item:hover{background-color:color-mix(in srgb,var(--color-electric-blue),transparent 95%);border-left:4px solid var(--color-electric-blue)}footer{background-color:var(--color-charcoal)!important;color:var(--color-cream)!important;padding:3rem 0;margin-top:5rem;border-top:4px solid var(--color-electric-blue)}footer a{color:var(--color-cream);opacity:.7}footer a:hover{opacity:1;color:var(--color-electric-blue)}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card-body{container-type:inline-size}@container (max-width: 300px){.card-title{font-size:1.1rem}}.btn-primary{background-color:var(--color-electric-blue);border-color:var(--color-electric-blue);color:#fff;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;padding:.6em 1.2em;border-radius:50px}.btn-primary:hover,.btn-primary:focus,.btn-primary: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}

4
dist/index.html vendored
View File

@@ -7,7 +7,7 @@
<meta name="keywords" content="web development, custom websites, responsive design, e-commerce, SEO, website maintenance"> <meta name="keywords" content="web development, custom websites, responsive design, e-commerce, SEO, website maintenance">
<meta name="author" content="Dustin Newkirk"> <meta name="author" content="Dustin Newkirk">
<link rel="canonical" href="https://dev.dustin.coffee/index.html"> <link rel="canonical" href="https://dev.dustin.coffee/index.html">
<title>d@n tech - Web Development Services</title>\n <!-- SEO Open Graph / Twitter -->\n <meta property=\"og:title\" content=\"d@n tech - Web Development Services\">\n <meta property=\"og:description\" content=\"Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta property=\"og:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <meta property=\"og:url\" content=\"https://dev.dustin.coffee\">\n <meta property=\"og:type\" content=\"website\">\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"d@n tech - Web Development Services\">\n <meta name=\"twitter:description\" content=\"Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta name=\"twitter:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <!-- Google Fonts: Inter --> <title>d@n tech - Web Development Services</title>\n <!-- SEO Open Graph / Twitter -->\n <meta property="og:title" content="d@n tech" - Web Development Services\">\n <meta property="og:description" content="Professional web development services": custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta property="og:image" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <meta property="og:url" content=\"https://dev.dustin.coffee\">\n <meta property=\"og:type\" content=\"website\">\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content="d@n tech" - Web Development Services\">\n <meta name=\"twitter:description\" content="Professional web development services": custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta name=\"twitter:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
@@ -20,7 +20,7 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
</style> </style>
<link rel="stylesheet" crossorigin href="/assets/index-BDKv4rRo.css"> <link rel="stylesheet" crossorigin href="/assets/index-BDKv4rRo.css">
</head> </head>
<body> <body>

2
index.html
View File

@@ -7,7 +7,7 @@
<meta name="keywords" content="web development, custom websites, responsive design, e-commerce, SEO, website maintenance"> <meta name="keywords" content="web development, custom websites, responsive design, e-commerce, SEO, website maintenance">
<meta name="author" content="Dustin Newkirk"> <meta name="author" content="Dustin Newkirk">
<link rel="canonical" href="https://dev.dustin.coffee/index.html"> <link rel="canonical" href="https://dev.dustin.coffee/index.html">
<title>d@n tech - Web Development Services</title>\n <!-- SEO Open Graph / Twitter -->\n <meta property=\"og:title\" content=\"d@n tech - Web Development Services\">\n <meta property=\"og:description\" content=\"Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta property=\"og:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <meta property=\"og:url\" content=\"https://dev.dustin.coffee\">\n <meta property=\"og:type\" content=\"website\">\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"d@n tech - Web Development Services\">\n <meta name=\"twitter:description\" content=\"Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta name=\"twitter:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <!-- Google Fonts: Inter --> <title>d@n tech - Web Development Services</title>\n <!-- SEO Open Graph / Twitter -->\n <meta property="og:title" content="d@n tech" - Web Development Services\">\n <meta property="og:description" content="Professional web development services": custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta property="og:image" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <meta property="og:url" content=\"https://dev.dustin.coffee\">\n <meta property=\"og:type\" content=\"website\">\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content="d@n tech" - Web Development Services\">\n <meta name=\"twitter:description\" content="Professional web development services": custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta name=\"twitter:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">

58
styles.css
View File

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