Template:MainPage/styles.css - Revision history

Miyokari at 18:40, 4 September 2026

2026-09-04T18:40:29Z

← Older revision		Revision as of 18:40, 4 September 2026
Line 22:		Line 22:
	text-decoration: none !important;		text-decoration: none !important;
	}		}

			/* ========================================================================
			HERO
			======================================================================== */

	.ew-hero {		.ew-hero {
Line 92:		Line 96:

	.ew-gold-rule::before {		.ew-gold-rule::before {
	content: "~~âœ§~~";		content: "✧";
	margin-right: 4px;		margin-right: 4px;
	color: var(--ew-gold);		color: var(--ew-gold);
Line 111:		Line 115:
	line-height: 1.45;		line-height: 1.45;
	}		}

			/* ========================================================================
			MAIN LAYOUT
			======================================================================== */

	.ew-home-grid {		.ew-home-grid {
Line 124:		Line 132:
	min-width: 0;		min-width: 0;
	}		}

			/* ========================================================================
			PANELS
			======================================================================== */

	.ew-panel {		.ew-panel {
Line 187:		Line 199:
	line-height: 1.42;		line-height: 1.42;
	}		}

			/* ========================================================================
			WORLD OVERVIEW
			======================================================================== */

	.ew-overview {		.ew-overview {
Line 221:		Line 237:
	mix-blend-mode: multiply;		mix-blend-mode: multiply;
	}		}

			/* ========================================================================
			CATEGORY CARDS
			======================================================================== */

	.ew-categories-panel {		.ew-categories-panel {
Line 236:		Line 256:

	.ew-card {		.ew-card {
			position: relative;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
Line 270:		Line 291:
	letter-spacing: .01em !important;		letter-spacing: .01em !important;
	text-transform: none !important;		text-transform: none !important;
			}

			/* Makes the existing title link cover the complete card. */
		⚫	.ew-card a::after {
			content: "";
			position: absolute;
			z-index: 2;
			inset: 0;
	}		}

Line 277:		Line 306:
	}		}

			/* Keyboard focus indicator compatible with TemplateStyles. */
⚫	.ew-card:~~focus~~ {
			.ew-card a:focus::after {
	outline: 2px solid var(--ew-gold);		outline: 2px solid var(--ew-gold);
	outline-offset: -3px;		outline-offset: -3px;
Line 288:		Line 318:
	font-size: 12px;		font-size: 12px;
	}		}

			/* ========================================================================
			CATEGORY IMAGE STRIP
			======================================================================== */

	.ew-strip {		.ew-strip {
Line 305:		Line 339:
	filter: sepia(.16) saturate(.78) brightness(1.04);		filter: sepia(.16) saturate(.78) brightness(1.04);
	}		}

			/* ========================================================================
			RIGHT COLUMN
			======================================================================== */

	.ew-home-right .ew-panel {		.ew-home-right .ew-panel {
	margin-bottom: 8px;		margin-bottom: 8px;
	}		}

			/* ========================================================================
			FEATURED ARTICLE
			======================================================================== */

	.ew-featured {		.ew-featured {
Line 366:		Line 408:
	color: var(--ew-component-link, #073d67) !important;		color: var(--ew-component-link, #073d67) !important;
	}		}

			/* ========================================================================
			RECENTLY UPDATED
			======================================================================== */

	.ew-recent {		.ew-recent {
Line 417:		Line 463:
	font-size: 13px;		font-size: 13px;
	}		}

			/* ========================================================================
			IMPORTANT PAGES
			======================================================================== */

	.ew-important {		.ew-important {
Line 451:		Line 501:
	line-height: 1.28;		line-height: 1.28;
	}		}

			/* ========================================================================
			RESPONSIVE LAYOUT
			======================================================================== */

	@media (max-width: 1180px) {		@media (max-width: 1180px) {
Line 510:		Line 564:
	}		}

			/* ========================================================================
	/* Parser/file-wrapper cleanup limited to the homepage content itself. */
			MEDIAWIKI PARSER CLEANUP
			Limited to homepage content.
			======================================================================== */

	.ew-home p {		.ew-home p {
	margin-top: 0;		margin-top: 0;

Miyokari at 18:21, 4 September 2026

2026-09-04T18:21:45Z

← Older revision		Revision as of 18:21, 4 September 2026
Line 92:		Line 92:

	.ew-gold-rule::before {		.ew-gold-rule::before {
	content: "✧";		content: "âœ§";
	margin-right: 4px;		margin-right: 4px;
	color: var(--ew-gold);		color: var(--ew-gold);
Line 264:		Line 264:
	display: block;		display: block;
	color: var(--ew-component-heading, #151515) !important;		color: var(--ew-component-heading, #151515) !important;
			font-family: "Alegreya", Georgia, serif !important;
	font-size: ~~12.5px~~;		font-size: 14px !important;
	font-weight: 700;		font-weight: 700;
	line-height: 1.15;		line-height: 1.2 !important;
			letter-spacing: .01em !important;
	text-transform: ~~uppercase~~;		text-transform: none !important;
	}		}

Miyokari at 23:50, 29 August 2026

2026-08-29T23:50:53Z

Show changes

Miyokari: Created page with "/* ======================================================================== ERINDAL MAIN PAGE TEMPLATE STYLES - PHASE 4H Template:MainPage/styles.css MediaWiki 1.43 / TemplateStyles-safe subset ======================================================================== / .ew-home, .ew-home { box-sizing: border-box; } .ew-home { width: 100%; max-width: none; margin: 0; color: var(--ew-ink); background: var(--ew-paper); font-family: "Crimson Text",..."

2026-08-19T00:52:09Z

Created page with "======================================================================== ERINDAL MAIN PAGE TEMPLATE STYLES - PHASE 4H Template:MainPage/styles.css MediaWiki 1.43 / TemplateStyles-safe subset ========================================================================: .ew-home, .ew-home * { box-sizing: border-box; } .ew-home { width: 100%; max-width: none; margin: 0; color: var(--ew-ink); background: var(--ew-paper); font-family: "Crimson Text",..."

New page

/* ========================================================================
ERINDAL MAIN PAGE TEMPLATE STYLES - PHASE 4H
Template:MainPage/styles.css
MediaWiki 1.43 / TemplateStyles-safe subset
======================================================================== */

.ew-home,
.ew-home * { box-sizing: border-box; }
.ew-home {
width: 100%;
max-width: none;
margin: 0;
color: var(--ew-ink);
background: var(--ew-paper);
font-family: "Crimson Text", Georgia, serif;
}
.ew-home a { text-decoration: none !important; }

.ew-hero {
height: clamp(278px, 18vw, 340px);
position: relative;
overflow: hidden;
background: #061019;
border-bottom: 2px solid rgba(91,70,44,.48);
}
.ew-hero-image { position:absolute; inset:0; overflow:hidden; }
.ew-hero-image .mw-file-element,
.ew-hero-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
display: block;
}
.ew-hero-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(2,7,10,.94) 0%, rgba(2,7,10,.78) 30%, rgba(2,7,10,.30) 48%, rgba(2,7,10,.08) 69%, rgba(2,7,10,.14) 100%);
}
.ew-hero-copy {
position: relative;
z-index: 2;
padding: 48px 0 0 55px;
color: #fffaf1;
text-shadow: 0 3px 4px rgba(0,0,0,.75);
}
.ew-hero-kicker { text-transform: uppercase; font-size: 22px; letter-spacing: .04em; margin-bottom: 2px; }
.ew-hero-title {
color: #fffaf1;
font-size: 54px;
line-height: 1.03;
letter-spacing: .045em;
text-transform: uppercase;
font-weight: 500;
}
.ew-gold-rule { height: 28px; display: flex; align-items: center; margin: 4px 0 8px; }
.ew-gold-rule::before { content: "✧"; color: var(--ew-gold); font-size: 17px; margin-right: 4px; }
.ew-gold-rule span { display:block; width:68px; height:2px; background:var(--ew-gold); }
.ew-hero-copy p { margin:0; color:#fff7eb; font-size:16px; line-height:1.45; }

.ew-home-grid {
display:grid;
grid-template-columns:minmax(0,1fr) clamp(420px,38%,560px);
gap:8px;
padding:8px 10px 0;
background:#efe7d9;
}
.ew-home-left,
.ew-home-right { min-width:0; }
.ew-panel {
position:relative;
background-color: var(--ew-paper-light);
background-image:
linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.08)),
repeating-linear-gradient(45deg,rgba(119,91,49,.018),rgba(119,91,49,.018) 2px,transparent 2px,transparent 7px);
border:1px solid var(--ew-border);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.27),0 1px 2px rgba(0,0,0,.08);
}
.ew-panel::before,
.ew-panel::after {
content:"";
position:absolute;
width:13px;
height:13px;
border-color:rgba(142,116,78,.32);
border-style:solid;
pointer-events:none;
}
.ew-panel::before { top:5px; left:5px; border-width:1px 0 0 1px; }
.ew-panel::after { top:5px; right:5px; border-width:1px 1px 0 0; }
.ew-panel h2 {
margin:0 !important;
padding:0 !important;
border:0 !important;
color:#111 !important;
font-size:20px !important;
line-height:1.25 !important;
text-transform:uppercase;
font-weight:700;
}
.ew-panel p { color:#171717; font-size:15.5px; line-height:1.42; }

.ew-overview {
min-height:222px;
display:grid;
grid-template-columns:minmax(0,1fr) 42%;
overflow:hidden;
}
.ew-panel-copy { padding:31px 24px 24px 39px; }
.ew-heading-mark { color:#58605f; margin-right:9px; font-size:26px; vertical-align:-2px; }
.ew-map-image { min-height:210px; overflow:hidden; opacity:.80; }
.ew-map-image .mw-file-element,
.ew-map-image img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; mix-blend-mode:multiply; }

.ew-categories-panel { margin-top:8px; padding:20px 18px 18px; min-height:337px; }
.ew-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:12px; }
.ew-card {
min-height:75px;
cursor:pointer;
display:flex;
align-items:center;
gap:12px;
padding:12px 13px;
border:1px solid rgba(118,93,58,.25);
background:rgba(250,246,238,.72);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.ew-card-icon { width:42px; flex:0 0 auto; color:#454847; font-size:30px; text-align:center; line-height:1; }
.ew-card-icon.ew-gold { color:#ba7e12; }
.ew-card a,
.ew-card-label { display:block; color:#151515 !important; text-transform:uppercase; font-size:12.5px; font-weight:700; line-height:1.15; }
.ew-card:hover { background:rgba(255,250,240,.96); border-color:rgba(153,111,52,.48); }
.ew-card:focus { outline:2px solid var(--ew-gold); outline-offset:-3px; }
.ew-card small { display:block; margin-top:7px; color:#2d2b27; font-size:12px; }
.ew-strip { grid-column:span 3; min-height:75px; overflow:hidden; border:1px solid rgba(118,93,58,.25); }
.ew-strip .mw-file-element,
.ew-strip img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; filter:sepia(.16) saturate(.78) brightness(1.04); }

.ew-home-right .ew-panel { margin-bottom:8px; }
.ew-featured { padding:19px 18px 18px; }
.ew-featured h2 { display:flex; align-items:center; gap:12px; margin-bottom:12px !important; }
.ew-featured h2 span { color:#5d6260; font-size:23px; }
.ew-feature-image { height:145px; overflow:hidden; border:1px solid rgba(65,47,27,.35); margin-bottom:9px; }
.ew-feature-image .mw-file-element,
.ew-feature-image img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; }
.ew-featured h3 { margin:0 0 5px !important; padding:0 !important; border:0 !important; color:#111 !important; font-size:20px !important; text-transform:uppercase; font-weight:500; }
.ew-featured p { margin:0; font-size:15px; line-height:1.3; }
.ew-readmore { margin-top:9px; font-size:14px; }
.ew-readmore a { color:#073d67 !important; }

.ew-recent { padding:15px 17px 15px; min-height:246px; }
.ew-recent h2 { display:flex; align-items:center; gap:8px; font-size:16px !important; margin-bottom:12px !important; }
.ew-recent-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; align-items:center; margin:6px 0; }
.ew-recent-icon { width:32px; height:32px; display:grid; place-items:center; background:#1a2228; color:#eee9dd; border:1px solid rgba(100,78,45,.48); font-size:12px; }
.ew-recent-row a { color:#073d67 !important; font-size:13.5px; line-height:1.1; }
.ew-recent-row small { display:block; color:#4c4842; font-size:11.5px; margin-top:2px; }
.ew-recent-loading { padding:8px 0; color:#5b554c; font-size:13px; }

.ew-important { margin:6px 10px 10px; padding:14px 26px 16px; }
.ew-important h2 { font-size:15px !important; margin-bottom:12px !important; }
.ew-important h2 span { color:#676b68; margin-right:8px; }
.ew-important-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; }
.ew-important-grid a { color:#073d67 !important; font-size:14px; }
.ew-important-grid small { display:block; margin-top:4px; color:#171717; font-size:12px; line-height:1.28; }

@media (max-width: 1180px) {
.ew-home-grid { grid-template-columns:1fr; }
.ew-home-right { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ew-home-right .ew-panel { margin-bottom:0; }
}

@media (max-width: 900px) {
.ew-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ew-strip { grid-column:span 2; }
.ew-important-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
.ew-overview { grid-template-columns:1fr; }
.ew-map-image { display:none; }
.ew-home-right { grid-template-columns:1fr; }
.ew-category-grid { grid-template-columns:1fr; }
.ew-strip { grid-column:span 1; }
.ew-important-grid { grid-template-columns:1fr; }
.ew-hero-copy { padding-left:26px; }
.ew-hero-title { font-size:40px; }
}

/* Parser/file-wrapper cleanup limited to the homepage content itself. */
.ew-home p { margin-top:0; }
.ew-home .mw-default-size,
.ew-home figure { margin:0 !important; padding:0 !important; max-width:none !important; }
.ew-home figure > a { display:block !important; width:100% !important; height:100% !important; }