MediaWiki:Common.css - Revision history

JMyles: Reverted edit by Magent (talk) to last revision by JMyles

2026-04-29T04:21:47Z

Reverted edit by Magent (talk) to last revision by JMyles

@@ Line 291: / Line 291: @@
    width: 100% !important;
    max-width: 100% !important;
+}

Magent: Cap video height (max-height:70vh, width:auto) so portrait videos don't dominate the page (via update-page on MediaWiki MCP Server)

2026-04-29T04:18:47Z

Cap video height (max-height:70vh, width:auto) so portrait videos don't dominate the page (via update-page on MediaWiki MCP Server)

@@ Line 291: / Line 291: @@
    width: 100% !important;
    max-width: 100% !important;
+}

JMyles at 04:12, 29 April 2026

2026-04-29T04:12:53Z

← Older revision		Revision as of 04:12, 29 April 2026
Line 433:		Line 433:
	/* ---------- Light/dark toggle ---------- */		/* ---------- Light/dark toggle ---------- */
	.pickipedia-mode {		.pickipedia-mode {
	position: ~~fixed~~;		position: absolute;
	bottom: ~~19px~~;		bottom: 5px;
	right: ~~24px~~;		right: 10px;
	background: var(--pp-card);		background: var(--pp-card);
	color: var(--pp-ink);		color: var(--pp-ink);

JMyles at 04:11, 29 April 2026

2026-04-29T04:11:36Z

← Older revision		Revision as of 04:11, 29 April 2026
Line 206:		Line 206:
	font-family: var(--pp-serif);		font-family: var(--pp-serif);
	color: var(--pp-ink);		color: var(--pp-ink);
	~~margin-top: 28px;~~
	}		}

Line 338:		Line 337:
	font-size: 19px;		font-size: 19px;
	line-height: 1.65;		line-height: 1.65;
	~~padding-bottom: 80px;~~
	}		}
	.pickipedia-variant-letter .mw-parser-output > h2 { font-size: 28px; line-height: 1.2; }		.pickipedia-variant-letter .mw-parser-output > h2 { font-size: 28px; line-height: 1.2; }

JMyles at 04:09, 29 April 2026

2026-04-29T04:09:37Z

← Older revision		Revision as of 04:09, 29 April 2026
Line 280:		Line 280:
	.pickipedia-userpost .mw-parser-output embed,		.pickipedia-userpost .mw-parser-output embed,
	.pickipedia-userpost .mw-parser-output .hls-video-player {		.pickipedia-userpost .mw-parser-output .hls-video-player {
	~~margin: 28px 0;~~
	max-width: 100%;		max-width: 100%;
	}		}
