Jump to content

Main Page: Difference between revisions

From Adaris
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Tag: Reverted
Line 1: Line 1:
<templatestyles src="Adaris:Main Page/styles.css" />
/* General styling for boxes and headings */
<div id="mp-topbanner" class="mp-box">
.mp-box {
  <div id="mp-welcomecount">
border: 1px solid #a39171; /* A soft, warm earthy border */
    <div id="mp-welcome"><h1>Welcome to the Adaris Wiki</h1></div>
padding: 0 0.5em 0.5em;
    <div id="mp-free">The free encyclopedia chronicling the fantastical realm of Adaris, where belief shapes reality</div>
margin-top: 2px;
  </div>
background-color: #faf3e3; /* Light parchment-like background for a magical, old-world feel */
</div>
}


{{#if:{{Main Page banner}}|
.mp-h2,
<div id="mp-banner" class="MainPageBG mp-box">
.skin-timeless .mp-h2 {
  {{Main Page banner}}
border: 1px solid #a39171; /* Soft earthy borders */
</div>
margin: 0.5em 0;
}}
padding: 0.4em 0.6em;
<div id="mp-upper">
font-size: 120%;
  <!-- Left Column: Featured Article -->
font-weight: bold;
  <div id="mp-left" class="MainPageBG mp-box">
font-family: inherit;
    <h2 class="mp-h2">Featured Article</h2>
color: #594a35; /* A deep, brownish text color */
    <div id="mp-tfa" class="mp-contains-float">
background-color: #e1d3b5; /* Muted gold for heading backgrounds */
      <!-- Replace with your own article content -->
}
      [[File:Orasian_Council.jpg|alt=|left|thumb|An Orasian Council Meeting|250x250px]]
      <p>'''Orasians''' are a race of beings in [[Adaris]], born from the coalesced consciousness of the earth within the realm of [[Terasil]]. As living embodiments of the earth’s consciousness, Orasians are intrinsically connected to the land...</p>
      <div class="read-more">
[[Orasians|Read the full article...]]
      </div>
    </div>
  </div> <!-- End of mp-left -->


  <!-- Right Column: Explore -->
/* Less prominent text */
  <div id="mp-right" class="MainPageBG mp-box">
.mp-later {
    <h2 class="mp-h2">Featured Article</h2>
font-size: 85%;
    <div class="mp-contains-float">
font-weight: normal;
      <!-- Packed Gallery of Locations -->
color: #7d6f54; /* Muted brown for minor text */
      <div class="gallery-container">
}
<gallery mode="packed" widths="250" heights="150">
File:Caelum.jpg|'''[[Caelum]]''' - The Land of Air, filled with floating islands and magical winds.
File:Zanarak Desert.jpg|'''[[Zanarak Desert]]''' - Land of Sand and Shifting Dunes, home to the Sunshifters.
File:Terasil.jpg|'''[[Terasil]]''' - The Land of Stone, rich in minerals and earthbound osia.
File:Eternal Forest.jpg|'''[[Eternal Forest]]''' - The Bioluminescent Woodland, alive with ancient spirits.
</gallery>
        <div class="explore-more">
          <p>[[Elemara|Explore More: Locations]]</p>
        </div>
      </div>
    </div>
  </div> <!-- End of mp-right -->
</div> <!-- End of mp-upper -->


/* Welcome text at the top */
#mp-welcomecount {
text-align: center;
margin: 0.4em;
}


<!-- Lower Section: Featured Picture -->
#mp-welcome {
<div id="mp-lower" class="MainPageBG mp-box">
font-size: 162%;
  <h2 class="mp-h2">Featured Picture</h2>
padding: 0.1em;
  <div id="mp-tfp" class="mp-contains-float">
color: #594a35; /* Deep brown for the welcome text */
    [[File:Sunshifter_Shaman.jpg|frameless|center|600px]]
}
    <div class="featured-caption">
      A Sunshifter Shaman in the [[Zanarak Desert]], known for their mastery of alchemy and transformation.
    </div>
  </div>
</div> <!-- End of mp-lower -->


<div id="mp-bottom" class="mp-box">
#mp-welcome h1,
  <h2 id="mp-other" class="mp-h2">Delve into the Lore</h2>
#mp-welcome .mw-heading1 {
  <div id="mp-other-content">{{Delve Into Lore}}</div>
font-size: inherit;
</div>
font-family: inherit;
display: inline;
border: none;
}
 
#mp-free {
font-size: 95%;
color: #7a6a50; /* Muted brown to suggest nature and harmony */
}
 
#articlecount {
font-size: 85%;
color: #7d6f54; /* Slightly softer brown for article count */
}
 
