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

SW footer mobile fix: overlaid logo back to horizontal lockup at 16px (25% smaller); on <=600px the footer content is in normal flow so the footer grows to contain it (fixes the logo spilling above the footer band onto the paper). Verified on mobile viewport. Staging/preview only.

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-24 23:31:26 -07:00
parent e5bdd9baf7
commit 60e5b9483a
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -337,7 +337,7 @@
</div> </div>
<div class="footer-content"> <div class="footer-content">
<div class="footer-block"> <div class="footer-block">
<img class="footer-logo-img" src="assets/logo/logo-stacked-rev.svg" alt="Shop Wisdom" width="59" height="22" /> <img class="footer-logo-img" src="assets/logo/logo-horizontal-rev.svg" alt="Shop Wisdom" width="95" height="16" />
<nav class="footer-links" aria-label="Footer"> <nav class="footer-links" aria-label="Footer">
<a href="#work">The work</a> <a href="#work">The work</a>
<a href="#results">Client results</a> <a href="#results">Client results</a>
style.css
+3 -3
View File
@@ -261,7 +261,7 @@ blockquote p { margin: 0 0 1em; font-style: italic; color: var(--ink); font-size
.footer-content { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1.5rem 2rem; } .footer-content { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1.5rem 2rem; }
.footer-block { display: flex; flex-direction: column; gap: 0.3rem; } .footer-block { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #fff; } .footer-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #fff; }
.footer-logo-img { height: 22px; width: auto; align-self: flex-start; display: block; margin-bottom: 8px; } .footer-logo-img { height: 16px; width: auto; align-self: flex-start; display: block; margin-bottom: 8px; }
.footer-wordmark span { color: var(--accent); } .footer-wordmark span { color: var(--accent); }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; } .footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f7f4ef; text-decoration: none; transition: color 0.3s; } .footer-links a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f7f4ef; text-decoration: none; transition: color 0.3s; }
@@ -274,8 +274,8 @@ blockquote p { margin: 0 0 1em; font-style: italic; color: var(--ink); font-size
.footer-wordmark { font-size: 1.1rem; } .footer-wordmark { font-size: 1.1rem; }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.footer-content { align-items: center; justify-content: flex-start; padding: 0 1.5rem; } .footer-content { position: static; align-items: flex-start; justify-content: flex-start; padding: 1rem 1.5rem 1.5rem; }
.footer-block { align-items: flex-start; transform: scale(0.8); transform-origin: left center; } .footer-block { align-items: flex-start; }
} }
/* Focus */ /* Focus */