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. */
/* Exactly 1em -- the most literal, defensible reading of "parity with
the title's own text size" is matching the font-size number itself,
not a hand-picked multiplier arrived at by guessing (1.3em silently
never took effect at all due to the specificity bug fixed above,
meaning "too small" feedback was actually against the icon's native
14px; 1.6em then overshot to 32px against a 20px title -- neither was
a reasoned choice). */
.loka-world-title-with-icon .loka-world-titleicon img {
width: 1em;
height: 1em;
}
/* 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;
}