/* Clear floats */
.mp-contains-float::after {
content: "";
display: block;
clear: both;
}
 
/* Flexbox for layout on larger screens */
@media (min-width: 875px) {
#mp-upper {
display: flex;
}
#mp-left {
flex: 1 1 55%;
margin-right: 2px;
}
#mp-right {
flex: 1 1 45%;
margin-left: 2px;
}
}
 
/* Color scheme for specific sections */
@media screen {
#mp-topbanner {
background-color: #faf3e3; /* Light parchment background */
border-color: #a39171; /* Soft earthy border */
}
#mp-banner {
background-color: #e1d3b5; /* Muted gold background */
border-color: #c7b28e; /* Soft gold border */
}
#mp-left {
background-color: #f7efe3; /* Lighter beige for the left column */
border-color: #a39171; /* Soft earthy border */
}
#mp-left .mp-h2 {
background-color: #e9ddc3; /* Soft beige for a natural vibe */
border-color: #b9a583; /* Darker beige border */
color: #594a35; /* Deep brown for text */
}
#mp-right {
background-color: #faf3e3; /* Muted parchment for an enchanted look */
border-color: #a39171; /* Soft gold for contrast */
}
#mp-right .mp-h2 {
background-color: #e1d3b5; /* Muted gold for a soft, readable feel */
border-color: #b09d7b; /* Darker beige for contrast */
}
#mp-middle {
background-color: #f4f0e6; /* Parchment-like background for a classic fantasy vibe */
border-color: #a39171; /* Warm earthy touch */
}
#mp-lower {
background-color: #f7efe3; /* Pale beige for the lower section */
border-color: #c7b28e; /* Soft beige border */
}
#mp-bottom {
border-color: #a39171; /* Soft brownish border for the bottom */
}
#mp-bottom .mp-h2 {
background-color: #f0e6d8; /* Soft parchment background */
border-color: #b09d7b; /* Warm brown border */
}
}
 
/* Dark mode color scheme */
html.skin-theme-clientpref-night #mp-topbanner {
background-color: #333333;
border-color: #676767;
}
 
html.skin-theme-clientpref-night #mp-banner {
background-color: #3b3b3b;
border-color: #5c5c5c;
}
 
html.skin-theme-clientpref-night #mp-left {
background-color: #2f2f2f;
border-color: #4a4a4a;
}
 
html.skin-theme-clientpref-night #mp-right {
background-color: #2f2f2f;
border-color: #4a4a4a;
}
 
html.skin-theme-clientpref-night #mp-lower {
background-color: #3b3b3b;
border-color: #5c5c5c;
}
 
/* Button-like styling for "Read the full article" and "Explore More" links */
.explore-more {
margin-top: 15px;
clear: both;
display: flex;
justify-content: center;
}
 
.explore-more p a,
.read-more a {
font-size: 1.2em;
font-weight: bold;
color: #594a35; /* Deep brown for links */
text-decoration: none;
padding: 10px 15px;
background-color: #e1d3b5; /* Soft parchment background */
border: 2px solid #b09d7b; /* Darker brown border */
border-radius: 10px;
display: inline-block;
text-align: center;
transition: background-color 0.3s, color 0.3s;
}
 
.explore-more p a:hover,
.read-more a:hover {
background-color: #b09d7b; /* Darker beige on hover */
color: #ffffff; /* White text on hover */
}
 
/* Featured picture container styling */
#mp-tfp {
border: 1px solid #b09d7b; /* Border for the featured image container */
padding: 10px;
border-radius: 5px;
background-color: #faf3e3; /* Light parchment background */
text-align: center;
}
 
/* Featured caption styling */
.featured-caption {
margin-top: 10px;
font-size: 0.9em;
color: #594a35; /* Deep brown */
text-align: center;
font-style: italic;
}
 
/* Ensure layout stays in two columns */
@media (min-width: 875px) {
#mp-upper {
display: flex;
justify-content: space-between;
}
}

Revision as of 04:09, 8 September 2024