Line 437:		Line 436:
	.pickipedia-mode {		.pickipedia-mode {
	position: fixed;		position: fixed;
	bottom: ~~24px~~;		bottom: 19px;
	right: 24px;		right: 24px;
	background: var(--pp-card);		background: var(--pp-card);
Line 470:		Line 469:
	.pickipedia-variant-letter .pickipedia-hero .pp-title { font-size: 32px; }		.pickipedia-variant-letter .pickipedia-hero .pp-title { font-size: 32px; }
	.pickipedia-variant-letter .pickipedia-hero .pp-dek { font-size: 17px; }		.pickipedia-variant-letter .pickipedia-hero .pp-dek { font-size: 17px; }
	~~.pickipedia-userpost .mw-parser-output { margin-top: 18px; }~~
	.pickipedia-variant-letter .mw-parser-output { font-size: 17px; }		.pickipedia-variant-letter .mw-parser-output { font-size: 17px; }
	.pickipedia-variant-letter .mw-parser-output > p:first-of-type::first-letter { font-size: 56px; }		.pickipedia-variant-letter .mw-parser-output > p:first-of-type::first-letter { font-size: 56px; }

Magent: Logo flush to top:0 left:0; add space between title and kicker (which now follows title) (via update-page on MediaWiki MCP Server)

2026-04-29T04:03:00Z

Logo flush to top:0 left:0; add space between title and kicker (which now follows title) (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 04:03, 29 April 2026
Line 101:		Line 101:
	}		}

	/* ---------- Corner logo: ~~absolute-positioned~~ upper-left, fluid-sized		/* ---------- Corner logo: flush to upper-left, fluid sized. ---------- */
	~~so it shrinks proportionally at narrower viewports and never crowds~~
	~~the content~~. ---------- */
	.pp-corner-logo {		.pp-corner-logo {
	position: absolute;		position: absolute;
	top: ~~16px~~;		top: 0;
	left: ~~16px~~;		left: 0;
	width: clamp(60px, 9vw, 130px);		width: clamp(60px, 9vw, 130px);
	z-index: 5;		z-index: 5;
Line 169:		Line 167:
	}		}
	.pickipedia-hero .pp-kicker a:hover { color: var(--pp-ink); }		.pickipedia-hero .pp-kicker a:hover { color: var(--pp-ink); }

			/* When the kicker follows the title (letter variant), give it a small
			gap so it reads as a byline. */
			.pickipedia-hero h1.pp-title + .pp-kicker {
			margin-top: 12px;
			}

	.pickipedia-hero h1.pp-title {		.pickipedia-hero h1.pp-title {
Line 193:		Line 197:
	text-transform: uppercase;		text-transform: uppercase;
	color: var(--pp-muted);		color: var(--pp-muted);
	margin: 0;		margin: 12px 0 0;
	padding: 0;		padding: 0;
	border: none;		border: none;
Line 341:		Line 345:
	.pickipedia-variant-letter .mw-parser-output blockquote { font-size: 22px; line-height: 1.45; }		.pickipedia-variant-letter .mw-parser-output blockquote { font-size: 22px; line-height: 1.45; }

	/* On medium-narrow viewports~~, the logo and~~ the centered ~~reading~~ column		/* On medium-narrow viewports the centered column would slide under
	~~start to overlap (~~logo ~~extends to ~16px+130px=~146px from the left,~~		the corner logo — push it right enough to clear. */
	~~while the centered column's left edge moves further left as the~~
	~~viewport narrows). Push the hero/content~~ right enough to clear ~~the~~
	~~logo~~. */
	@media (min-width: 720px) and (max-width: 1100px) {		@media (min-width: 720px) and (max-width: 1100px) {
	.pickipedia-variant-letter .pickipedia-hero,		.pickipedia-variant-letter .pickipedia-hero,
Line 460:		Line 461:
	.pickipedia-topbar { padding: 10px 16px; }		.pickipedia-topbar { padding: 10px 16px; }
	.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }		.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }

	~~/* Logo top-left, smaller, with hero padded to clear it. */~~
	~~.pp-corner-logo { top: 10px; left: 10px; }~~

	.pickipedia-variant-letter .pickipedia-hero,		.pickipedia-variant-letter .pickipedia-hero,

Magent: Logo: smaller and fluid-sized via clamp; add hero/content left padding so they clear the logo (via update-page on MediaWiki MCP Server)

2026-04-29T03:54:25Z

Logo: smaller and fluid-sized via clamp; add hero/content left padding so they clear the logo (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:54, 29 April 2026
Line 43:		Line 43:
	background: var(--pp-paper) !important;		background: var(--pp-paper) !important;
	color: var(--pp-ink);		color: var(--pp-ink);
	position: relative; ~~/* anchor for the absolute corner logo */~~		position: relative;
	}		}

Line 101:		Line 101:
	}		}

	/* ---------- Corner logo: absolute-positioned upper-left ~~of the body~~		/* ---------- Corner logo: absolute-positioned upper-left, fluid-sized
	so it ~~doesn't take any space in the document flow — content flows~~		so it shrinks proportionally at narrower viewports and never crowds
	~~underneath it. The topbar / hero get padding to keep their~~ content		the content. ---------- */
	~~from sliding under it~~. ---------- */
	.pp-corner-logo {		.pp-corner-logo {
	position: absolute;		position: absolute;
	top: 16px;		top: 16px;
	left: 16px;		left: 16px;
	width: ~~180px~~;		width: clamp(60px, 9vw, 130px);
	z-index: 5;		z-index: 5;
	display: block;		display: block;
Line 341:		Line 340:
	.pickipedia-variant-letter .mw-parser-output > h3 { font-size: 22px; line-height: 1.25; }		.pickipedia-variant-letter .mw-parser-output > h3 { font-size: 22px; line-height: 1.25; }
	.pickipedia-variant-letter .mw-parser-output blockquote { font-size: 22px; line-height: 1.45; }		.pickipedia-variant-letter .mw-parser-output blockquote { font-size: 22px; line-height: 1.45; }

			/* On medium-narrow viewports, the logo and the centered reading column
			start to overlap (logo extends to ~16px+130px=~146px from the left,
			while the centered column's left edge moves further left as the
			viewport narrows). Push the hero/content right enough to clear the
			logo. */
			@media (min-width: 720px) and (max-width: 1100px) {
			.pickipedia-variant-letter .pickipedia-hero,
			.pickipedia-variant-letter .mw-parser-output {
			margin-left: 160px;
			margin-right: 24px;
			}
			}

	/* ---------- Variant: Masthead ---------- */		/* ---------- Variant: Masthead ---------- */
Line 444:		Line 456:
	}		}

	/* ---------- Responsive ---------- */		/* ---------- Responsive (small screens) ---------- */
	@media (max-width: ~~880px~~) {		@media (max-width: 720px) {
	.pickipedia-topbar { padding: 10px 16px; }		.pickipedia-topbar { padding: 10px 16px; }
	.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }		.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }

	.pp-corner-logo { ~~width~~: ~~90px~~; ~~top~~: 10px; left: ~~10px~~; }		/* Logo top-left, smaller, with hero padded to clear it. */
			.pp-corner-logo { top: 10px; left: 10px; }

			.pickipedia-variant-letter .pickipedia-hero,
			.pickipedia-variant-letter .mw-parser-output {
			padding-left: max(24px, calc(9vw + 24px));
			}

	.pickipedia-variant-letter .pickipedia-hero { padding-top: 10px; }		.pickipedia-variant-letter .pickipedia-hero { padding-top: 10px; }

