Jump to content

Main Page: Difference between revisions

From Erindal Wiki
← Older editNewer edit →
Content deleted Content added
VisualWikitext
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* ========================================================================
{{MainPage styles}}
ERINDAL MAIN PAGE TEMPLATE STYLES - PHASE 4H
Template:MainPage/styles.css
MediaWiki 1.43 / TemplateStyles-safe subset
======================================================================== */


.ew-home,
__NOTOC__
.ew-home * {
__NOEDITSECTION__
box-sizing: border-box;
<!-- ERINDAL WIKI MAIN PAGE - MediaWiki-safe markup -->
}
<div class="ew-home">
<div class="ew-hero">
<div class="ew-hero-image">[[File:Erindal_Mock_Hero.png|link=|1600px]]</div>
<div class="ew-hero-shade"></div>
<div class="ew-hero-copy">
<div class="ew-hero-kicker">Welcome to</div>
<div class="ew-hero-title">Erindal Wiki</div>
<div class="ew-gold-rule"><span></span></div>
<p>A comprehensive repository of knowledge about the world,<br>its peoples, histories, magic, and the countless tales<br>that shape our legacy.</p>
</div>
</div>


<div class="ew-home-grid">
.ew-home {
width: 100%;
<div class="ew-home-left">
max-width: none;
<div class="ew-panel ew-overview">
margin: 0;
<div class="ew-panel-copy">
color: var(--ew-component-text, var(--ew-ink));
<h2><span class="ew-heading-mark">✥</span> World Overview</h2>
background: var(--ew-component-canvas, var(--ew-paper));
<p>A vast and ever-evolving world shaped by ancient powers, mortal ambitions, and forgotten truths. From the dwarven holds of Kurn Daruhm to the elven realms of Alyren Shaeras, from the ambitions of empires to forgotten ruins and old powers, Erindal is a world where history is rarely as settled as it first appears.</p>
font-family: "Crimson Text", Georgia, serif;
</div>
}
<div class="ew-map-image">[[File:Erindal_Mock_Map.png|link=|700px]]</div>
</div>


