Simplify homepage footer to a single editorial row

The previous footer split into two tiers with four different
interactive styles (plain underlined links, accent inline links,
round icon buttons, and pill CTAs with arrows). The hierarchy was
inverted — the loudest elements (Blog and Newsletter pills) were
secondary author plugs, while the actual primary nav was buried
as quiet underlined text.

Collapse to a single horizontal row with three groups:
  - Impeccable wordmark anchored left
  - 6 nav links centered in the middle column (auto / 1fr / auto grid)
  - "Created by Paul Bakaus" + X + LinkedIn icons anchored right

Removed:
  - Blog and Newsletter pill buttons
  - Two vertical dividers between author elements
  - Horizontal divider between the two former tiers
  - The 36×36 round social-button background fill on hover
  - Persistent underlines on all footer links

Interactive styles consolidated from 4 down to 2: plain text links
(nav + author credit) and inline icon links (socials). Both use the
same color → accent hover transition.

Mobile breakpoint reworked to stack the three groups in a single
centered column at 900px and below.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-07 01:09:02 -07:00
co-authored by Claude Opus 4.6
parent 0566a60dfa
commit 0d59981499
3 changed files with 83 additions and 232 deletions
+35 -96
View File
@@ -4196,138 +4196,77 @@ code {
padding: var(--spacing-xl) var(--spacing-lg);
background: var(--color-cream);
}
.footer-content {
.footer-row {
max-width: var(--width-max);
margin: 0 auto;
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-lg);
}
@media (max-width: 768px) {
.site-footer {
padding: var(--spacing-lg) var(--spacing-md);
}
.footer-content {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
}
.footer-links {
gap: var(--spacing-sm) var(--spacing-md);
justify-content: center;
font-size: 0.8125rem;
}
}
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
gap: var(--spacing-xl);
}
.footer-logo {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 400;
color: var(--color-ink);
}
.footer-tagline {
font-size: 0.875rem;
color: var(--color-ash);
text-decoration: none;
}
.footer-links {
display: flex;
justify-content: center;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.footer-links a {
font-size: 0.875rem;
color: var(--color-ash);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.footer-links a:hover {
color: var(--color-accent);
}
.footer-author {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
flex-wrap: wrap;
width: 100%;
padding-top: var(--spacing-lg);
margin-top: var(--spacing-md);
border-top: 1px solid var(--color-mist);
}
.footer-author-label {
font-size: 0.875rem;
color: var(--color-ash);
}
.footer-author-label a {
color: var(--color-text);
transition: color var(--duration-fast) var(--ease-out);
}
.footer-author-label a:hover {
color: var(--color-accent);
}
.footer-author-links {
.footer-credit {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.875rem;
color: var(--color-ash);
white-space: nowrap;
}
.footer-credit a {
color: var(--color-text);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.footer-credit a:hover {
color: var(--color-accent);
}
.footer-social-link {
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 4px;
color: var(--color-ash);
background: transparent;
border-radius: 50%;
transition: all var(--duration-fast) var(--ease-out);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.footer-social-link:hover {
color: var(--color-accent);
background: var(--color-accent-dim);
}
.footer-author-divider {
width: 1px;
height: 20px;
background: var(--color-mist);
margin: 0 var(--spacing-xs);
}
.footer-newsletter {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
padding: 8px 14px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 100px;
transition: all var(--duration-fast) var(--ease-out);
}
.footer-newsletter:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.footer-newsletter svg {
transition: transform var(--duration-fast) var(--ease-out);
}
.footer-newsletter:hover svg {
transform: translateX(3px);
}
@media (max-width: 768px) {
.footer-author {
flex-direction: column;
gap: var(--spacing-sm);
@media (max-width: 900px) {
.footer-row {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: var(--spacing-md);
}
.footer-author-divider {
display: none;
.footer-links {
justify-content: center;
gap: var(--spacing-sm) var(--spacing-md);
font-size: 0.8125rem;
}
.site-footer {
padding: var(--spacing-lg) var(--spacing-md);
}
}
.btn {