Magent: Corner logo as absolute element (won't push content); topbar slim with just nav (via update-page on MediaWiki MCP Server)

2026-04-29T03:48:40Z

Corner logo as absolute element (won't push content); topbar slim with just nav (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:48, 29 April 2026
Line 43:		Line 43:
	background: var(--pp-paper) !important;		background: var(--pp-paper) !important;
	color: var(--pp-ink);		color: var(--pp-ink);
			position: relative; /* anchor for the absolute corner logo */
	}		}

Line 100:		Line 101:
	}		}

	/* ---------- ~~Topbar (~~logo ~~+ nav) — non~~-~~sticky, sits at top~~ of body		/* ---------- Corner logo: absolute-positioned upper-left of the body
	~~above mw~~-~~content~~-text. ~~Logo upper~~-~~left,~~ nav ~~upper~~-~~right~~. ---------- */		so it doesn't take any space in the document flow — content flows
			underneath it. The topbar / hero get padding to keep their content
			from sliding under it. ---------- */
			.pp-corner-logo {
			position: absolute;
			top: 16px;
			left: 16px;
			width: 180px;
			z-index: 5;
			display: block;
			text-decoration: none;
			}
			.pp-corner-logo img {
			display: block;
			width: 100%;
			height: auto;
			}

			/* ---------- Topbar (nav only) — non-sticky, slim. ---------- */
	.pickipedia-topbar {		.pickipedia-topbar {
	position: static;		position: static;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	justify-content: ~~space~~-~~between~~;		justify-content: flex-end;
	padding: ~~12px~~ 24px;		padding: 14px 24px;
	background: ~~var(--pp-paper);~~		background: transparent;
	}

	~~.pickipedia-topbar-logo {~~
	~~display: flex;~~
	~~align-items: center;~~
	~~text-decoration: none;~~
	}

	~~.pickipedia-topbar-logo img {~~
	~~height: 120px;~~
	~~width: auto;~~
	~~display: block~~;
	}		}

