From 3a80907900ea675a87c70cd83ee87ec5ac189c6a Mon Sep 17 00:00:00 2001 From: Nasir Anthony Montalvo Date: Sat, 31 Jan 2026 14:08:12 -0600 Subject: [PATCH] fixing mobile spacing issues --- _sass/_custom.scss | 212 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 161 insertions(+), 51 deletions(-) diff --git a/_sass/_custom.scss b/_sass/_custom.scss index 265b9d0..486d69c 100644 --- a/_sass/_custom.scss +++ b/_sass/_custom.scss @@ -936,19 +936,6 @@ blockquote { margin-left: auto; margin-right: auto; } - - #scroll-to-top { - position: fixed; - bottom: 4.5rem; - right: var(--space-md); - z-index: 9999; - transition: transform var(--transition-normal), box-shadow var(--transition-normal); - } -} - -#scroll-to-top:hover { - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } /* ============================================================================ @@ -966,7 +953,6 @@ blockquote { padding: 0 var(--space-xl); margin: 0 auto; } - #about-contents-wrapper ul { font-size: var(--text-base); } @@ -1224,54 +1210,178 @@ blockquote { text-align: center; } + /* ============================================================================ - SEARCH SUGGESTIONS + GLOBAL MOBILE OVERFLOW FIX ============================================================================ */ -.suggestions-container { - position: absolute; - width: 100%; - max-height: 200px; - overflow-y: auto; - background-color: white; - border: var(--border-width) solid #ccc; - z-index: 100; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +/* 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; + max-width: 100vw; } -.suggestion-item { - padding: 8px; - cursor: pointer; +body { + overflow-x: hidden; + max-width: 100vw; + /* Forces the body to respect the viewport in landscape too */ + min-width: 0; } -.suggestion-item:hover { - background-color: #f0f0f0; +/* Catch-all: any block element that might overflow */ +*, +*::before, +*::after { + max-width: 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. */ +figure { + max-width: 100% !important; +} + +@media (max-width: 768px) { + figure[style*="inline-block"] { + display: block !important; + } + + /* The grid figures on Soakies (side-by-side photos) stack on mobile */ + figure[style*="grid-template-columns"] { + display: block !important; + } + + figure[style*="grid-template-columns"] > div { + margin-bottom: 1rem; + } + + figure[style*="grid-template-columns"] img { + max-width: 100% !important; + width: 100% !important; + } +} + /* ============================================================================ - FOOTNOTES + SCROLL TO TOP - FULL STYLING (all viewports) ============================================================================ */ - .footnotes a { - display: inline-block; + +#scroll-to-top { + position: fixed; + bottom: 1.5rem; + right: 1.5rem; + z-index: 9999; + width: 40px; + height: 40px; + display: none; /* JS handles show/hide */ + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.65); + border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important; + border-radius: 50%; + color: rgba(255, 255, 255, 0.85) !important; + text-decoration: none; + transition: border-color var(--transition-normal), color var(--transition-normal), transform var(--transition-normal); + /* Keep it out of the layout flow entirely */ + margin: 0 !important; + padding: 0 !important; +} + +#scroll-to-top[style*="block"] { + display: flex !important; +} + +#scroll-to-top:hover { + border-color: rgba(255, 255, 255, 0.75); + color: #ffffff !important; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +#scroll-to-top svg { + width: 16px; + height: 16px; + fill: currentColor; +} + +@media (max-width: 768px) { + #scroll-to-top { + bottom: 1rem; + right: 1rem; + width: 36px; + height: 36px; + } +} + +/* ============================================================================ + 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, +h3 + p { + overflow-x: hidden; + max-width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; +} + +/* Footnotes (extends your existing fix to be more thorough) */ +.footnotes { + overflow-x: hidden; + max-width: 100%; +} + +.footnotes p, +.footnotes ol li { word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; - text-overflow: ellipsis; } - - @media (max-width: 768px) { - .footnotes p { - font-size: 14px; - } - - .footnotes a { - font-size: 12px; - } - } - .footnotes p { - word-wrap: break-word; - word-break: break-all; - } - .footnotes { - overflow-x: hidden; - max-width: 100%; - } \ No newline at end of file + +.footnotes a { + display: inline; + word-wrap: break-word; + overflow-wrap: break-word; + 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; + display: block; +} + +@media (max-width: 768px) { + .footnotes p, + .footnotes ol li { + font-size: 0.875rem; + } + + .footnotes a { + font-size: 0.8rem; + } +} \ No newline at end of file