/* General styling for boxes and headings */ .mp-box { border: 1px solid #a39171; /* A soft, warm earthy border */ padding: 0 0.5em 0.5em; margin-top: 2px; background-color: #faf3e3; /* Light parchment-like background for a magical, old-world feel */ }

.mp-h2, .skin-timeless .mp-h2 { border: 1px solid #a39171; /* Soft earthy borders */ margin: 0.5em 0; padding: 0.4em 0.6em; font-size: 120%; font-weight: bold; font-family: inherit; color: #594a35; /* A deep, brownish text color */ background-color: #e1d3b5; /* Muted gold for heading backgrounds */ }

/* Less prominent text */ .mp-later { font-size: 85%; font-weight: normal; color: #7d6f54; /* Muted brown for minor text */ }

/* Welcome text at the top */

  1. mp-welcomecount {

text-align: center; margin: 0.4em; }

  1. mp-welcome {

font-size: 162%; padding: 0.1em; color: #594a35; /* Deep brown for the welcome text */ }

  1. mp-welcome h1,
  2. mp-welcome .mw-heading1 {

font-size: inherit; font-family: inherit; display: inline; border: none; }

  1. mp-free {

font-size: 95%; color: #7a6a50; /* Muted brown to suggest nature and harmony */ }

  1. articlecount {

font-size: 85%; color: #7d6f54; /* Slightly softer brown for article count */ }

/* Clear floats */ .mp-contains-float::after { content: ""; display: block; clear: both; }

/* Flexbox for layout on larger screens */ @media (min-width: 875px) { #mp-upper { display: flex; }

#mp-left { flex: 1 1 55%; margin-right: 2px; }

#mp-right { flex: 1 1 45%; margin-left: 2px; } }

/* Color scheme for specific sections */ @media screen { #mp-topbanner { background-color: #faf3e3; /* Light parchment background */ border-color: #a39171; /* Soft earthy border */ }

#mp-banner { background-color: #e1d3b5; /* Muted gold background */ border-color: #c7b28e; /* Soft gold border */ }

#mp-left { background-color: #f7efe3; /* Lighter beige for the left column */ border-color: #a39171; /* Soft earthy border */ }

#mp-left .mp-h2 { background-color: #e9ddc3; /* Soft beige for a natural vibe */ border-color: #b9a583; /* Darker beige border */ color: #594a35; /* Deep brown for text */ }

#mp-right { background-color: #faf3e3; /* Muted parchment for an enchanted look */ border-color: #a39171; /* Soft gold for contrast */ }

#mp-right .mp-h2 { background-color: #e1d3b5; /* Muted gold for a soft, readable feel */ border-color: #b09d7b; /* Darker beige for contrast */ }

#mp-middle { background-color: #f4f0e6; /* Parchment-like background for a classic fantasy vibe */ border-color: #a39171; /* Warm earthy touch */ }

#mp-lower { background-color: #f7efe3; /* Pale beige for the lower section */ border-color: #c7b28e; /* Soft beige border */ }

#mp-bottom { border-color: #a39171; /* Soft brownish border for the bottom */ }

#mp-bottom .mp-h2 { background-color: #f0e6d8; /* Soft parchment background */ border-color: #b09d7b; /* Warm brown border */ } }

/* Dark mode color scheme */ html.skin-theme-clientpref-night #mp-topbanner { background-color: #333333; border-color: #676767; }

html.skin-theme-clientpref-night #mp-banner { background-color: #3b3b3b; border-color: #5c5c5c; }

html.skin-theme-clientpref-night #mp-left { background-color: #2f2f2f; border-color: #4a4a4a; }

html.skin-theme-clientpref-night #mp-right { background-color: #2f2f2f; border-color: #4a4a4a; }

html.skin-theme-clientpref-night #mp-lower { background-color: #3b3b3b; border-color: #5c5c5c; }

/* Button-like styling for "Read the full article" and "Explore More" links */ .explore-more { margin-top: 15px; clear: both; display: flex; justify-content: center; }

.explore-more p a, .read-more a { font-size: 1.2em; font-weight: bold; color: #594a35; /* Deep brown for links */ text-decoration: none; padding: 10px 15px; background-color: #e1d3b5; /* Soft parchment background */ border: 2px solid #b09d7b; /* Darker brown border */ border-radius: 10px; display: inline-block; text-align: center; transition: background-color 0.3s, color 0.3s; }

.explore-more p a:hover, .read-more a:hover { background-color: #b09d7b; /* Darker beige on hover */ color: #ffffff; /* White text on hover */ }

/* Featured picture container styling */

  1. mp-tfp {

border: 1px solid #b09d7b; /* Border for the featured image container */ padding: 10px; border-radius: 5px; background-color: #faf3e3; /* Light parchment background */ text-align: center; }

/* Featured caption styling */ .featured-caption { margin-top: 10px; font-size: 0.9em; color: #594a35; /* Deep brown */ text-align: center; font-style: italic; }

/* Ensure layout stays in two columns */ @media (min-width: 875px) { #mp-upper { display: flex; justify-content: space-between; } }

Retrieved from "https://adaris.wiki/index.php?title=Main_Page&oldid=1017"