denny/desfoto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep the footer brand column readable on narrow viewports

Browse Source
This commit is contained in:
desfoto automation
2026-09-19 18:11:54 +02:00
parent 8ffeea6731
commit 96247da074
3 changed files with 37 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/theme.py
View File

@@ -300,12 +300,15 @@ img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(-
/* ---------- footer ---------- */
.footer{background:var(--ink);color:rgba(246,242,234,.78);padding-block:clamp(2.6rem,5vw,4.4rem) 1.6rem;font-size:.92rem}
.footer a:hover{color:#fff}
.footer__grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(9rem,1fr))}
/* The brand column must keep a real minimum: with minmax(0,…) the auto-fit link
columns at their 9rem floor squeezed it to a few pixels between ~390px and
~960px, so the network/contact headings overlapped the logo and the claim. */
.footer__grid{display:grid;gap:2rem;grid-template-columns:minmax(15rem,1.5fr) repeat(auto-fit,minmax(9rem,1fr))}
.footer__brand .brand{color:var(--paper)}
.footer__brand .brand__mark{box-shadow:0 0 0 1px rgba(246,242,234,.34)}
.footer__claim{margin-top:1rem;max-width:34ch;color:rgba(246,242,234,.66);font-size:.9rem}
.footer h2{font-family:var(--font-sans);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,242,234,.5);margin-bottom:.9rem}
.footer__links{display:grid;gap:.5rem}
.footer__links{display:grid;gap:.5rem;overflow-wrap:anywhere}
.footer__bottom{
margin-top:clamp(2rem,4vw,3.2rem);padding-top:1.2rem;border-top:1px solid rgba(246,242,234,.16);
display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.82rem;color:rgba(246,242,234,.58);
@@ -501,6 +504,10 @@ img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(-
.scroll-cue{display:none}
}
@media (max-width:52rem){
/* Below this width the brand sits on its own full-width row and the four link
columns pair up 2x2, so nothing can overlap. */
.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer__brand{grid-column:1/-1}
.nav{
position:fixed;inset:4.4rem 0 auto;margin:0;
flex-direction:column;align-items:stretch;gap:.15rem;