From 4e26ae486be859e348162c3859fc2ee6c6f7e143 Mon Sep 17 00:00:00 2001 From: nopeitsnothing Date: Sun, 14 Jun 2026 14:14:31 -0400 Subject: [PATCH] fix(css): display social links inline on same line - Added CSS rules to force all .social and .social__link elements to use flexbox display instead of block, preventing them from wrapping onto new lines - Force social icons to remain on same line with nowrap white-space - Adjust gap between icons for better spacing (0.75em) - Responsive adjustments for mobile screens - Fixed icon sizes to match inline display requirements --- docs/stylesheets/footer-fix.css | 46 +++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/docs/stylesheets/footer-fix.css b/docs/stylesheets/footer-fix.css index 2379de5..3d76daf 100644 --- a/docs/stylesheets/footer-fix.css +++ b/docs/stylesheets/footer-fix.css @@ -136,6 +136,52 @@ footer > :nth-child(1), } } +/* === SOCIAL LINKS INLINE DISPLAY FIX === */ + +/* Force all social links to display inline on same line */ +.social, +.social__link { + display: inline-flex !important; + align-items: center; + justify-content: flex-start; + white-space: nowrap; + vertical-align: middle; + margin-right: 0.75em !important; +} + +.social svg { + width: 24px !important; + height: 24px !important; +} + +/* Ensure no line breaks between social icons */ +#social { + display: flex !important; + flex-wrap: nowrap !important; + gap: 0.75em !important; + align-items: center; + justify-content: flex-start; +} + +/* Wrap inline with main content instead of creating separate line */ +.md-social, +[data-md-color-scheme="slate"] .md-typeset a[href*="social"] { + display: inline !important; + vertical-align: middle; + margin-right: 0.5em; +} + +@media (max-width: 60em) { + .social { + margin-right: 0.5em !important; + } + + .social svg { + width: 20px !important; + height: 20px !important; + } +} + /* === ACCESSIBILITY FIXES FOR FOOTER === */ @media (prefers-reduced-motion: reduce) {