From fa540605c2db20afb66e21bbe7a9678291ba47e0 Mon Sep 17 00:00:00 2001 From: Nasir Anthony Montalvo Date: Wed, 18 Feb 2026 23:08:08 -0600 Subject: [PATCH] next round of horiztonal scroll fixes --- _sass/_custom.scss | 47 +++++++++++++++++++++------------------------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/_sass/_custom.scss b/_sass/_custom.scss index 7d66e6b..d64d983 100644 --- a/_sass/_custom.scss +++ b/_sass/_custom.scss @@ -38,7 +38,7 @@ --letter-spacing-wider: 0.16em; --letter-spacing-widest: 0.18em; - /* SPACING SCALE (consistent increments) */ + /* SPACING SCALE */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ @@ -48,8 +48,8 @@ --space-3xl: 3rem; /* 48px */ /* BORDERS & RADIUS */ - --border-radius: 4px; /* consistent everywhere */ - --border-radius-lg: 10px; /* only for home title box */ + --border-radius: 4px; + --border-radius-lg: 10px; --border-width: 1px; --border-color-subtle: rgba(255, 255, 255, 0.18); --border-color-normal: rgba(255, 255, 255, 0.35); @@ -1136,7 +1136,7 @@ blockquote { transition: background-color var(--transition-normal); } -/* Middle line - using a span */ +/* Middle line */ .navbar-toggler-icon { background: linear-gradient( to bottom, @@ -1215,23 +1215,25 @@ blockquote { GLOBAL MOBILE OVERFLOW FIX ============================================================================ */ -/* Prevents ANY element from expanding the page width horizontally. - This is the single most important rule for the zoom-out bug on mobile. */ html { overflow-x: hidden; - box-sizing: border-box; } -/* Catch-all: any block element that might overflow */ *, *::before, *::after { - box-sizing: 100%; box-sizing: border-box; } -/* Soakies page uses inline
elements with style="display: inline-block; max-width: 75%" - These don't respect overflow-x on their parent. Force them to block on mobile. */ +img, +video, +iframe, +embed, +object { + max-width: 100%; + height: auto; +} + figure { max-width: 100% !important; } @@ -1241,7 +1243,6 @@ figure { display: block !important; } - /* The grid figures on Soakies (side-by-side photos) stack on mobile */ figure[style*="grid-template-columns"] { display: block !important; } @@ -1260,30 +1261,28 @@ figure { SCROLL TO TOP - FULL STYLING (all viewports) ============================================================================ */ - #scroll-to-top { - position: fixed; - bottom: 4.5rem; - right: 1rem; - z-index: 9999; - transition: transform 0.2s ease, box-shadow 0.2s ease; - } +#scroll-to-top { + position: fixed; + bottom: 4.5rem; + right: 1rem; + z-index: 9999; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + #scroll-to-top:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } - /* ============================================================================ LONG LINKS & BIBLIOGRAPHY - OVERFLOW FIX ============================================================================ */ -/* Global link wrapping - catches everything */ a { word-wrap: break-word; overflow-wrap: break-word; } -/* Bibliography section - Jekyll renders ### Bibliography as h3, content follows as

tags */ .bibliography, h3 + ol, h3 + ul, @@ -1294,7 +1293,6 @@ h3 + p { overflow-wrap: break-word; } -/* Footnotes (extends your existing fix to be more thorough) */ .footnotes { overflow-x: hidden; max-width: 100%; @@ -1314,20 +1312,17 @@ h3 + p { max-width: 100%; } -/* Jekyll footnote markers */ .footnote-ref, .footnote-backref { word-wrap: break-word; overflow-wrap: break-word; } -/* Any

or

  • that contains long URLs */ p, li, td { word-wrap: break-word; overflow-wrap: break-word; } -/* Tables - prevent horizontal overflow */ table { max-width: 100%; overflow-x: auto;