mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-21 18:47:02 +03:00
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:
co-authored by
Claude Opus 4.6
parent
0566a60dfa
commit
0d59981499
+35
-96
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user