Template:Hlist/styles.css - Revision history

Kaph: Use inline-flex instead of flex so Hlist flows inline after preceding text (e.g. a bold rank label) instead of always starting a new line

2026-08-24T00:13:20Z

Use inline-flex instead of flex so Hlist flows inline after preceding text (e.g. a bold rank label) instead of always starting a new line

← Older revision		Revision as of 00:13, 24 August 2026
Line 1:		Line 1:
	/* flex + flex-wrap, not display:inline -- confirmed live that plain		/* flex + flex-wrap, not display:inline — confirmed live that plain
	inline <li>s with no whitespace text node between them (the dot's		inline <li>s with no whitespace text node between them (the dot's
	spacing comes from CSS margin now, not a literal space -- see		spacing comes from CSS margin now, not a literal space — see
	_gen_hlist.py) never got a line-break opportunity between items at		_gen_hlist.py) never got a line-break opportunity between items at
	all, so a long list just overflowed its cell/table width instead of		all, so a long list just overflowed its cell/table width instead of
Line 7:		Line 7:
	scroll to show a 6-name row). Flex items wrap regardless of markup		scroll to show a 6-name row). Flex items wrap regardless of markup
	whitespace, so this fixes it without bringing the space-collapsing		whitespace, so this fixes it without bringing the space-collapsing
	problem back. */		problem back.
			inline-flex, not flex — a block-level flex container always
			starts on its own line, which forced the list onto a new row when
			used right after other inline text (e.g. a bold "Slicer:" label on
			Promotions). inline-flex keeps the same wrapping behaviour for the
			items inside while letting the list itself flow inline. */
	.loka-hlist {		.loka-hlist {
	list-style: none;		list-style: none;
	margin: 0;		margin: 0;
	padding: 0;		padding: 0;
	display: flex;		display: inline-flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	}		}
Line 22:		Line 27:
	/* Hides the separator dot (and its margins) on whichever item ends up		/* Hides the separator dot (and its margins) on whichever item ends up
	first (the dot itself lives in the template's own HTML output, not		first (the dot itself lives in the template's own HTML output, not
	here -- see the comment in _gen_hlist.py for why). */		here — see the comment in _gen_hlist.py for why). */
	.loka-hlist li:first-child .loka-hlist-sep {		.loka-hlist li:first-child .loka-hlist-sep {
	display: none;		display: none;

Kaph: Create Template:Hlist/styles.css

2026-08-23T10:48:00Z

Create Template:Hlist/styles.css

← Older revision		Revision as of 10:48, 23 August 2026
Line 1:		Line 1:
			/* flex + flex-wrap, not display:inline -- confirmed live that plain
			inline <li>s with no whitespace text node between them (the dot's
			spacing comes from CSS margin now, not a literal space -- see
			_gen_hlist.py) never got a line-break opportunity between items at
			all, so a long list just overflowed its cell/table width instead of
			wrapping (this was the direct cause of a table needing horizontal
			scroll to show a 6-name row). Flex items wrap regardless of markup
			whitespace, so this fixes it without bringing the space-collapsing
			problem back. */
	.loka-hlist {		.loka-hlist {
	list-style: none;		list-style: none;
	margin: 0;		margin: 0;
	padding: 0;		padding: 0;
	display: ~~inline~~;		display: flex;
	}		flex-wrap: wrap;

	~~.loka~~-~~hlist li {~~
	~~display~~: ~~inline~~;
	}		}

Line 22:		Line 28:

	.loka-hlist--stacked {		.loka-hlist--stacked {
	~~display: block;~~		flex-direction: column;
	}

	~~.loka-hlist-~~-~~stacked li {~~
	~~display~~: ~~block~~;
	}		}

Kaph: Create Template:Hlist/styles.css

2026-08-22T23:15:56Z

Create Template:Hlist/styles.css

← Older revision		Revision as of 23:15, 22 August 2026
Line 10:		Line 10:
	}		}

	/* Hides the separator dot on whichever item ends up first (the dot		.loka-hlist-sep {
	itself lives in the template's own HTML output, not here -- see the		margin: 0 .3em;
	comment in _gen_hlist.py for why). */		}

			/* Hides the separator dot (and its margins) on whichever item ends up
			first (the dot itself lives in the template's own HTML output, not
			here -- see the comment in _gen_hlist.py for why). */
	.loka-hlist li:first-child .loka-hlist-sep {		.loka-hlist li:first-child .loka-hlist-sep {
	display: none;		display: none;

Kaph: Create Template:Hlist/styles.css

2026-08-22T22:55:06Z

Create Template:Hlist/styles.css

← Older revision		Revision as of 22:55, 22 August 2026
Line 10:		Line 10:
	}		}

	/* ~~Middle~~ dot~~, not a comma -- matches Wikipedia's own hlist convention.~~		/* Hides the separator dot on whichever item ends up first (the dot
	~~Six-digit hex escape~~ (~~rather than \00B7 followed by a space) so~~ the		itself lives in the template's own HTML output, not here -- see the
	~~space after it survives as literal content instead of being consumed~~		comment in _gen_hlist.py for why). */
	as the ~~escape~~'s own ~~whitespace terminator~~ -- ~~confirmed live that~~ the		.loka-hlist li:first-child .loka-hlist-sep {
	~~short form silently ate the trailing space, leaving "text ·text"~~		display: none;
	~~with no gap after the dot~~. */
	.loka-hlist li:~~not(:last~~-child~~)::after~~ {
	~~content~~: ~~" \0000B7 "~~;
	}		}

Line 28:		Line 25:
	}		}

	.loka-hlist--stacked ~~li:not(:last~~-~~child)::after~~ {		.loka-hlist--stacked .loka-hlist-sep {
	~~content~~: none;		display: none;
	}		}

Kaph: Create Template:Hlist/styles.css

2026-08-22T22:52:17Z

Create Template:Hlist/styles.css

← Older revision		Revision as of 22:52, 22 August 2026
Line 10:		Line 10:
	}		}

	/* Middle dot, not a comma -- matches Wikipedia's own hlist convention. */		/* Middle dot, not a comma -- matches Wikipedia's own hlist convention.
			Six-digit hex escape (rather than \00B7 followed by a space) so the
			space after it survives as literal content instead of being consumed
			as the escape's own whitespace terminator -- confirmed live that the
			short form silently ate the trailing space, leaving "text ·text"
			with no gap after the dot. */
	.loka-hlist li:not(:last-child)::after {		.loka-hlist li:not(:last-child)::after {
	content: " \~~00B7~~ ";		content: " \0000B7 ";
	}		}

Kaph: Create Template:Hlist/styles.css

2026-08-22T22:51:00Z

Create Template:Hlist/styles.css

New page

.loka-hlist {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}

.loka-hlist li {
display: inline;
}

/* Middle dot, not a comma -- matches Wikipedia's own hlist convention. */
.loka-hlist li:not(:last-child)::after {
content: " \00B7 ";
}

.loka-hlist--stacked {
display: block;
}

.loka-hlist--stacked li {
display: block;
}

.loka-hlist--stacked li:not(:last-child)::after {
content: none;
}