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.
This commit is contained in:
2026-08-13 17:38:49 +00:00
parent d8e798f3c4
commit 6fbbad0dd7
+10 -3
View File
@@ -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;
}