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

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