Template:NationalHistory/styles.css: Difference between revisions
Content deleted Content added
No edit summary |
|||
| Line 1: | Line 1: | ||
/* ========================================================= |
/* ========================================================= |
||
NATIONAL HISTORY ARTICLE TEXT |
|||
History pages now sit on the dark Erindal article background. |
|||
MediaWiki 1.43 / TemplateStyles-safe |
|||
Paper components retain the page-local dark ink palette. |
|||
Loaded by Template:NationalHistory styles. |
|||
Page-specific palettes remain on each .history-page wrapper. |
|||
Shared Erindal foundations (page width, hero scale, base record |
|||
geometry, shared responsive rules) remain in Common.css. |
|||
========================================================= */ |
========================================================= */ |
||
.history- |
.history-overview__lead, |
||
.history-page__body { |
|||
color: var(--history-ink, var(--ew-ink)); |
|||
color: #e9dfd0; |
|||
} |
|||
/* The main Erindal article rules normally stop every parser output at 1180px. |
|||
Nation-history pages are designed as full-page layouts, so they must be |
|||
allowed to use all of the space available beside the sidebar. */ |
|||
.history-hero { |
|||
background: var(--history-deep, var(--ew-dark-2)); |
|||
} |
|||
.history-hero__overlay { |
|||
color: #fffaf2; |
|||
background: |
|||
linear-gradient(180deg, rgba(20, 12, 9, 0.06) 18%, rgba(20, 12, 9, 0.88) 100%), |
|||
linear-gradient(90deg, rgba(20, 12, 9, 0.52), transparent 64%); |
|||
} |
|||
.history-hero__eyebrow { |
|||
color: #efb476; |
|||
} |
|||
.history-hero__subtitle { |
|||
color: #eadcc9; |
|||
} |
|||
.history-overview { |
|||
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); |
|||
} |
|||
.history-overview__lead > p:first-child::first-letter { |
|||
color: var(--history-accent, var(--ew-gold)); |
|||
font-size: 3.8em; |
|||
line-height: 0.76; |
|||
} |
|||
.history-record { |
|||
border: 1px solid var(--history-line, var(--ew-border)); |
|||
background: var(--history-paper, var(--ew-paper-light)); |
|||
box-shadow: 0 9px 22px rgba(55, 37, 27, 0.12); |
|||
} |
|||
.history-record__heading { |
|||
color: #fff7ec; |
|||
background-color: var(--history-deep, var(--ew-dark-2)); |
|||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(80, 48, 35, 0.58)); |
|||
} |
|||
.history-record__row { |
|||
grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr); |
|||
border-top: 1px solid var(--history-line, var(--ew-border)); |
|||
} |
|||
.history-record__row span { |
|||
color: var(--history-muted, #6f665d); |
|||
} |
|||
.history-era-index { |
|||
box-sizing: border-box; |
|||
margin: 1.8rem 0 2.4rem; |
|||
padding: 1.15rem; |
|||
border: 1px solid var(--history-line, var(--ew-border)); |
|||
border-radius: 12px; |
|||
background-color: var(--history-paper-alt, var(--ew-paper)); |
|||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent); |
|||
} |
|||
.history-era-index__heading { |
|||
margin: 0 0 0.85rem; |
|||
color: var(--history-deep, var(--ew-dark-2)); |
|||
font-family: "Alegreya SC", Georgia, serif; |
|||
font-size: 1.25rem; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
.history-era-index__grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, minmax(0, 1fr)); |
|||
gap: 0.72rem; |
|||
align-items: stretch; |
|||
} |
|||
.history-era-index__grid > div { |
|||
box-sizing: border-box; |
|||
min-width: 0; |
|||
} |
|||
.history-era-index__grid a { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
height: 100%; |
|||
padding: 0.72rem 0.82rem; |
|||
border: 1px solid rgba(91, 59, 41, 0.18); |
|||
border-left: 4px solid var(--history-accent, var(--ew-gold)); |
|||
border-radius: 7px; |
|||
color: var(--history-ink, var(--ew-ink)); |
|||
background: rgba(255, 252, 246, 0.68); |
|||
text-decoration: none; |
|||
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; |
|||
} |
|||
.history-era-index__grid a:hover { |
|||
transform: translateY(-1px); |
|||
background: #fffaf2; |
|||
box-shadow: 0 5px 12px rgba(54, 36, 25, 0.1); |
|||
} |
|||
.history-era-index__grid span, |
|||
.history-era-index__grid strong { |
|||
display: block; |
|||
} |
|||
.history-era-index__grid span { |
|||
color: var(--history-accent, var(--ew-gold)); |
|||
font-family: "Alegreya SC", Georgia, serif; |
|||
font-size: 0.76rem; |
|||
font-weight: 700; |
|||
letter-spacing: 0.08em; |
|||
text-transform: uppercase; |
|||
} |
} |
||
.history- |
.history-overview__lead p, |
||
.history-page__body p, |
|||
margin-top: 0.12rem; |
|||
.history-page__body li { |
|||
font-size: 0.98rem; |
|||
color: inherit; |
|||
} |
} |
||
.history-page__body { |
.history-page__body { |
||
position: relative; |
position: relative; |
||
box-sizing: border-box; |
|||
width: 100%; |
|||
max-width: none; |
|||
margin: 0; |
|||
padding-left: 2.25rem; |
padding-left: 2.25rem; |
||
border-left: 2px solid rgba( |
border-left: 2px solid rgba(209, 160, 111, 0.34); |
||
} |
} |
||
| Line 153: | Line 34: | ||
margin: 2.65rem 0 1rem; |
margin: 2.65rem 0 1rem; |
||
padding: 0 0 0.55rem; |
padding: 0 0 0.55rem; |
||
border-bottom: 1px solid |
border-bottom: 1px solid rgba(209, 160, 111, 0.28); |
||
color: |
color: #f4eadb; |
||
font-family: "Alegreya SC", Georgia, serif; |
|||
font-size: clamp(1.55rem, 3vw, 2rem); |
font-size: clamp(1.55rem, 3vw, 2rem); |
||
font-weight: 700; |
|||
} |
} |
||
| Line 164: | Line 47: | ||
width: 12px; |
width: 12px; |
||
height: 12px; |
height: 12px; |
||
border: 2px solid |
border: 2px solid #f4eadb; |
||
border-radius: 50%; |
border-radius: 50%; |
||
background: var(--history-accent, var(--ew-gold)); |
background: var(--history-accent, var(--ew-gold)); |
||
box-shadow: 0 0 0 2px rgba( |
box-shadow: 0 0 0 2px rgba(209, 160, 111, 0.32); |
||
content: ""; |
content: ""; |
||
} |
} |
||
| Line 173: | Line 56: | ||
.history-page__body h3 { |
.history-page__body h3 { |
||
margin-top: 1.75rem; |
margin-top: 1.75rem; |
||
color: var(--history-accent, |
color: var(--history-accent-light, #d1a06f); |
||
font-family: "Alegreya SC", Georgia, serif; |
font-family: "Alegreya SC", Georgia, serif; |
||
font-size: 1.3rem; |
font-size: 1.3rem; |
||
| Line 179: | Line 62: | ||
} |
} |
||
.history-page__body a |
.history-page__body a { |
||
color: #d9aa72; |
|||
.history-record a { |
|||
color: #784029; |
|||
} |
} |
||
.history-page__body |
.history-page__body a:hover { |
||
color: #f0c58d; |
|||
.history-page__body #toc { |
|||
border: 1px solid var(--history-line, var(--ew-border)); |
|||
background: var(--history-paper, var(--ew-paper-light)); |
|||
} |
} |
||
/* Light components inside the dark article body must keep dark text. */ |
|||
.history-note { |
|||
.history-page__body .toc, |
|||
padding: 0.9rem 1rem; |
|||
.history-page__body #toc, |
|||
border: 1px solid var(--history-line, var(--ew-border)); |
|||
.history-page__body .history-note, |
|||
border-left: 5px solid var(--history-accent, var(--ew-gold)); |
|||
.history-page__body table.wikitable, |
|||
background-color: var(--history-paper, var(--ew-paper-light)); |
|||
.history-page__body .history-figure { |
|||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(230, 220, 203, 0.18)); |
|||
color: var(--history-ink, #2d2824); |
|||
} |
} |
||
.history- |
.history-page__body .toc, |
||
.history-page__body #toc { |
|||
margin: 0 0 1.8rem; |
|||
} |
|||
padding: 0.9rem 1.1rem; |
|||
.history-note--aftermath { |
|||
--history-accent: #7c6331; |
|||
} |
|||
.history-note strong { |
|||
color: var(--history-deep, var(--ew-dark-2)); |
|||
} |
|||
.history-page__body .thumb { |
|||
margin-top: 1.1rem; |
|||
border-color: var(--history-line, var(--ew-border)); |
|||
} |
|||
.history-page__body table.wikitable { |
|||
border-color: var(--history-line, var(--ew-border)); |
|||
background: var(--history-paper, var(--ew-paper-light)); |
|||
} |
|||
.history-page__body table.wikitable th { |
|||
color: #fff8ed; |
|||
background: var(--history-deep, var(--ew-dark-2)); |
|||
} |
|||
.history-figure { |
|||
border: 1px solid var(--history-line, var(--ew-border)); |
border: 1px solid var(--history-line, var(--ew-border)); |
||
border-radius: 9px; |
|||
background: var(--history-paper, var(--ew-paper-light)); |
background: var(--history-paper, var(--ew-paper-light)); |
||
box-shadow: 0 8px 20px rgba(50, 33, 24, 0.14); |
|||
} |
|||
.history-figure .mw-file-description { |
|||
display: block; |
|||
width: 100%; |
|||
max-width: none; |
|||
} |
|||
.history-figure .mw-file-element, |
|||
.history-figure__image { |
|||
display: block; |
|||
width: 100% !important; |
|||
max-width: none !important; |
|||
} |
|||
.history-figure a.new { |
|||
display: none !important; |
|||
} |
|||
.history-figure__caption { |
|||
color: var(--history-muted, #6f665d); |
|||
background-color: var(--history-paper, var(--ew-paper-light)); |
|||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(230, 220, 203, 0.18)); |
|||
} |
} |
||
| Line 261: | Line 95: | ||
.history-page__body h2::before { |
.history-page__body h2::before { |
||
left: calc(-1.25rem - 7px); |
left: calc(-1.25rem - 7px); |
||
} |
|||
.history-record { |
|||
width: min(100%, 560px); |
|||
order: -1; |
|||
} |
} |
||
} |
} |
||
Revision as of 13:17, 18 September 2026
/* =========================================================
NATIONAL HISTORY ARTICLE TEXT
History pages now sit on the dark Erindal article background.
Paper components retain the page-local dark ink palette.
========================================================= */
.history-overview__lead,
.history-page__body {
color: #e9dfd0;
}
.history-overview__lead p,
.history-page__body p,
.history-page__body li {
color: inherit;
}
.history-page__body {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
padding-left: 2.25rem;
border-left: 2px solid rgba(209, 160, 111, 0.34);
}
.history-page__body p {
margin: 0.82rem 0;
}
.history-page__body h2 {
position: relative;
margin: 2.65rem 0 1rem;
padding: 0 0 0.55rem;
border-bottom: 1px solid rgba(209, 160, 111, 0.28);
color: #f4eadb;
font-family: "Alegreya SC", Georgia, serif;
font-size: clamp(1.55rem, 3vw, 2rem);
font-weight: 700;
}
.history-page__body h2::before {
position: absolute;
top: 0.35em;
left: calc(-2.25rem - 7px);
width: 12px;
height: 12px;
border: 2px solid #f4eadb;
border-radius: 50%;
background: var(--history-accent, var(--ew-gold));
box-shadow: 0 0 0 2px rgba(209, 160, 111, 0.32);
content: "";
}
.history-page__body h3 {
margin-top: 1.75rem;
color: var(--history-accent-light, #d1a06f);
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.3rem;
font-weight: 700;
}
.history-page__body a {
color: #d9aa72;
}
.history-page__body a:hover {
color: #f0c58d;
}
/* Light components inside the dark article body must keep dark text. */
.history-page__body .toc,
.history-page__body #toc,
.history-page__body .history-note,
.history-page__body table.wikitable,
.history-page__body .history-figure {
color: var(--history-ink, #2d2824);
}
.history-page__body .toc,
.history-page__body #toc {
margin: 0 0 1.8rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--history-line, var(--ew-border));
border-radius: 9px;
background: var(--history-paper, var(--ew-paper-light));
}
@media (max-width: 760px) {
.history-page__body {
padding-left: 1.25rem;
}
.history-page__body h2::before {
left: calc(-1.25rem - 7px);
}
}