Jump to content

Main Page

From Erindal Wiki
Revision as of 18:20, 4 September 2026 by Miyokari (talk | contribs)

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

  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"