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. Selector includes the
wrapper (not just ".loka-world-titleicon img") so this outranks the
shared Template:Infobox/styles.css reset for images inside the header
photo's text overlay (".loka-infobox-header-text img", width/height:
auto -- needed there to un-break the icon going invisible when a
headerimage is set, see that rule's own comment) -- confirmed live: at
equal specificity the two tied and the later-loaded shared rule was
winning, silently keeping the icon at its native 14px regardless of
this value. */
.loka-world-title-with-icon .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 at the icon's native ~16px size; neither the title's
larger font-size nor (since the icon was scaled up to 1.6em to match
it) the icon's own larger size match that original context, so the
right offset had to be re-measured for real rather than guessed. Live
against "Aladra"'s own title text at the enlarged 1.6em icon size:
-9px is what actually centres it, not -2.5px (and not the 0px this
measured to before the icon was enlarged -- re-measure again if the
icon's own size ever changes, this isn't a fixed constant). */
.loka-world-titleicon .loka-icon--bare {
vertical-align: -9px;
}