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.
Sidebar gap 6rem -> 10rem (previous doubling still read as too small).
About-me page: add a subtle .social-links-divider <hr> between the bio
text and the icon row (8rem gap above it, 3rem below to the icons) -
11rem total separation from the text, up from 3rem, plus a visual
break as requested.
Sidebar: double the standard 3rem section gap above the icon row
(6rem), horizontally centered instead of left-aligned.
About-me page: new .social-links--large variant via a
social_links_variant template var - icons at 5rem (was 1.25rem),
centered, 3rem gap from the preceding text (standard section gap,
distinct from the normal 1rem paragraph gap), wider inter-icon gap
to match the larger size.
Small monochrome icon row (GitHub, LinkedIn, ORCID, Mastodon, Bluesky,
Matrix) rendered from a SOCIAL config tuple via a shared Jinja
partial (templates/includes/social_links.html), included unconditionally
in the sidebar below the tag cloud and again on the About-me page only.
Icons are inline SVGs (templates/icons/*.svg) using fill=currentColor,
so they track the existing accent-color/dark-mode toggle for free via
--main-link-color, no JS needed.
haemka
hmk