Jump to content

Main Page: Difference between revisions

Undo revision 1421 by 4erospace (talk)
Tag: Undo
Switch of design
Line 1: Line 1:
__NOTOC____NOEDITSECTION____NOTITLE__{{#css:
__NOTOC____NOEDITSECTION____NOTITLE__{{#css:
  #welcome-box {
    height: 100px;
    width: auto;
   
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30px;
   
    border: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: #eaecf0;
  }
    
    
    
   .column-div {
<!-- This makes sure applying borders doesn't increase div size (mess things up) -->
    display: flex;
  div {
     flex-direction: column;
     box-sizing: border-box;
   }
   }


<!-- STYLING ELEMENTS (INCLUDING DARK MODE VERSIONS) -->
  #welcome-message {
   .background-basic {
    justify-content: center;
     background-color: #f7faeb;
    padding: 0 0 20px 30px;
     color: #000;
  }
 
   #welcome-title {
     margin: 2px;
     font-size: 180%;
   }
   }
 
 
   @media screen {
   #welcome-slogan {
html.skin-theme-clientpref-night .background-basic {
    padding-left: 5px;
background-color: #383838;
    margin: -2px;
color: #ace;
}
   }
   }
 
 
   .center-text {
   #total-counter {
     text-align: center;
     font-size: 80%;
    padding-left: 120px;
   }
   }
    
    
   .header {
   #a-count {
     font-weight: bold;
     margin: 0px;
    font-size: 120%;
    padding: 2px 2px 2px 2px;
   }
   }
    
    
   .border-basic {
   #e-count {
     border: solid;
     margin: 0px;
    border-width: 2px;
    border-color: #dbed98;
   }
   }
    
    
   .round-border {
   #mini-nav-list {
     border-radius: 5px;
     margin: 15px 0 15px 0;
    font-size: 80%;
    text-align: center;
   }
   }
    
    
   .grid-container {
   #first-container {
     display: flex;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
    margin-bottom: 50px;
   }
   }
    
    
   .column-grid {
   #featured-article {
     flex-direction: column;
     height: 525px;
     flex-basis: 55%;
    width: 50%;
     height: 620px;
    padding-left: 20px;
     padding-right: 20px;
   
    border: solid;
    border-width: 2px;
    border-radius: 10px;
     border-color: #eaecf0;
   }
   }
    
    
   #getting-started {
   #main-page-nav {
     flex-basis: 45%;
     padding-top: 0px;
     height: 600px;
     height: 525px;
     overflow-y: auto;
     width: 50%;
   }
   }
    
    
   #continent-map {
   #title-box {
     flex-basis: 55%;
    display: flex;
     height: 600px;
     flex-direction: row;
     justify-content: space-between;
   }
   }
    
    
   #navigation {
   #featured-title {
     flex-basis: 100%;
     margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 340px;
   }
   }
    
    
   #featured-article, #current-events {
   #feature-stamp {
     padding: 2px 2px 2px 2px;
     padding-right: 20px;
     flex: 0 0 55%;
     margin-top: 0.9em;
    height: 400px;
   }
   }
    
    
   #central-timeline {
   @media screen {
    flex-basis: 45%;
html.skin-theme-clientpref-night #welcome-box #featured-article #second-container {
    height: 800px;
border-color: #404244;
}
   }
   }
    
    
   #lore-date {
   #second-container {
     width: 570px;
     display: flex;
     margin-bottom: 15px;
    flex-direction: column;
     margin-left: auto;
    justify-content: center;
     margin-right: auto;
    align-items: center;
   
    border: solid;
     border-width: 2px;
     border-radius: 10px;
     border-color: #eaecf0;
   }
   }
    
    
   #category-header {
   #map-title {
    text-align: center;
    font-size: 95%;
   }
   }
    
    
  @media screen and (max-width: 850px) {
  .grid-container {
    flex-direction: column; /* The width is 100%, when the viewport is 850px or smaller */
    }
  #map {
    display: none;
  }
  #lore-date {
    width: 100%;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  }
}}
}}
<!-- Flexbox container for the main page elements -->
<div id="welcome-box">[[File:Alathra Icon 128.png|link=]]<div id="welcome-message" class="column-div"><h3 id="welcome-title">Welcome to the Alathra Wiki</h3><p id="welcome-slogan">the official Alathran encyclopedia</p></div><div id="total-counter" class="column-div"><p id="a-count">'''Total articles:''' {{NUMBEROFARTICLES}}</p><p id="e-count">'''Total edits:''' {{NUMBEROFEDITS}}</p></div></div>
<div class="grid-container" style="padding-bottom: 20px;">
<div id="mini-nav-list"><p>[[Wiki for beginners]] • [[List of guides]] • [[Lore calendar]] • [[Contributor portal]] • [[Special:SpecialPages|Special pages]] • [[FAQ]]</p></div>
<div id="getting-started">{{Alathra:Getting started}}</div>


<div id="continent-map"><div id="lore-date" class="center-text background-basic border-basic" style="">Current lore date: '''{{SHINECALENDAR}}'''</div><div id="map" class="center-text">{{Alathra:Map}}</div></div>
<div id="first-container"><div id="featured-article"><div id="title-box"><h3 id="feature-title">Featured article</h3><div id="feature-stamp">[[File:Quality_imagesX10.svg|25px]]</div></div><hr style="width: 96%; margin: 0 0 0 -4px; padding-left: 0;">{{Alathra:Featured article}}</div><div id="main-page-nav">{{Alathra:Navigation}}</div></div>
</div>
<h3 id="category-header">scover the world of Alathra through these categories:</h3>
<div class="grid-container" style="padding-bottom: 40px;">
<div id="navigation">{{Alathra:Navigation}}</div>
</div>


<div class="grid-container">
<div id="second-container"><h3 id="map-title">Map of the New World</h3><div id="map">{{Alathra:Map}}</div></div>
<div class="grid-container column-grid">
<div id="featured-article" class="background-basic border-basic"><div class="header">Featured article</div>{{Alathra:Featured article}}</div>
<div id="current-events">{{Alathra:General Content}}</div>
</div>
<div id="central-timeline">{{Alathra:Central timeline}}</div>
</div>

Revision as of 23:50, 1 June 2025

Welcome to the Alathra Wiki

the official Alathran encyclopedia

Total articles: 11

Total edits: 2,387

Featured article


Currently no articles to feature!

Map of the New World

Error: Image is invalid or non-existent.