View source for Alathra:Navigation

{{#css:
  #nav {
    height: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  #nav-row {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 50px;
    flex-wrap;
  }
  
  @media screen and (max-width: 800px) {
    #nav {
      height: 1200px;
      align-items: center;
    }
    #nav-row {
      align-items: center;
      flex-direction: column;
      gap: 20px;
    }
  }
}}
<div id="nav">
<div id="nav-row">
{{Navcard
|image=Reading guides.png
|link=[[Guides]]
|text=Guides
}}
{{Navcard
|link=[[History]]
|text=History
}}
{{Navcard
|link=[[Events]]
|text=Events
}}
</div>
<div id="nav-row">
{{Navcard
|size=mini
|link=[[Nations]]
|text=Nations
}}
{{Navcard
|size=mini
|link=[[Towns]]
|text=Towns
}}
{{Navcard
|size=mini
|link=[[Individuals]]
|text=Individuals
}}
{{Navcard
|size=mini
|link=[[Universe]]
|text=Universe
}}
{{Navcard
|image=Placeholder - Map Image.jpg
|size=mini
|link=[[Cartography]]
|text=Cartography
}}

</div>
</div>