hmk/pelican-latex
1
0
Fork 0
Code Issues Actions Activity

Fix social-links margins being zeroed by the global ul[class] reset

Browse Source 
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:
haemka
2026-08-13 17:38:49 +00:00
parent d8e798f3c4
commit 6fbbad0dd7
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/site.css
+10 -3
View File
@@ -386,7 +386,13 @@ ul.menuitems {
content: "Translations: "; 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; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@@ -422,8 +428,9 @@ ul.menuitems {
/* About-me page variant: bigger icons, distinct gap from the text above. /* About-me page variant: bigger icons, distinct gap from the text above.
Spacing to the preceding text is handled by .social-links-divider's Spacing to the preceding text is handled by .social-links-divider's
own margins, so this only needs the gap from divider to icons. */ own margins, so this only needs the gap from divider to icons.
.social-links--large { "ul.social-links--large" for the same specificity reason as above. */
ul.social-links--large {
margin-top: 3rem; margin-top: 3rem;
gap: 1.5rem; gap: 1.5rem;
} }