|
|
| Line 1: |
Line 1: |
| __NOTOC____NOEDITSECTION____NOTITLE__{{#css:
| | {{#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 { | | .wrapper { |
| display: flex; | | max-width: 100%; |
| flex-direction: column; | | overflow: hidden; |
| } | | } |
|
| |
|
| #welcome-message { | | .marquee { |
| flex: 50%; | | white-space: nowrap; |
| justify-content: center; | | overflow: hidden; |
| padding: 0 0 20px 30px; | | display: inline-block; |
| | animation: marquee 10s linear infinite; |
| } | | } |
|
| | |
| #welcome-title {
| | .marquee p { |
| margin: 2px;
| | display: inline-block; |
| font-size: 180%;
| |
| }
| |
|
| |
| #welcome-slogan {
| |
| padding-left: 5px;
| |
| margin: -2px;
| |
| }
| |
|
| |
| #total-counter {
| |
| flex: 12%;
| |
| font-size: 80%;
| |
| }
| |
|
| |
| #a-count {
| |
| margin: auto;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| #e-count {
| |
| margin: auto;
| |
| margin-top: 0;
| |
| }
| |
|
| |
| #u-count {
| |
| margin: auto;
| |
| margin-top: 0;
| |
| }
| |
|
| |
| #mini-nav-list {
| |
| margin: 15px 0 15px 0;
| |
| font-size: 80%;
| |
| text-align: center;
| |
| }
| |
|
| |
| #first-container {
| |
| display: flex;
| |
| margin-bottom: 50px;
| |
| }
| |
|
| |
| #featured-article {
| |
| height: 525px;
| |
| width: 50%;
| |
| padding-left: 20px;
| |
| padding-right: 20px;
| |
|
| |
| border: solid;
| |
| border-width: 2px;
| |
| border-radius: 10px;
| |
| border-color: #eaecf0;
| |
| overflow-y: auto;
| |
| }
| |
|
| |
| #main-page-nav {
| |
| padding: 0 0 0 10px;
| |
| height: auto;
| |
| width: 50%;
| |
| }
| |
|
| |
| #title-box { | |
| display: flex;
| |
| flex-direction: row;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| #featured-title {
| |
| margin: 0;
| |
| }
| |
|
| |
| #feature-stamp {
| |
| margin-top: 0.9em;
| |
| }
| |
|
| |
| #second-container {
| |
| display: flex; | |
| flex-direction: column;
| |
| justify-content: center;
| |
| align-items: center;
| |
| width: 90%;
| |
| margin: auto;
| |
|
| |
| background-color: #f5f1e4;
| |
|
| |
| border: solid;
| |
| border-width: 2px;
| |
| border-radius: 10px;
| |
| border-color: #eaecf0;
| |
| }
| |
|
| |
| #map-title {
| |
| margin: 10px 0 5px 0;
| |
| padding: 5px 10px;
| |
| background-color: #f7f5ed;
| |
|
| |
| border: outset;
| |
| border-width: 3px;
| |
| }
| |
|
| |
| #map-subtitle {
| |
| font-style: italic;
| |
| font-size: 80%;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| @media screen {
| |
| html.skin-theme-clientpref-night #welcome-box #featured-article #second-container {
| |
| border-color: #404244;
| |
| }
| |
|
| |
| html.skin-theme-clientpref-night #second-container {
| |
| background-color: #1a1403;
| |
| }
| |
|
| |
| html.skin-theme-clientpref-night #map-title {
| |
| background-color: #362904;
| |
| }
| |
|
| |
| }
| |
|
| |
| @media screen and (max-width: 1300px) {
| |
| #second-container {
| |
| display: none;
| |
| }
| |
| } | | } |
|
| |
|
| @media screen and (max-width: 900px) { | | @keyframes marquee { |
| #first-container, #welcome-box { | | 0% { |
| display: flex; | | transform: translate3d(0, 0, 0); |
| flex-direction: column;
| |
| align-items: center;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| margin-bottom: 50px;
| |
| padding: 0;
| |
|
| |
| border: none;
| |
| } | | } |
| | | 100% { |
| #welcome-message {
| | transform: translate3d(-50%, 0, 0); |
| padding: 0; | |
| text-align: center;
| |
| }
| |
|
| |
| #featured-article {
| |
| width: auto;
| |
| height: auto;
| |
| margin-bottom: 50px;
| |
|
| |
| border: none;
| |
| }
| |
|
| |
| #main-page-nav {
| |
| padding: 0;
| |
| width: auto;
| |
| margin: auto;
| |
| }
| |
|
| |
| #total-counter {
| |
| display: none;
| |
| }
| |
|
| |
| .respimage {
| |
| display: none;
| |
| } | | } |
| } | | } |
| | | |
| }} | | }} |
| <div id="welcome-box">[[File:Alathra Icon 128.png|link=|class=respimage]]<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><p id="u-count">'''Active users:''' {{NUMBEROFACTIVEUSERS}}</p></div></div>
| |
| <div id="mini-nav-list"><p>[[Alathra:Wiki Guide|Wiki for beginners]] • [[List of guides]] • [[Shine calendar|Lore calendar]] • [[Contributor portal]] • [[Special:SpecialPages|Special pages]] • [[FAQ]]</p></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: auto; margin: 0;">{{Alathra:Featured article}}</div><div id="main-page-nav">{{Alathra:Navigation}}</div></div>
| |
|
| |
|
| <div id=" second-container">< h3 id=" map-title"> Map of the New World</ h3><p id="map-subtitle"> Click on any continent to get started</p> <div id="map">{{Alathra:Map}}</div></div> | | <div class="wrapper"> |
| | <div class="marquee"> |
| | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.</p> |
| | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.</p> |
| | </div> |
| | </div> |
