Template:Infobox world/styles.css
Template page
More actions
.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;
}