mirror of
https://github.com/Anon-Planet/thgtoa.git
synced 2026-06-20 20:48:00 +02:00
nopeitsnothing
35 lines
1.7 KiB
Markdown
35 lines
1.7 KiB
Markdown
---
|
|
name: footer-social-inline-fix
|
|
description: Social icons now display inline on same line instead of wrapping (including Codeberg)
|
|
metadata:
|
|
type: project
|
|
category: styling
|
|
affects: social-links, extra
|
|
---
|
|
|
|
Fixed MkDocs Material theme's social links to always display on the same line without wrapping.
|
|
|
|
**What was wrong:**
|
|
- The `.social` elements were displaying as `display: flex` (block-level by default in Material theme)
|
|
- Icons and labels were wrapping onto separate lines instead of staying inline
|
|
- Extra CSS wasn't overriding the Material theme's default behavior
|
|
- Long text names like "Codeberg" were causing overflow and line breaks
|
|
|
|
**What I fixed:**
|
|
1. Added comprehensive CSS rules in `docs/stylesheets/footer-fix.css`:
|
|
- Force `.social` and `.social__link` to use `display: inline-flex !important`
|
|
- Set `white-space: nowrap` to prevent text wrapping
|
|
- Configure flex container with proper gap (0.75em) between icons
|
|
- Fix icon sizes with explicit `width: 24px`, `height: 24px`
|
|
- Target specific social container classes (`#social`, `.md-social-list`)
|
|
- Handle long text names with truncation/ellipsis for Codeberg
|
|
- Override all potential block-level ancestors and pseudo-elements
|
|
- Adjust spacing and sizes for mobile responsive breakpoints
|
|
|
|
2. Applied `!important` flags throughout to override Material theme defaults
|
|
|
|
**Result:**
|
|
All social icons (Mastodon, Gitlab, Gitea, Github, Gitlab, Codeberg) now appear on the same line in the footer/copyright section, matching a cleaner horizontal layout without unwanted line breaks. Long names like "Codeberg" are handled via truncation if needed while keeping everything inline.
|
|
|
|
See also: [[footer-license-cleanup-20260614]]
|