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

Rito Rhymes
2026-03-16T18:00:52Z

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 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>
Assisted-by: claude-opus-4-6
---
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