From a12f61af11cdd90080b77c4f6aa7f17739036a66 Mon Sep 17 00:00:00 2001 From: "Henner M. Kruse" Date: Thu, 13 Aug 2026 17:38:49 +0000 Subject: [PATCH] Fix social-links margins being zeroed by the global ul[class] reset The reset rule (body, h1, ..., ul[class], ol[class], ..., dd { margin: 0 }) matches via ul[class] at specificity (0,0,1,1), which beats plain class selectors like .social-links/.social-links--large (0,0,1,0) regardless of source order - so the margin-top values set for both the sidebar gap and the About-me divider-to-icon gap were silently always overridden back to 0. Prefixing both selectors with the ul type selector ties the specificity, letting these (later in the file) win. --- static/css/site.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/static/css/site.css b/static/css/site.css index a34c816..a21c18f 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -386,7 +386,13 @@ ul.menuitems { content: "Translations: "; } -.social-links { +/* "ul.social-links", not ".social-links": the global reset rule + (body, h1, ..., ul[class], ol[class], ..., dd { margin: 0; }) matches + via ul[class] at specificity (0,0,1,1), which beats a plain single-class + selector like ".social-links" (0,0,1,0) regardless of source order. + Adding the "ul" type selector ties it at (0,0,1,1), so this rule (being + later in the file) wins instead of always being zeroed back out. */ +ul.social-links { display: flex; flex-wrap: wrap; justify-content: center; @@ -422,8 +428,9 @@ ul.menuitems { /* About-me page variant: bigger icons, distinct gap from the text above. Spacing to the preceding text is handled by .social-links-divider's - own margins, so this only needs the gap from divider to icons. */ -.social-links--large { + own margins, so this only needs the gap from divider to icons. + "ul.social-links--large" for the same specificity reason as above. */ +ul.social-links--large { margin-top: 3rem; gap: 1.5rem; }