mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +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:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
0566a60dfa
commit
0d59981499
+40
-110
@@ -1981,38 +1981,15 @@ code {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
/* Single horizontal row: wordmark left, nav centered, credit right.
|
||||
Three groups, no two-tier split, no dividers. */
|
||||
.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 {
|
||||
@@ -2020,15 +1997,12 @@ code {
|
||||
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;
|
||||
}
|
||||
@@ -2036,6 +2010,7 @@ code {
|
||||
.footer-links a {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ash);
|
||||
text-decoration: none;
|
||||
transition: color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
@@ -2043,99 +2018,54 @@ code {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+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 {
|
||||
|
||||
+8
-26
@@ -674,46 +674,28 @@
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">Impeccable</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<div class="footer-row">
|
||||
<span class="footer-logo">Impeccable</span>
|
||||
<nav class="footer-links" aria-label="Footer">
|
||||
<a href="#antidote">Anti-Patterns</a>
|
||||
<a href="/gallery">Gallery of Shame</a>
|
||||
<a href="#language">Commands</a>
|
||||
<a href="/cheatsheet">Cheatsheet</a>
|
||||
<a href="/privacy">Privacy</a>
|
||||
<a href="https://github.com/pbakaus/impeccable">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-author">
|
||||
<span class="footer-author-label">Created by <a href="https://x.com/pbakaus" target="_blank" rel="noopener">Paul Bakaus</a></span>
|
||||
<div class="footer-author-links">
|
||||
</nav>
|
||||
<div class="footer-credit">
|
||||
<span>Created by <a href="https://x.com/pbakaus" target="_blank" rel="noopener">Paul Bakaus</a></span>
|
||||
<a href="https://x.com/pbakaus" class="footer-social-link" aria-label="Follow on X" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/paulbakaus" class="footer-social-link" aria-label="Connect on LinkedIn" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="footer-author-divider"></span>
|
||||
<a href="https://www.paulbakaus.com" class="footer-newsletter" target="_blank" rel="noopener">
|
||||
Blog
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="footer-author-divider"></span>
|
||||
<a href="https://impeccablestyle.substack.com" class="footer-newsletter" target="_blank" rel="noopener">
|
||||
Newsletter
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user