Line 279:		Line 286:
	}		}

	~~/* The {{HLSVideo\|...\|width=400px}} template wraps the player in a div~~
	~~with inline `width:400px;max-width:800px`. On a post the video should~~
	~~fill the reading column instead. */~~
	.pickipedia-userpost .mw-parser-output > div[style*="max-width:800px"],		.pickipedia-userpost .mw-parser-output > div[style*="max-width:800px"],
	.pickipedia-userpost .mw-parser-output > div[style*="width:400px"] {		.pickipedia-userpost .mw-parser-output > div[style*="width:400px"] {
Line 443:		Line 447:
	@media (max-width: 880px) {		@media (max-width: 880px) {
	.pickipedia-topbar { padding: 10px 16px; }		.pickipedia-topbar { padding: 10px 16px; }
	~~.pickipedia-topbar-logo img { height: 72px; }~~
	.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }		.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }

			.pp-corner-logo { width: 90px; top: 10px; left: 10px; }

	.pickipedia-variant-letter .pickipedia-hero { padding-top: 10px; }		.pickipedia-variant-letter .pickipedia-hero { padding-top: 10px; }

Magent: Bigger topbar logo (always shown); drop masthead-in-hero rules (via update-page on MediaWiki MCP Server)

2026-04-29T03:43:07Z

Bigger topbar logo (always shown); drop masthead-in-hero rules (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:43, 29 April 2026
Line 100:		Line 100:
	}		}

	/* ---------- Topbar (logo + nav) — non-sticky ---------- */		/* ---------- Topbar (logo + nav) — non-sticky, sits at top of body
			above mw-content-text. Logo upper-left, nav upper-right. ---------- */
	.pickipedia-topbar {		.pickipedia-topbar {
	position: static;		position: static;
Line 106:		Line 107:
	align-items: center;		align-items: center;
	justify-content: space-between;		justify-content: space-between;
	padding: ~~10px~~ 24px;		padding: 12px 24px;
	background: var(--pp-paper);		background: var(--pp-paper);
	}		}
Line 117:		Line 118:

	.pickipedia-topbar-logo img {		.pickipedia-topbar-logo img {
	height: ~~64px~~;		height: 120px;
	width: auto;		width: auto;
	display: block;		display: block;
Line 144:		Line 145:
	font-family: var(--pp-serif);		font-family: var(--pp-serif);
	color: var(--pp-ink);		color: var(--pp-ink);
	}

	~~/* Big floating masthead logo — sits to the LEFT of the title text on~~
	~~wide viewports. The kicker/title/body wrap around it like a magazine~~
	~~drop-figure. Hidden on narrow viewports (the topbar logo handles it). */~~
	~~.pp-masthead-logo {~~
	~~float: left;~~
	~~margin: 0 24px 12px 0;~~
	~~width: 200px;~~
	~~display: block;~~
	~~text-decoration: none;~~
	}
	~~.pp-masthead-logo img {~~
	~~width: 100%;~~
	~~height: auto;~~
	~~display: block;~~
	}		}

Line 205:		Line 190:
	padding: 0;		padding: 0;
	border: none;		border: none;
	}

	~~.pickipedia-hero::after {~~
	~~content: "";~~
	~~display: block;~~
	~~clear: left;~~
	}		}

