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

feat(typography): upgrade site typography for premium feel

Browse Source 
- Implement 'Playfair Display' serif font for headings
- Refine heading weights, letter-spacing, and line-height
- Add coffee bean SVG list markers
- Style testimonials with serif italics
- Add editorial drop-cap to About section
- Ensure accessible contrast in dark mode
This commit is contained in:
Dustin Newkirk
2026-02-12 09:21:46 -05:00
parent 8883b5487b
commit 7a76d61bd3
2 changed files with 62 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
styles.css
View File

@@ -29,7 +29,7 @@
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Inter', system-ui, sans-serif; /* Could swap for a Serif if linked */
--font-display: 'Playfair Display', Georgia, serif;
/* BS Overrides */
--bs-body-bg: var(--bg-body);
@@ -289,21 +289,22 @@ a {
/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
letter-spacing: -0.04em; /* Tighter */
font-weight: 700;
letter-spacing: -0.02em;
color: currentColor;
margin-bottom: 1rem;
font-family: var(--font-display);
}
h1 {
font-size: clamp(3rem, 6vw, 5rem);
font-size: clamp(3.5rem, 8vw, 5.5rem);
line-height: 1.05;
text-shadow: 2px 2px 0 rgba(0,0,0,0.05);
font-weight: 900;
}
h2 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 4rem;
padding-bottom: 1.5rem;
position: relative;
@@ -313,6 +314,8 @@ h2 {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-style: italic;
}
h2::after {
@@ -495,7 +498,58 @@ section {
}
}
/* List Group (Services) */
/* Drop Cap */
.drop-cap::first-letter {
font-family: var(--font-display);
font-size: 4rem;
line-height: 0.8;
float: left;
margin-right: 0.15em;
margin-top: 0.05em;
color: var(--color-coffee-medium);
font-weight: 900;
}
@media (prefers-color-scheme: dark) {
.drop-cap::first-letter {
color: var(--color-gold);
}
}
/* Custom List Markers (Coffee Beans) */
.list-group-item {
padding-left: 2rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4A574'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.5rem center;
background-size: 1rem;
}
.list-group-item:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231D7874'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
}
/* Testimonial Typography */
.testimonial-quote-icon {
font-family: var(--font-display);
font-style: italic;
}
.testimonial-full, .testimonial-excerpt {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
line-height: 1.8;
}
.testimonial-author {
font-family: var(--font-sans);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8rem;
color: var(--color-coffee-dark);
}
.list-group {
--bs-list-group-bg: transparent;
--bs-list-group-border-color: var(--border-subtle);