[PATCH v1 4/6] add responsive extras and footer layout adjustments to contain overflow

From: Rito Rhymes <rito@ritovision.com>
Date: Mar 14, 2026, 07:59 UTC
Message-ID: <20260314075922.67391-5-rito@ritovision.com>
In-Reply-To: <20260314075922.67391-1-rito@ritovision.com>

Below 848px, fixed-width extras and footer blocks overflow the page and create page-wide horizontal scrolling that breaks layout.

Make extras and footer sections responsive by switching extras to wrapping layout, stacking blogroll/social blocks to full width, and relaxing fixed heights/widths. Update donors to wrap logos and hide manual <br> breaks so the sponsor area reflows naturally on small screens.

Add 550px and 400px refinements to progressively reduce blogroll/social column counts (3 -> 2 -> 1), preventing overlap and preserving readability as viewport width shrinks.

This patch is intentionally limited to extras/footer behavior; content and homepage table overflow handling are addressed separately.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
---
 korgi/static/css/main.css | 84 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index 19ee328..d20d8b6 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -360,4 +360,88 @@ dt {
     #banner li {
         padding: 0 0.5em;
     }
+
+    #extras {
+        width: auto;
+        margin: 1em;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
+    }
+    #extras > div {
+        height: auto;
+    }
+    #extras > .blogroll {
+        float: none;
+        width: 100%;
+        padding: 0.5em 1em;
+        box-sizing: border-box;
+    }
+    #extras > .blogroll ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25em 1em;
+    }
+    #extras > .blogroll li {
+        width: auto;
+        float: none;
+        flex: 1 1 30%;
+    }
+    #extras > .social {
+        float: none;
+        width: 100%;
+        padding: 0.5em 1em;
+        box-sizing: border-box;
+    }
+    #extras > .social ul {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 0.5em;
+    }
+    #extras > .social li {
+        flex: 1 1 30%;
+    }
+
+    #contentinfo {
+        width: auto;
+        margin: 1em;
+        padding-top: 2em;
+    }
+    #donors {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 1em;
+    }
+    #donors br {
+        display: none;
+    }
+    #donors img {
+        max-width: 120px;
+        height: auto;
+    }
+}
+
+@media screen and (max-width: 550px) {
+    #extras > .blogroll li {
+        flex: 1 1 45%;
+    }
+    #extras > .social ul {
+        display: block;
+        columns: 2;
+    }
+    #extras > .social li {
+        flex: none;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    #extras > .blogroll li {
+        flex: 1 1 100%;
+    }
+    #extras > .social ul {
+        columns: 1;
+    }
 }

-- 
2.51.0