Template:Infobox world/styles.css - Revision history

Kaph: Re-tune title icon vertical alignment for the 1em size

2026-08-22T21:29:38Z

Re-tune title icon vertical alignment for the 1em size

← Older revision		Revision as of 21:29, 22 August 2026
Line 38:		Line 38:
	span actually wrapping it) is the inline element vertical-align needs		span actually wrapping it) is the inline element vertical-align needs
	to target instead. Its own base rule ships -2.5px, tuned for ordinary		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		~16px body text at the icon's native size, not this title's larger
	~~larger~~ font-size ~~nor (since the icon was scaled up to 1.6em to match~~		font-size -- re-measured live against "Aladra"'s own title text at
	~~it) the icon's own larger size match that original context, so the~~		the icon's current 1em size: -3px is what actually centres it.
	~~right offset had to be~~ re-measured ~~for real rather than guessed. Live~~		Depends on both the title's font-size and the icon's own size (see
	against "Aladra"'s own title text at the ~~enlarged 1.6em~~ icon size:		the img rule above), so re-measure again if either one changes rather
	-~~9px~~ is what actually centres it~~, not~~ -~~2.5px (~~and ~~not~~ the ~~0px this~~		than assuming this value still holds. */
	~~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 {		.loka-world-titleicon .loka-icon--bare {
	vertical-align: -~~9px~~;		vertical-align: -3px;
	}		}

Kaph: Size title icon at exactly 1em -- literal parity with the title's own font-size

2026-08-22T21:28:22Z

Size title icon at exactly 1em -- literal parity with the title's own font-size

← Older revision		Revision as of 21:28, 22 August 2026
Line 22:		Line 22:
	winning, silently keeping the icon at its native 14px regardless of		winning, silently keeping the icon at its native 14px regardless of
	this value. */		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 {		.loka-world-title-with-icon .loka-world-titleicon img {
	width: ~~1.6em~~;		width: 1em;
	height: ~~1.6em~~;		height: 1em;
	}		}

Kaph: Re-tune title icon vertical alignment for the enlarged size

2026-08-22T21:22:26Z

Re-tune title icon vertical alignment for the enlarged size

← Older revision		Revision as of 21:22, 22 August 2026
Line 31:		Line 31:
	span actually wrapping it) is the inline element vertical-align needs		span actually wrapping it) is the inline element vertical-align needs
	to target instead. Its own base rule ships -2.5px, tuned for ordinary		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~~		~16px body text at the icon's native ~16px size; neither the title's
	~~1.25em infobox title style~~), so ~~that same offset read as visibly low~~		larger font-size nor (since the icon was scaled up to 1.6em to match
	~~here. Re~~-measured ~~live~~ against "~~The End~~"'s own title text: ~~0px (plain~~		it) the icon's own larger size match that original context, so the
	~~baseline)~~ is what actually centres it ~~at this size~~, not -2.5px. */		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 {		.loka-world-titleicon .loka-icon--bare {
	vertical-align: ~~0px~~;		vertical-align: -9px;
	}		}

Kaph: Fix title icon size being silently overridden by the shared header-text img reset (specificity tie)

2026-08-22T21:21:01Z

Fix title icon size being silently overridden by the shared header-text img reset (specificity tie)

← Older revision		Revision as of 21:21, 22 August 2026
Line 13:		Line 13:
	/* Sized in em, not a fixed px, so it scales together with the title text		/* 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 --		like a character rather than a separately-sized graphic next to it --
	same reasoning as Infobox rank's own titleicon. */		same reasoning as Infobox rank's own titleicon. Selector includes the
	.loka-world-titleicon img {		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;		width: 1.6em;
	height: 1.6em;		height: 1.6em;

Kaph: Scale title icon up to better match the title's font size

2026-08-22T21:18:28Z

Scale title icon up to better match the title's font size

← Older revision		Revision as of 21:18, 22 August 2026
Line 15:		Line 15:
	same reasoning as Infobox rank's own titleicon. */		same reasoning as Infobox rank's own titleicon. */
	.loka-world-titleicon img {		.loka-world-titleicon img {
	width: 1.~~3em~~;		width: 1.6em;
	height: 1.~~3em~~;		height: 1.6em;
	}		}

Kaph: Fix title icon vertical alignment -- target the actual inline element (.loka-icon--bare), not the inert block-level img

2026-08-22T21:16:08Z

Fix title icon vertical alignment -- target the actual inline element (.loka-icon--bare), not the inert block-level img

← Older revision		Revision as of 21:16, 22 August 2026
Line 1:		Line 1:
	.loka-world-title-with-icon {		.loka-world-title-with-icon {
	~~display:~~ inline-flex;		/* Genuinely inline, not inline-flex -- the icon is meant to read as
	~~align~~-~~items: center;~~		part of the title's own text flow (like a leading emoji), not a
	~~gap~~: ~~.35em~~;		separately laid-out box beside it. */
			display: inline;
	white-space: nowrap;		white-space: nowrap;
			}

			.loka-world-titleicon {
			margin-right: .35em;
	}		}

Line 12:		Line 17:
	width: 1.3em;		width: 1.3em;
	height: 1.3em;		height: 1.3em;
	vertical-align: -.~~25em~~;		}

			/* 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;
	}		}

Kaph: Create Infobox world template

2026-08-22T19:46:32Z

Create Infobox world template

New page

.loka-world-title-with-icon {
display: inline-flex;
align-items: center;
gap: .35em;
white-space: nowrap;
}

/* 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.3em;
height: 1.3em;
vertical-align: -.25em;
}