|
|
| Line 1: |
Line 1: |
| __NOTOC____NOEDITSECTION____NOTITLE__{{#css: | | __NOTOC____NOEDITSECTION____NOTITLE__{{#css: |
| | | #welcome-box { |
|
| | height: 200px; |
| <!-- This makes sure applying borders doesn't increase div size (mess things up) -->
| | width: 100%; |
| div {
| | border: solid; |
| box-sizing: border-box; | | border-width: 2px; |
| }
| | border-radius: 10px; |
| | | border-color: var(--background-color-disabled-subtle); |
| <!-- STYLING ELEMENTS (INCLUDING DARK MODE VERSIONS) -->
| |
| .background-basic {
| |
| background-color: #f7faeb; | |
| color: #000; | |
| }
| |
| | |
| @media screen {
| |
| html.skin-theme-clientpref-night .background-basic {
| |
| background-color: #383838;
| |
| color: #ace;
| |
| }
| |
| } | | } |
|
| |
|
| .center-text { | | #welcome-message { |
| text-align: center;
| |
| }
| |
|
| |
| .header {
| |
| font-weight: bold;
| |
| font-size: 120%; | | font-size: 120%; |
| padding: 2px 2px 2px 2px;
| |
| }
| |
|
| |
| .border-basic {
| |
| border: solid;
| |
| border-width: 2px;
| |
| border-color: #dbed98;
| |
| }
| |
|
| |
| .round-border {
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| .grid-container {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .column-grid {
| |
| flex-direction: column;
| |
| flex-basis: 55%;
| |
| height: 620px;
| |
| }
| |
|
| |
| #getting-started {
| |
| flex-basis: 45%;
| |
| height: 600px;
| |
| overflow-y: auto;
| |
| }
| |
|
| |
| #continent-map {
| |
| flex-basis: 55%;
| |
| height: 600px;
| |
| }
| |
|
| |
| #navigation {
| |
| flex-basis: 100%;
| |
| padding-top: 20px;
| |
| padding-bottom: 20px;
| |
| height: 340px;
| |
| }
| |
|
| |
| #featured-article, #current-events {
| |
| padding: 2px 2px 2px 2px;
| |
| flex: 0 0 55%;
| |
| height: 400px;
| |
| }
| |
|
| |
| #central-timeline {
| |
| flex-basis: 45%;
| |
| height: 800px;
| |
| }
| |
|
| |
| #lore-date {
| |
| width: 570px;
| |
| margin-bottom: 15px;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| }
| |
|
| |
| #category-header {
| |
| 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"><h3 id="welcome-message">Welcome to the Alathra Wiki</h3></div> |
| <div class="grid-container" style="padding-bottom: 20px;">
| |
| <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>
| |
| <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 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> | |
Welcome to the Alathra Wiki
