View source for Template:Main Redesign

<html>
<Style>
  #firstHeading {
        display:none !important;
  }

@media screen and (min-width:1100px) {
   #bodyContentOuter { 
     margin-left:-30px !important; margin-right:-30px !important;
   }  

   #mw-page-header-links {
     padding-left:10px !important; padding-right:10px !important;
   }
 
   .outer-box {
     margin-bottom:-52px;
   }
}

@media screen and (max-width:1099px) {
   #bodyContentOuter { 
     margin-left:-6px !important; margin-right:-5px !important;
   }
   #mw-page-header-links {
     padding-left:10px !important; padding-right:10px !important;
   }
}

* {
  box-sizing: border-box;
}

@keyframes fadein1 {
   0% {  opacity:0%;  }
   50% { opacity:0%; visibility:visible;}
  100% {opacity:100%; visibility:visible;}
}

@keyframes fadein3 {
   0% {  opacity:0%;  }
   50% { opacity:0%; visibility:visible;}
  100% {opacity:30%; visibility:visible;}
}

@keyframes fadein2 {
   0% {  opacity:0%;  }
   50% { opacity:0%; visibility:visible;}
  100% {opacity:20%; visibility:visible;}
}

@keyframes fadein4 {
   0% {  opacity:0%;  }
   20% { opacity:0%; visibility:visible;}
  100% {opacity:100%; visibility:visible;}
}


@media not all and (min-resolution:.001dpcm) { @media { 
   .card-images-1, .card-images-2, .card-images-3, .rulebook, .op-image, .registered-decks {
     filter:none !important;
     -webkit-filter:none !important;
   } 
   
   .aa-logo, .title-text, .subtitle, .rulebook, .card-images-1, .card-images-2, .card-images-3, op-image {
     animation:none !important;
     opacity:1 !important;
     visibility:visible !important;
   }

   .archon-image {
     animation:none !important;
     opacity:.3 !important;
     visibility:visible !important;
   }
} }

</style>


</html><templatestyles src="Template:Main_Redesign/styles.css" /><html><!-- import fonts -->
<link href='https://fonts.googleapis.com/css?family=Mate SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Zilla Slab' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Calistoga' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Castoro' rel='stylesheet'>

<script>
var slideNumber = 1;
showSlides(slideNumber);