.ew-home a {
<div class="ew-panel ew-categories-panel">
text-decoration: none !important;
<h2>Browse by Category</h2>
}
<div class="ew-category-grid">
<div class="ew-card" data-ew-page="Category:Nations and Realms"><span class="ew-card-icon">♜</span><div><span class="ew-card-label">Nations & Realms</span><small>{{PAGESINCATEGORY:Nations and Realms|pages}} {{PLURAL:{{PAGESINCATEGORY:Nations and Realms|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:Ancestries and Cultures"><span class="ew-card-icon">♣</span><div><span class="ew-card-label">Ancestries & Cultures</span><small>{{PAGESINCATEGORY:Ancestries and Cultures|pages}} {{PLURAL:{{PAGESINCATEGORY:Ancestries and Cultures|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:Characters"><span class="ew-card-icon">♟</span><div><span class="ew-card-label">Characters</span><small>{{PAGESINCATEGORY:Characters|pages}} {{PLURAL:{{PAGESINCATEGORY:Characters|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:Organizations"><span class="ew-card-icon">⬟</span><div><span class="ew-card-label">Organizations</span><small>{{PAGESINCATEGORY:Organizations|pages}} {{PLURAL:{{PAGESINCATEGORY:Organizations|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:Religion and Deities"><span class="ew-card-icon ew-gold">☀</span><div><span class="ew-card-label">Religion & Deities</span><small>{{PAGESINCATEGORY:Religion and Deities|pages}} {{PLURAL:{{PAGESINCATEGORY:Religion and Deities|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:Magic and Cosmology"><span class="ew-card-icon">▰</span><div><span class="ew-card-label">Magic & Cosmology</span><small>{{PAGESINCATEGORY:Magic and Cosmology|pages}} {{PLURAL:{{PAGESINCATEGORY:Magic and Cosmology|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:Locations"><span class="ew-card-icon">●</span><div><span class="ew-card-label">Locations</span><small>{{PAGESINCATEGORY:Locations|pages}} {{PLURAL:{{PAGESINCATEGORY:Locations|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:History and Timeline"><span class="ew-card-icon">⌛</span><div><span class="ew-card-label">History & Timeline</span><small>{{PAGESINCATEGORY:History and Timeline|pages}} {{PLURAL:{{PAGESINCATEGORY:History and Timeline|pages}}|article|articles}}</small></div></div>
<div class="ew-card" data-ew-page="Category:Family Lines"><span class="ew-card-icon">✣</span><div><span class="ew-card-label">Family Lines</span><small>{{PAGESINCATEGORY:Family Lines|pages}} {{PLURAL:{{PAGESINCATEGORY:Family Lines|pages}}|article|articles}}</small></div></div>
<div class="ew-strip">[[File:Erindal_Mock_Strip.png|link=|900px]]</div>
</div>
</div>
</div>


.ew-hero {
<div class="ew-home-right">
position: relative;
<div class="ew-panel ew-featured">
height: clamp(278px, 18vw, 340px);
<h2><span>★</span> Featured Article</h2>
overflow: hidden;
<div class="ew-feature-image">[[File:Erindal_Mock_Kurn_Daruhm.png|link=Kurn Daruhm|700px]]</div>
background: #061019;
<h3>[[Kurn Daruhm]]</h3>
border-bottom: 2px solid rgba(91, 70, 44, .48);
<p>The mighty dwarven empire of stone and steel. Home to the Forge and Hearth dwarves, bound by tradition, industry, and an unyielding pride.</p>
}
<div class="ew-readmore">[[Kurn Daruhm|Read more →]]</div>
</div>


.ew-hero-image {
<div class="ew-panel ew-recent">
position: absolute;
<h2><span>◴</span> Recent Changes</h2>
inset: 0;
<div id="ew-recent-list" class="ew-recent-list"><div class="ew-recent-loading">Loading recent changes…</div></div>
overflow: hidden;
<div class="ew-readmore">[[Special:RecentChanges|View all recent changes →]]</div>
}
</div>
</div>
</div>


.ew-hero-image .mw-file-element,
<div class="ew-panel ew-important">
.ew-hero-image img {
<h2><span>▣</span> Important Pages</h2>
display: block;
<div class="ew-important-grid">
width: 100% !important;
<div>[[The Conclave]]<small>Secretive rulers and agents working behind the affairs of nations.</small></div>
max-width: none !important;
<div>[[Order of the Holy Flame]]<small>An order devoted to Aelithia and Galenar.</small></div>
height: 100% !important;
<div>[[The Dominion]]<small>Followers of Solanar and the doctrine of equal trade.</small></div>
object-fit: cover;
<div>[[Alyren Shaeras]]<small>The elven realm shaped by ancient houses and old rivalries.</small></div>
}
<div>[[Kurn Daruhm]]<small>The dwarven empire of holds, industry, warfare and tradition.</small></div>

</div>
.ew-hero-shade {
</div>
position: absolute;
</div>
z-index: 1;
inset: 0;
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 {
margin-bottom: 2px;
font-size: 22px;
letter-spacing: .04em;
text-transform: uppercase;
}

.ew-hero-title {
color: #fffaf1;
font-size: 54px;
font-weight: 500;
line-height: 1.03;
letter-spacing: .045em;
text-transform: uppercase;
}

.ew-gold-rule {
display: flex;
align-items: center;
height: 28px;
margin: 4px 0 8px;
}

.ew-gold-rule::before {
content: "✧";
margin-right: 4px;
color: var(--ew-gold);
font-size: 17px;
}

.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: var(--ew-component-canvas, #efe7d9);
}

.ew-home-left,
.ew-home-right {
min-width: 0;
}

.ew-panel {
position: relative;
color: var(--ew-component-text, #171717);
border: 1px solid var(--ew-component-border, var(--ew-border));
background-color: var(--ew-component-surface, var(--ew-paper-light));
background-image:
linear-gradient(
180deg,
var(--ew-component-sheen, 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
);
box-shadow:
inset 0 0 0 2px var(--ew-component-sheen, rgba(255, 255, 255, .27)),
0 1px 2px var(--ew-component-shadow, rgba(0, 0, 0, .08));
}

.ew-panel::before,
.ew-panel::after {
content: "";
position: absolute;
width: 13px;
height: 13px;
border-color: var(--ew-component-border, 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;
color: var(--ew-component-heading, #111) !important;
border: 0 !important;
font-size: 20px !important;
font-weight: 700;
line-height: 1.25 !important;
text-transform: uppercase;
}

.ew-panel p {
color: var(--ew-component-text, #171717);
font-size: 15.5px;
line-height: 1.42;
}

.ew-overview {
display: grid;
grid-template-columns: minmax(0, 1fr) 42%;
min-height: 222px;
overflow: hidden;
}

.ew-panel-copy {
padding: 31px 24px 24px 39px;
}

.ew-heading-mark {
margin-right: 9px;
color: var(--ew-component-muted, #58605f);
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 {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: cover;
mix-blend-mode: multiply;
}

.ew-categories-panel {
min-height: 337px;
margin-top: 8px;
padding: 20px 18px 18px;
}

.ew-category-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
margin-top: 12px;
}

.ew-card {
display: flex;
align-items: center;
gap: 12px;
min-height: 75px;
padding: 12px 13px;
cursor: pointer;
border: 1px solid var(--ew-component-border, rgba(118, 93, 58, .25));
background: var(--ew-component-card, rgba(250, 246, 238, .72));
box-shadow: inset 0 0 0 1px var(--ew-component-sheen, rgba(255, 255, 255, .28));
}

.ew-card-icon {
flex: 0 0 auto;
width: 42px;
color: var(--ew-component-muted, #454847);
font-size: 30px;
line-height: 1;
text-align: center;
}

.ew-card-icon.ew-gold {
color: #ba7e12;
}

.ew-card a,
.ew-card-label {
display: block;
color: var(--ew-component-heading, #151515) !important;
font-family: "Alegreya", Georgia, serif !important;
font-size: 14px !important;
font-weight: 700;
line-height: 1.2 !important;
letter-spacing: .01em !important;
text-transform: none !important;
}

.ew-card:hover {
border-color: var(--ew-component-accent, rgba(153, 111, 52, .48));
background: var(--ew-component-card-hover, rgba(255, 250, 240, .96));
}

.ew-card:focus {
outline: 2px solid var(--ew-gold);
outline-offset: -3px;
}

.ew-card small {
display: block;
margin-top: 7px;
color: var(--ew-component-muted, #2d2b27);
font-size: 12px;
}

.ew-strip {
grid-column: span 3;
min-height: 75px;
overflow: hidden;
border: 1px solid var(--ew-component-border, rgba(118, 93, 58, .25));
}

.ew-strip .mw-file-element,
.ew-strip img {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: cover;
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: var(--ew-component-muted, #5d6260);
font-size: 23px;
}

.ew-feature-image {
height: 145px;
margin-bottom: 9px;
overflow: hidden;
border: 1px solid var(--ew-component-border, rgba(65, 47, 27, .35));
}

.ew-feature-image .mw-file-element,
.ew-feature-image img {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: cover;
}

.ew-featured h3 {
margin: 0 0 5px !important;
padding: 0 !important;
color: var(--ew-component-heading, #111) !important;
border: 0 !important;
font-size: 20px !important;
font-weight: 500;
text-transform: uppercase;
}

.ew-featured p {
margin: 0;
font-size: 15px;
line-height: 1.3;
}

.ew-readmore {
margin-top: 9px;
font-size: 14px;
}

.ew-readmore a {
color: var(--ew-component-link, #073d67) !important;
}

.ew-recent {
min-height: 246px;
padding: 15px 17px;
}

.ew-recent h2 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px !important;
font-size: 16px !important;
}

.ew-recent-row {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 9px;
align-items: center;
margin: 6px 0;
}

.ew-recent-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
color: #eee9dd;
border: 1px solid rgba(100, 78, 45, .48);
background: #1a2228;
font-size: 12px;
}

.ew-recent-row a {
color: var(--ew-component-link, #073d67) !important;
font-size: 13.5px;
line-height: 1.1;
}

.ew-recent-row small {
display: block;
margin-top: 2px;
color: var(--ew-component-muted, #4c4842);
font-size: 11.5px;
}

.ew-recent-loading {
padding: 8px 0;
color: var(--ew-component-muted, #5b554c);
font-size: 13px;
}

.ew-important {
margin: 6px 10px 10px;
padding: 14px 26px 16px;
}

.ew-important h2 {
margin-bottom: 12px !important;
font-size: 15px !important;
}

.ew-important h2 span {
margin-right: 8px;
color: var(--ew-component-muted, #676b68);
}

.ew-important-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 22px;
}

.ew-important-grid a {
color: var(--ew-component-link, #073d67) !important;
font-size: 14px;
}

.ew-important-grid small {
display: block;
margin-top: 4px;
color: var(--ew-component-text, #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,
.ew-category-grid,
.ew-important-grid {
grid-template-columns: 1fr;
}

.ew-strip {
grid-column: span 1;
}

.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 {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

.ew-home figure > a {
display: block !important;
width: 100% !important;
height: 100% !important;
}

Revision as of 18:20, 4 September 2026

/* ======================================================================== 

  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-component-text, var(--ew-ink));
 background: var(--ew-component-canvas, var(--ew-paper));
 font-family: "Crimson Text", Georgia, serif;

}

.ew-home a { 

 text-decoration: none !important;

}

.ew-hero { 

 position: relative;
 height: clamp(278px, 18vw, 340px);
 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 { 

 display: block;
 width: 100% !important;
 max-width: none !important;
 height: 100% !important;
 object-fit: cover;

}

.ew-hero-shade { 

 position: absolute;
 z-index: 1;
 inset: 0;
 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 { 

 margin-bottom: 2px;
 font-size: 22px;
 letter-spacing: .04em;
 text-transform: uppercase;

}

.ew-hero-title { 

 color: #fffaf1;
 font-size: 54px;
 font-weight: 500;
 line-height: 1.03;
 letter-spacing: .045em;
 text-transform: uppercase;

}

.ew-gold-rule { 

 display: flex;
 align-items: center;
 height: 28px;
 margin: 4px 0 8px;

}

.ew-gold-rule::before { 

 content: "✧";
 margin-right: 4px;
 color: var(--ew-gold);
 font-size: 17px;

}

.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: var(--ew-component-canvas, #efe7d9);

}

.ew-home-left, .ew-home-right { 

 min-width: 0;

}

.ew-panel { 

 position: relative;
 color: var(--ew-component-text, #171717);
 border: 1px solid var(--ew-component-border, var(--ew-border));
 background-color: var(--ew-component-surface, var(--ew-paper-light));
 background-image:
   linear-gradient(
     180deg,
     var(--ew-component-sheen, 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
   );
 box-shadow:
   inset 0 0 0 2px var(--ew-component-sheen, rgba(255, 255, 255, .27)),
   0 1px 2px var(--ew-component-shadow, rgba(0, 0, 0, .08));

}

.ew-panel::before, .ew-panel::after { 

 content: "";
 position: absolute;
 width: 13px;
 height: 13px;
 border-color: var(--ew-component-border, 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;
 color: var(--ew-component-heading, #111) !important;
 border: 0 !important;
 font-size: 20px !important;
 font-weight: 700;
 line-height: 1.25 !important;
 text-transform: uppercase;

}

.ew-panel p { 

 color: var(--ew-component-text, #171717);
 font-size: 15.5px;
 line-height: 1.42;

}

.ew-overview { 

 display: grid;
 grid-template-columns: minmax(0, 1fr) 42%;
 min-height: 222px;
 overflow: hidden;

}

.ew-panel-copy { 

 padding: 31px 24px 24px 39px;

}

.ew-heading-mark { 

 margin-right: 9px;
 color: var(--ew-component-muted, #58605f);
 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 { 

 display: block;
 width: 100% !important;
 max-width: none !important;
 height: 100% !important;
 object-fit: cover;
 mix-blend-mode: multiply;

}

.ew-categories-panel { 

 min-height: 337px;
 margin-top: 8px;
 padding: 20px 18px 18px;

}

.ew-category-grid { 

 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 3px;
 margin-top: 12px;

}

.ew-card { 

 display: flex;
 align-items: center;
 gap: 12px;
 min-height: 75px;
 padding: 12px 13px;
 cursor: pointer;
 border: 1px solid var(--ew-component-border, rgba(118, 93, 58, .25));
 background: var(--ew-component-card, rgba(250, 246, 238, .72));
 box-shadow: inset 0 0 0 1px var(--ew-component-sheen, rgba(255, 255, 255, .28));

}

.ew-card-icon { 

 flex: 0 0 auto;
 width: 42px;
 color: var(--ew-component-muted, #454847);
 font-size: 30px;
 line-height: 1;
 text-align: center;

}

.ew-card-icon.ew-gold { 

 color: #ba7e12;

}

.ew-card a, .ew-card-label { 

 display: block;
 color: var(--ew-component-heading, #151515) !important;
 font-family: "Alegreya", Georgia, serif !important;
 font-size: 14px !important;
 font-weight: 700;
 line-height: 1.2 !important;
 letter-spacing: .01em !important;
 text-transform: none !important;

}

.ew-card:hover { 

 border-color: var(--ew-component-accent, rgba(153, 111, 52, .48));
 background: var(--ew-component-card-hover, rgba(255, 250, 240, .96));

}

.ew-card:focus { 

 outline: 2px solid var(--ew-gold);
 outline-offset: -3px;

}

.ew-card small { 

 display: block;
 margin-top: 7px;
 color: var(--ew-component-muted, #2d2b27);
 font-size: 12px;

}

.ew-strip { 

 grid-column: span 3;
 min-height: 75px;
 overflow: hidden;
 border: 1px solid var(--ew-component-border, rgba(118, 93, 58, .25));

}

.ew-strip .mw-file-element, .ew-strip img { 

 display: block;
 width: 100% !important;
 max-width: none !important;
 height: 100% !important;
 object-fit: cover;
 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: var(--ew-component-muted, #5d6260);
 font-size: 23px;

}

.ew-feature-image { 

 height: 145px;
 margin-bottom: 9px;
 overflow: hidden;
 border: 1px solid var(--ew-component-border, rgba(65, 47, 27, .35));

}

.ew-feature-image .mw-file-element, .ew-feature-image img { 

 display: block;
 width: 100% !important;
 max-width: none !important;
 height: 100% !important;
 object-fit: cover;

}

.ew-featured h3 { 

 margin: 0 0 5px !important;
 padding: 0 !important;
 color: var(--ew-component-heading, #111) !important;
 border: 0 !important;
 font-size: 20px !important;
 font-weight: 500;
 text-transform: uppercase;

}

.ew-featured p { 

 margin: 0;
 font-size: 15px;
 line-height: 1.3;

}

.ew-readmore { 

 margin-top: 9px;
 font-size: 14px;

}

.ew-readmore a { 

 color: var(--ew-component-link, #073d67) !important;

}

.ew-recent { 

 min-height: 246px;
 padding: 15px 17px;

}

.ew-recent h2 { 

 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 12px !important;
 font-size: 16px !important;

}

.ew-recent-row { 

 display: grid;
 grid-template-columns: 32px minmax(0, 1fr);
 gap: 9px;
 align-items: center;
 margin: 6px 0;

}

.ew-recent-icon { 

 display: grid;
 place-items: center;
 width: 32px;
 height: 32px;
 color: #eee9dd;
 border: 1px solid rgba(100, 78, 45, .48);
 background: #1a2228;
 font-size: 12px;

}

.ew-recent-row a { 

 color: var(--ew-component-link, #073d67) !important;
 font-size: 13.5px;
 line-height: 1.1;

}

.ew-recent-row small { 

 display: block;
 margin-top: 2px;
 color: var(--ew-component-muted, #4c4842);
 font-size: 11.5px;

}

.ew-recent-loading { 

 padding: 8px 0;
 color: var(--ew-component-muted, #5b554c);
 font-size: 13px;

}

.ew-important { 

 margin: 6px 10px 10px;
 padding: 14px 26px 16px;

}

.ew-important h2 { 

 margin-bottom: 12px !important;
 font-size: 15px !important;

}

.ew-important h2 span { 

 margin-right: 8px;
 color: var(--ew-component-muted, #676b68);

}

.ew-important-grid { 

 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 22px;

}

.ew-important-grid a { 

 color: var(--ew-component-link, #073d67) !important;
 font-size: 14px;

}

.ew-important-grid small { 

 display: block;
 margin-top: 4px;
 color: var(--ew-component-text, #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,
 .ew-category-grid,
 .ew-important-grid {
   grid-template-columns: 1fr;
 }

 .ew-strip {
   grid-column: span 1;
 }

 .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 { 

 max-width: none !important;
 margin: 0 !important;
 padding: 0 !important;

}

.ew-home figure > a { 

 display: block !important;
 width: 100% !important;
 height: 100% !important;

}

Retrieved from "https://erindal.com/mediawiki/index.php?title=Main_Page&oldid=548"