Template:Infobox world/styles.css: Difference between revisions
Template page
More actions
m Scale title icon up to better match the title's font size |
m Re-tune title icon vertical alignment for the 1em size |
||
| (3 intermediate revisions by the same user not shown) | |||
| 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 | ||
width: | shared Template:Infobox/styles.css reset for images inside the header | ||
height: | 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; | |||
} | } | ||
| Line 23: | 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 | ~16px body text at the icon's native size, not this title's larger | ||
font-size -- re-measured live against "Aladra"'s own title text at | |||
the icon's current 1em size: -3px is what actually centres it. | |||
Depends on both the title's font-size and the icon's own size (see | |||
the img rule above), so re-measure again if either one changes rather | |||
than assuming this value still holds. */ | |||
.loka-world-titleicon .loka-icon--bare { | .loka-world-titleicon .loka-icon--bare { | ||
vertical-align: | vertical-align: -3px; | ||
} | } | ||
Latest revision as of 21:29, 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 size, not this title's larger
font-size -- re-measured live against "Aladra"'s own title text at
the icon's current 1em size: -3px is what actually centres it.
Depends on both the title's font-size and the icon's own size (see
the img rule above), so re-measure again if either one changes rather
than assuming this value still holds. */
.loka-world-titleicon .loka-icon--bare {
vertical-align: -3px;
}