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 class="footer-content">
<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">
<a href="#work">The work</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-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-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-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; }
@@ -274,8 +274,8 @@ blockquote p { margin: 0 0 1em; font-style: italic; color: var(--ink); font-size
.footer-wordmark { font-size: 1.1rem; }
}
@media (max-width: 600px) {
.footer-content { align-items: center; justify-content: flex-start; padding: 0 1.5rem; }
.footer-block { align-items: flex-start; transform: scale(0.8); transform-origin: left center; }
.footer-content { position: static; align-items: flex-start; justify-content: flex-start; padding: 1rem 1.5rem 1.5rem; }
.footer-block { align-items: flex-start; }
}
/* Focus */