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

feat(ui): add visual hierarchy styles, section separation, and enhanced typography

Browse Source
This commit is contained in:
Dustin Newkirk
2026-02-11 22:58:29 -05:00
parent c3b8d1a9b2
commit 9216f7f976
1 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
styles.css
View File

@@ -17,6 +17,9 @@
--border-subtle: color-mix(in srgb, var(--color-coffee-medium), transparent 85%); --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%); --shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-coffee-dark), transparent 90%);
/* Section Backgrounds */
--bg-section-alt: color-mix(in srgb, var(--color-coffee-medium), transparent 95%);
/* Typography */ /* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
@@ -35,6 +38,7 @@
--bg-surface: color-mix(in srgb, var(--color-coffee-dark), black 20%); --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;
--bg-section-alt: color-mix(in srgb, var(--color-coffee-dark), white 5%);
/* BS Overrides */ /* BS Overrides */
--bs-body-bg: var(--bg-body); --bs-body-bg: var(--bg-body);
@@ -80,11 +84,44 @@ h1 {
} }
h2 { h2 {
font-size: clamp(1.75rem, 3vw, 2.5rem); font-size: clamp(2rem, 4vw, 2.75rem);
margin-top: 3rem; margin-bottom: 3rem;
padding-bottom: 0.5rem; padding-bottom: 1rem;
border-bottom: 2px solid var(--color-secondary); position: relative;
display: inline-block; display: inline-block;
border-bottom: none;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: var(--color-secondary);
border-radius: 2px;
transition: width 0.3s ease;
}
section:hover h2::after {
width: 100%;
}
/* Sections */
section {
position: relative;
width: 100%;
}
.section-alt {
background-color: var(--bg-section-alt);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.section-padding {
padding-block: clamp(4rem, 8vw, 6rem);
} }
/* Header/Hero Section */ /* Header/Hero Section */