Template:Infobox world/styles.css: Difference between revisions

Revision as of 21:28, 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. 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;
}