Line 301:		Line 280:

	/* The {{HLSVideo\|...\|width=400px}} template wraps the player in a div		/* The {{HLSVideo\|...\|width=400px}} template wraps the player in a div
	with inline `width:400px;max-width:800px`. ~~That's the right behavior~~		with inline `width:400px;max-width:800px`. On a post the video should
	~~on a Release page, but on~~ a post the video should fill the reading		fill the reading column instead. */
	column~~. Override the inline width to 100% so the video centers and~~
	~~sizes naturally~~. */
	.pickipedia-userpost .mw-parser-output > div[style*="max-width:800px"],		.pickipedia-userpost .mw-parser-output > div[style*="max-width:800px"],
	.pickipedia-userpost .mw-parser-output > div[style*="width:400px"] {		.pickipedia-userpost .mw-parser-output > div[style*="width:400px"] {
Line 461:		Line 438:
	border-color: var(--pp-accent);		border-color: var(--pp-accent);
	color: var(--pp-accent);		color: var(--pp-accent);
	}

	~~/* ---------- Logo swap based on viewport ---------- */~~
	~~@media (min-width: 720px) {~~
	~~.pickipedia-topbar-logo { display: none; }~~
	}

	~~@media (max-width: 719px) {~~
	~~.pp-masthead-logo { display: none; }~~
	}		}

	/* ---------- Responsive ---------- */		/* ---------- Responsive ---------- */
	@media (max-width: 880px) {		@media (max-width: 880px) {
	.pickipedia-topbar { padding: ~~8px~~ 16px; }		.pickipedia-topbar { padding: 10px 16px; }
	.pickipedia-topbar-logo img { height: ~~48px~~; }		.pickipedia-topbar-logo img { height: 72px; }
	.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }		.pickipedia-topbar-nav { gap: 12px; font-size: 10px; }

Magent: Force inline-styled HLSVideo wrapper (width=400px) to fill the reading column on post pages (via update-page on MediaWiki MCP Server)

2026-04-29T03:19:24Z

Force inline-styled HLSVideo wrapper (width=400px) to fill the reading column on post pages (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:19, 29 April 2026
Line 140:		Line 140:
	.pickipedia-topbar-nav a:hover { color: var(--pp-accent); }		.pickipedia-topbar-nav a:hover { color: var(--pp-accent); }

	/* ---------- Hero ~~— kicker hugs title hugs body, no rule~~ ---------- */		/* ---------- Hero ---------- */
	.pickipedia-hero {		.pickipedia-hero {
	font-family: var(--pp-serif);		font-family: var(--pp-serif);
Line 148:		Line 148:
	/* Big floating masthead logo — sits to the LEFT of the title text on		/* Big floating masthead logo — sits to the LEFT of the title text on
	wide viewports. The kicker/title/body wrap around it like a magazine		wide viewports. The kicker/title/body wrap around it like a magazine
	drop-figure. Hidden on narrow viewports (the topbar logo handles it).		drop-figure. Hidden on narrow viewports (the topbar logo handles it). */
	~~The transparent PNG asset is at /images/8/80/Pickipedia-quarter-transparent.png~~
	*/
	.pp-masthead-logo {		.pp-masthead-logo {
	float: left;		float: left;
Line 209:		Line 207:
	}		}

	~~/* Clear the float once the hero ends so video / body content don't~~
	~~wrap into the logo's column. */~~
	.pickipedia-hero::after {		.pickipedia-hero::after {
	content: "";		content: "";
Line 303:		Line 299:
	background: transparent;		background: transparent;
	}		}

			/* The {{HLSVideo\|...\|width=400px}} template wraps the player in a div
			with inline `width:400px;max-width:800px`. That's the right behavior
			on a Release page, but on a post the video should fill the reading
			column. Override the inline width to 100% so the video centers and
			sizes naturally. */
			.pickipedia-userpost .mw-parser-output > div[style*="max-width:800px"],
			.pickipedia-userpost .mw-parser-output > div[style*="width:400px"] {
			width: 100% !important;
			max-width: 100% !important;
			}

	.pickipedia-userpost .mw-parser-output .thumbcaption,		.pickipedia-userpost .mw-parser-output .thumbcaption,
	.pickipedia-userpost .mw-parser-output figcaption {		.pickipedia-userpost .mw-parser-output figcaption {
Line 456:		Line 464:

	/* ---------- Logo swap based on viewport ---------- */		/* ---------- Logo swap based on viewport ---------- */
	~~/* Wide: hide compact topbar logo, show big floating masthead logo. */~~
	@media (min-width: 720px) {		@media (min-width: 720px) {
	.pickipedia-topbar-logo { display: none; }		.pickipedia-topbar-logo { display: none; }
	}		}

	~~/* Narrow: hide masthead logo (no room beside title), keep topbar logo. */~~
	@media (max-width: 719px) {		@media (max-width: 719px) {
	.pp-masthead-logo { display: none; }		.pp-masthead-logo { display: none; }