h1 { color: #999999; font-size: 2em; margin: 0.2em; } h2 { color: #58aadb; font-size: 1.5em; margin: 0.1em; } li a { color: #1c75b0; } /* Hero image at the top of a post page. Nothing constrained this before, so a 1024px source rendered at whatever width it liked. */ .featured_image img { max-width: 100%; width: auto; height: auto; display: block; margin: 0.5em auto 1.5em; } /* Post listing: thumbnail beside the summary rather than stacked above it. */ .post-row { display: flex; align-items: flex-start; gap: 1.2em; } .post-row-text { flex: 1 1 auto; min-width: 0; /* lets long words wrap instead of stretching the row */ } /* The thumbnail carries both .featured_image and .featured_thumb, so these rules must come after the block above — equal specificity means source order decides. */ .post-row .featured_thumb { flex: 0 0 auto; margin: 0; } .post-row .featured_thumb img { width: 160px; max-width: 160px; height: auto; /* required: the img carries a height attribute for CLS */ margin: 0; border-radius: 4px; } /* Footer social icons — one row, not one per row. The site already has this fix (main.css "SOCIAL MEDIA (Universal Fix)" and styles-dark.css "Fix the Social Media Icons (Single Row)"), both keyed on .social-flex, which the Kiera footer partial now carries. These rules repeat the essentials without !important for two cases those do not cover: - light mode: styles-light.css has no .social-flex rules, so main.css is the only thing holding the row together there; - `hugo server` preview: main.css lives at the site root and 404s locally. Where the site rules do apply they use !important and win, and they agree with these, so there is no conflict. */ footer ul.social { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.75rem; list-style: none; background: none; padding: 0; margin: 1.5rem auto; float: none; /* Kiera floats this list right by default */ } footer ul.social li { margin: 0; padding: 0; list-style: none; background: none; } /* Some themes insert bullet glyphs via pseudo-elements. */ footer ul.social li::before, footer ul.social li::after { content: none; display: none; } /* The icons are an icon font, so they scale with font-size. */ footer ul.social a { display: inline-block; font-size: 1.6rem; line-height: 1; } /* Restore vertical breathing room around the icon row. styles-dark.css draws the footer's top border (#container footer { border-top }) and then its "Nuclear Option for Social Bullets" block applies margin: 0 !important to `#container footer ul.social-flex` as well as to its li. That was aimed at list indentation, but it also flattens the ul's own vertical margin, so the icons sit flush against the border above and the copyright below. That selector is (0,1,2,1) with !important, which outranks main.css's intended `ul.social-flex { margin: 2rem auto }`. Matching both classes gives (0,1,2,2), so this wins and restores that intent. Scoped to the blog deliberately: the same collision affects the main site's footer, but styles-dark.css is shared and that is a separate decision. */ #container footer ul.social.social-flex { margin: 2rem auto !important; } /* Stack again when there is no room to sit side by side. */ @media screen and (max-width: 640px) { .post-row { display: block; } .post-row .featured_thumb img { width: 100%; max-width: 320px; height: auto; margin: 0 0 0.8em; } }