Template:Infobox world/styles.css: Difference between revisions
Template page
More actions
m Fix title icon vertical alignment -- target the actual inline element (.loka-icon--bare), not the inert block-level img |
m Scale title icon up to better match the title's font size |
||
| Line 15: | Line 15: | ||
same reasoning as Infobox rank's own titleicon. */ | same reasoning as Infobox rank's own titleicon. */ | ||
.loka-world-titleicon img { | .loka-world-titleicon img { | ||
width: 1. | width: 1.6em; | ||
height: 1. | height: 1.6em; | ||
} | } | ||
Revision as of 21:18, 22 August 2026
.loka-world-title-with-icon {
/* Genuinely inline, not inline-flex -- the icon is meant to read as
part of the title's own text flow (like a leading emoji), not a
separately laid-out box beside it. */
display: inline;
white-space: nowrap;
}
.loka-world-titleicon {
margin-right: .35em;
}
/* Sized in em, not a fixed px, so it scales together with the title text
like a character rather than a separately-sized graphic next to it --
same reasoning as Infobox rank's own titleicon. */
.loka-world-titleicon img {
width: 1.6em;
height: 1.6em;
}
/* The img itself is display:block (Template:Icon's own .loka-icon--bare
img rule), so vertical-align on IT is inert -- .loka-icon--bare (the
span actually wrapping it) is the inline element vertical-align needs
to target instead. Its own base rule ships -2.5px, tuned for ordinary
~16px body text; this title's font-size is much larger (the shared
1.25em infobox title style), so that same offset read as visibly low
here. Re-measured live against "The End"'s own title text: 0px (plain
baseline) is what actually centres it at this size, not -2.5px. */
.loka-world-titleicon .loka-icon--bare {
vertical-align: 0px;
}