From 0d59981499593cab11fc5b3bcd29e14a89aaa074 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Tue, 7 Apr 2026 01:09:02 -0700
Subject: [PATCH] Simplify homepage footer to a single editorial row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 public/css/main.css   | 150 +++++++++++-------------------------------
 public/css/styles.css | 131 ++++++++++--------------------------
 public/index.html     |  34 +++-------
 3 files changed, 83 insertions(+), 232 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index dc77e44ad..a367b583a 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -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);
   }
 }
 
diff --git a/public/css/styles.css b/public/css/styles.css
index 70e3cf62b..314f75dd4 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -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 {
diff --git a/public/index.html b/public/index.html
index 9d64f72cd..066c5ba0e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>