Kaph: Fix stance label column not lining up (was auto-width, hugging each row's own text) and widen cards for less cramped wrapping on desktop

2026-08-24T02:49:56Z

Fix stance label column not lining up (was auto-width, hugging each row's own text) and widen cards for less cramped wrapping on desktop

← Older revision		Revision as of 02:49, 24 August 2026
Line 1:		Line 1:
	.loka-policy-grid {		.loka-policy-grid {
	display: grid;		display: grid;
	grid-template-columns: repeat(auto-fill, minmax(~~260px~~, 1fr));		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: .8em;		gap: .8em;
	margin: 1em 0;		margin: 1em 0;
Line 46:		Line 46:
	}		}

			/* Fixed instead of auto so the description column lines up at the same
			x-position on every row -- both between a card's own stances (Neutral
			is shorter than Oppressive) and across every card in the grid, since
			auto-width let each row's label hug its own text instead. Sized to
			fit "OPPRESSIVE", the longest label, at its own .78em/.03em-tracked
			font size. */
	.loka-policy-stance-label {		.loka-policy-stance-label {
	flex: 0 0 ~~auto~~;		flex: 0 0 4.8em;
	font-weight: 700;		font-weight: 700;
	font-size: .78em;		font-size: .78em;
Line 56:		Line 62:

	/* Same green/amber/red convention already used across the wiki for a		/* Same green/amber/red convention already used across the wiki for a
	tri-state -- green for the everyone-benefits option, amber matching		tri-state — green for the everyone-benefits option, amber matching
	the infobox type-ribbon's "default/standard" gold, red for the		the infobox type-ribbon's "default/standard" gold, red for the
	exclusionary one. Light-mode swaps to the same darker equivalents		exclusionary one. Light-mode swaps to the same darker equivalents
Line 76:		Line 82:

	/* A single always-on perk (e.g. World Capital's Eminent Domain) isn't a		/* A single always-on perk (e.g. World Capital's Eminent Domain) isn't a
	stance choice, so it doesn't fit the card grid above -- a small		stance choice, so it doesn't fit the card grid above — a small
	highlighted callout instead, in the same amber used for "neutral"		highlighted callout instead, in the same amber used for "neutral"
	above, since it reads as the same kind of "standard, no alliance		above, since it reads as the same kind of "standard, no alliance

Kaph: Create Template:Policy -- a card for one capital policy's Benevolent/Neutral/Oppressive stances

2026-08-23T13:15:44Z

Create Template:Policy -- a card for one capital policy's Benevolent/Neutral/Oppressive stances

New page

.loka-policy-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: .8em;
margin: 1em 0;
}

.loka-policy-card {
background: rgba(255, 255, 255, .035);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 6px;
padding: .7em .9em;
}

@media (prefers-color-scheme: light) {
.loka-policy-card {
background: rgba(0, 0, 0, .02);
border-color: rgba(0, 0, 0, .1);
}
}

.loka-policy-name {
font-weight: 700;
font-size: 1.02em;
margin-bottom: .5em;
padding-bottom: .35em;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: light) {
.loka-policy-name {
border-bottom-color: rgba(0, 0, 0, .1);
}
}

.loka-policy-stance {
display: flex;
gap: .5em;
align-items: baseline;
font-size: .88em;
line-height: 1.4;
}

.loka-policy-stance + .loka-policy-stance {
margin-top: .5em;
}

.loka-policy-stance-label {
flex: 0 0 auto;
font-weight: 700;
font-size: .78em;
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}

/* Same green/amber/red convention already used across the wiki for a
tri-state -- green for the everyone-benefits option, amber matching
the infobox type-ribbon's "default/standard" gold, red for the
exclusionary one. Light-mode swaps to the same darker equivalents
Infobox rank/website already use, for the same "washes out on a
light background" reason. */
.loka-policy-stance--benevolent .loka-policy-stance-label { color: #54FC54; }
.loka-policy-stance--neutral .loka-policy-stance-label { color: #f0cf8e; }
.loka-policy-stance--oppressive .loka-policy-stance-label { color: #FC5454; }

@media (prefers-color-scheme: light) {
.loka-policy-stance--benevolent .loka-policy-stance-label { color: #2E7D32; }
.loka-policy-stance--neutral .loka-policy-stance-label { color: #9c6b2e; }
.loka-policy-stance--oppressive .loka-policy-stance-label { color: #C62828; }
}

.loka-policy-stance-text {
opacity: .92;
}

/* A single always-on perk (e.g. World Capital's Eminent Domain) isn't a
stance choice, so it doesn't fit the card grid above -- a small
highlighted callout instead, in the same amber used for "neutral"
above, since it reads as the same kind of "standard, no alliance
politics involved" info. */
.loka-policy-perk {
background: rgba(240, 207, 142, .08);
border: 1px solid rgba(240, 207, 142, .3);
border-radius: 6px;
padding: .8em 1em;
margin: 1em 0;
}

.loka-policy-perk-name {
font-weight: 700;
color: #f0cf8e;
margin-bottom: .3em;
}

@media (prefers-color-scheme: light) {
.loka-policy-perk {
background: rgba(156, 107, 46, .06);
border-color: rgba(156, 107, 46, .3);
}

.loka-policy-perk-name {
color: #9c6b2e;
}
}

Template:Policy/styles.css - Revision history

Kaph: Fix stance label column not lining up (was auto-width, hugging each row's own text) and widen cards for less cramped wrapping on desktop

Kaph: Create Template:Policy -- a card for one capital policy's Benevolent/Neutral/Oppressive stances