function changeSlide(n) {
  showSlides(slideNumber += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("essay-slide");
  if (n > slides.length) {slideNumber = 1} 
  if (n < 1) {slideNumber = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideNumber-1].style.display = "block";  
}
</script>
<div class="outer-box">
<div class="random-cards" data-number="3">
  <div class="card-images-1"></div>
  <div class="card-images-2"></div>
  <div class="card-images-3"></div> 
</div>
   <div class="rulebook"><img src="/images/8/80/Keyforgerulescover.png" alt="KeyForge rulebook cover"><A href="Rules">Rules Outline</a></div>
  <div class="op-image"><img src="https://archonarcana.com/images/3/33/Vault_tour.jpg" alt="KeyForge Vault Tour"><a href="Vault_Tour">Vault Tour</a></div> 
<div class="registered-decks">
  <span class="deck-registration-title"><img src="/images/f/f6/Line_graph_symbol.png" alt="Upward arrow from a line chart">Deck Registrations<br>Updated Hourly</span>
  <span>Total decks registered:</span><span class="total_deck_count"></span>
  <span>Decks registered last month: </span><span class="month_deck_count"></span>
  <span>Decks registered last week:</span><span class="week_deck_count"></span>
</div>

  <!-- title section -->
  <img src="/images/7/73/AAlogo_large.jpg" class="archon-image" alt="The Archon Arcana logo, an Archon holding an open book">
  <div class="title-text"><span class="title-accent">A</span>rchon <span class="title-accent">A</span>rcana</div>
  <div class="subtitle">the KeyForge wiki<span class="desktop-display"> powered by a community of KeyForge players</span></div>

  <!-- first menu section: cards -->

  <div class="card-title"><img src="/images/4/40/Noun_card_game_2887244.png" alt="Cards icon">Cards</div>

  <div class="welcome-message">New to KeyForge? <img src="/images/0/0e/Noun_Waving_Hand_3022030.png" alt="Hand waving"> <span class="mobile-block">Start with our&nbsp;<a href="New_Player_Guide"><div class="hidden-bg"></div>New Player Guide.</a></span></div>

  <div class="menu-1">
    <div class="card-menu-1"></html>{{{Cards1}}}<html></div>
    <div class="card-menu-2"></html>{{{Cards2}}}<html></div>
  </div>

  <!-- second menu section: rules -->

  <div class="rules-title">
    <img src="/images/1/15/Noun_rules_1430335.png" alt="Rules icon">Rules
  </div>

  <div class="menu-2">
    <div class="rules-menu-1">
      <div class="menu-title">Game Rules</div>
      </html>{{{Rules1}}}<html>
    </div>

    <div class="rules-menu-2">
      <div class="menu-title">Rulings</div>
      </html>{{{Rules2}}}<html>
    </div>

    <div class="rules-menu-3">
      <div class="menu-title">Tournament Rules</div>
      </html>{{{Rules3}}}<html>
    </div>

    <div class="deck-search">
      <div class="deck-search-text"><img src="/images/b/bf/Noun_document_search_1059863.png" alt="Search icon">Look up rulings and errata for your deck.</div>
      <form class="deckSearch" action="/Deck Search">
        <input type="text" placeholder="Deck Name" name="deckName">
        <button type="submit"><img src="/images/8/84/Noun_Search_1298685.png" alt="Search icon"></button>
      </form>
    </div>

  </div>

  <!-- third menu section: organized play -->

  <div class="op-title"><img src="/images/f/f8/Noun_match_tournament_chart_3085119.png" alt="Organized play icon">Organized Play
  </div>

  <div class="menu-3">
    <div class="op-menu-1">
      <div class="menu-title">Overview</div>
      </html>{{{OP1}}}<html>
    </div>

    <div class="op-menu-2">
      <div class="menu-title">Tournament Tiers</div>
      </html>{{{OP2}}}<html>
    </div>

  </div>

  <!-- fourth section: explore/resources -->

  <div class="explore-title">
    <img src="/images/0/0f/Noun_Idea_227816.png" alt="Icon representing new ideas">Explore
  </div>
  <div class="menu-4">
    <div class="explore-menu-1">
      <div class="menu-title">Player Resources</div>
      </html>{{{Explore1}}}<html>
    </div>
    <div class="explore-menu-2">
      <div class="menu-title">Information</div>
      </html>{{{Explore2}}}<html>
    </div>
    <div class="explore-menu-3">
      <div class="menu-title">Contributions</div>
      </html>{{{Explore3}}}<html>
    </div>
    
    </div>
    
  <!-- short list of recent community essays --> 
  <div class="essay-title"><img src="/images/f/f7/Noun_Pencil_225188.png" alt="Pen writing">Recent Community Essays</div>
  
  <div class="essay-slideshow">
    </html>{{{Essays}}}<html>
    <a class="prev" onclick="changeSlide(-1)"><</a>
    <a class="next" onclick="changeSlide(1)">></a>
  </div>

  <!-- fifth section: news & upcoming events -->

  <div class="news-title">
    <img src="/images/9/97/Noun_Calendar_2080403.png" alt="Calendar icon"><span class="desktop-display">News & Upcoming&nbsp;</span>Events
  </div>
  <div class="menu-5">
    <div class="news">
      <div class="menu-5-title">News</div>
      <div class="menu-5-content"></html>{{:News}}<html>
          <p><a href="News">News Archive</a><img src="/images/1/1d/Noun_arrow_forward_1867504.png" class="news-arrow" alt="Forward arrow"></p>
      </div>
    </div>
    <div class="upcoming-events">
      <div class="menu-5-title">Upcoming Events</div>
      <div class="menu-5-content"></html>{{:Upcoming Events}}<html>
      </div>
    </div>
  </div>

  <!-- sixth section: disclaimer & about section -->

  <div class="disclaimer-title"><img src="/images/a/af/Noun_Community_2348464.png" alt="Community icon">About the Wiki</div>
  <div class="contribute-text"><img src="/images/5/56/Noun_write_3406057.png" alt="Pencil writing">Archon Arcana is maintained entirely by volunteers. Find out how you can <a href="/Archon_Arcana:Contribute"><div class="hidden-bg"></div>write for the wiki.</a> </div>
  <div class="disclaimer-text"></html>{{{Footer}}}<html></div>
  <div class="contact-row">
    <div class="contact-link"><a href="mailto:requests@archonarcana.com"><img src="/images/a/ae/Noun_envelope_1922517.png" alt="E-mail icon">E-mail</a></div>
    <div class="contact-link"><a href="https://discord.gg/K4PVFW2"><img src="/images/4/4d/Discord-Logo-Black.png" alt="Discord logo">Discord</a></div>
    <div class="contact-link"><a href="https://twitter.com/ArchonArcana"><img src="/images/0/05/Twitter_black_icon.png" alt="Twitter logo">Twitter</a></div>
  </div>
</html>
__NOTOC__