User:4erospace/sandbox: Difference between revisions

m CSS test
m CSS test
Line 1: Line 1:
{{#css:
__NOTOC____NOEDITSECTION____NOTITLE__<!-- Some CSS elements have been lifted to MediaWiki:Common.css to pass variable color values -->{{#css:
   .featuredarticleimage {
  #welcome-box {
     background-color: #fff;
    height: 100px;
     border: 2px outset #eaecf0;
    width: auto;
     padding: 4px;
   
    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 {
    display: flex;
    flex-direction: column;
  }
 
  #welcome-message {
    flex: 50%;
    justify-content: center;
    padding: 0 0 20px 30px;
  }
 
  #welcome-title {
    margin: 2px;
    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: 20px;
  }
 
  #news-container {
    margin-bottom: 20px;
  }
 
  #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 {
   @media screen {
html.skin-theme-clientpref-night .featuredarticleimage {
html.skin-theme-clientpref-night #welcome-box, html.skin-theme-clientpref-night #featured-article, html.skin-theme-clientpref-night #second-container {
background-color: #202122;
border-color: #27292d;
        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) {
    #first-container, #welcome-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;
      padding: 0;
     
      border: none;
    }
   
    #welcome-message {
      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 style="margin-top: 10px;">[[File:Parchment map of Flone.png|145px|left|class=featuredarticleimage]] '''Flohelme''', officially known as the '''United Townships of Flone''', is a union of settlements located on [[Flone]], the largest island of the [[West Preludes]]. Its largest settlement, [[Smule]], serves as the de facto capital, housing the central administration and acting as the cultural and economic hub. Flohelme’s economy is primarily driven by its extensive mining and metalworking industries, benefiting from the island’s rich deposits of unique metals found in Flone’s mountainous regions. Flohelme's history is closely tied to their neighbour [[Dotlands]] from their past as a former colony. After having gained its independence, Flohelme was also a major belligerent in the [[Allwar]].<br>('''[[Flohelme|Read more]]''')</div>
<div style="text-align:center;"><p style="border:2px solid ; width: 80%; margin-left: auto; margin-right: auto;">Please note: you are currently viewing the in-progress build of the Wiki, meant for use during the Beta test release. Some features might be missing, broken or will change compared to the full release.</p></div>
<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="news-container">{{Newsticker}}</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|link=Alathra:Featured article]]</div></div><hr style="width: auto; margin: 0;">{{Alathra:Featured article}}</div><div id="main-page-nav">{{Alathra:Navigation}}</div></div>