Template:Gateways: Difference between revisions

← Older edit Newer edit →

VisualWikitext

Revision as of 15:30, 13 December 2024

Games

Characters

Enemies

Locations

Items

Runes & Skills

Organizations

Lore

Cards

Publications

Music & Media

Personnel

@@ Line 1: / Line 1: @@
-<div id="home-nav" class="home-grid" {{{1}}} role="navigation">
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;">
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-games">
+    <div style="display: flex; flex-direction: column; align-items: center;">
-		<div class="home-card__background">[[File:MainTabs-Games.webp|link=Gateway:Games]]</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-		<div class="home-card__foreground" {{{3}}}>Games</div>
+            [[File:MainTabs-Games.webp|thumb|alt=Games|link=Gateway:Games]]
-	</div>
+        </div>
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-characters">
+        <div>Games</div>
-		<div class="home-card__background">[[File:MainTabs-Characters.webp|link=Gateway:Characters]]</div>
+    </div>
-		<div class="home-card__foreground" {{{3}}}>Characters</div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
-	</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-enemies">
+            [[File:MainTabs-Characters.webp|thumb|alt=Characters|link=Gateway:Characters]]
-		<div class="home-card__background">[[File:MainTabs-Enemies.webp|link=Gateway:Enemies]]</div>
+        </div>
-		<div class="home-card__foreground" {{{3}}}>Enemies</div>
+        <div>Characters</div>
-	</div>
+    </div>
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-locations">
+    <div style="display: flex; flex-direction: column; align-items: center;">
-		<div class="home-card__background">[[File:MainTabs-Locations.webp|link=Gateway:Locations]]</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-		<div class="home-card__foreground" {{{3}}}>Locations</div>
+            [[File:MainTabs-Enemies.webp|thumb|alt=Enemies|link=Gateway:Enemies]]
-	</div>
+        </div>
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-items">
+        <div>Enemies</div>
-		<div class="home-card__background">[[File:MainTabs-Items.webp|link=Gateway:Items]]</div>
+    </div>
-		<div class="home-card__foreground" {{{3}}}>Items</div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
-	</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-abilities">
+            [[File:MainTabs-Locations.webp|thumb|alt=Locations|link=Gateway:Locations]]
-		<div class="home-card__background">[[File:MainTabs-Abilities.webp|link=Gateway:Skills]]</div>
+        </div>
-		<div class="home-card__foreground" {{{3}}}>Runes & Skills</div>
+        <div>Locations</div>
-	</div>
+    </div>
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-orgs">
+    <div style="display: flex; flex-direction: column; align-items: center;">
-		<div class="home-card__background">[[File:MainTabs-Organizations.webp|link=Gateway:Organizations]]</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-		<div class="home-card__foreground" {{{3}}}>Organizations</div>
+            [[File:MainTabs-Items.webp|thumb|alt=Items|link=Gateway:Items]]
-	</div>
+        </div>
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-lore">
+        <div>Items</div>
-		<div class="home-card__background">[[File:MainTabs-Lore.webp|link=Gateway:Lore]]</div>
+    </div>
-		<div class="home-card__foreground" {{{3}}}>Lore</div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
-	</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-cards">
+            [[File:MainTabs-Abilities.webp|thumb|alt=Runes & Skills|link=Gateway:Skills]]
-		<div class="home-card__background">[[File:MainTabs-Cards.webp|link=Gateway:Cards]]</div>
+        </div>
-		<div class="home-card__foreground" {{{3}}}>Cards</div>
+        <div>Runes & Skills</div>
-	</div>
+    </div>
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-publications">
+    <div style="display: flex; flex-direction: column; align-items: center;">
-		<div class="home-card__background">[[File:MainTabs-Publications.webp|link=Gateway:Publications]]</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-		<div class="home-card__foreground" {{{3}}}>Publications</div>
+            [[File:MainTabs-Organizations.webp|thumb|alt=Organizations|link=Gateway:Organizations]]
-	</div>
+        </div>
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-music">
+        <div>Organizations</div>
-		<div class="home-card__background">[[File:MainTabs-Music.webp|link=Gateway:Music]]</div>
+    </div>
-		<div class="home-card__foreground" {{{3}}}>Music & Media</div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
-	</div>
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-	<div class="home-card home-card--button" {{{2}}} id="home-nav-personnel">
+            [[File:MainTabs-Lore.webp|thumb|alt=Lore|link=Gateway:Lore]]
-		<div class="home-card__background">[[File:MainTabs-Personnel.webp|link=Gateway:Personnel]]</div>
+        </div>
-		<div class="home-card__foreground" {{{3}}}>Personnel</div>
+        <div>Lore</div>
-	</div>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
+            [[File:MainTabs-Cards.webp|thumb|alt=Cards|link=Gateway:Cards]]
+        </div>
+        <div>Cards</div>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
+            [[File:MainTabs-Publications.webp|thumb|alt=Publications|link=Gateway:Publications]]
+        </div>
+        <div>Publications</div>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
+            [[File:MainTabs-Music.webp|thumb|alt=Music & Media|link=Gateway:Music]]
+        </div>
+        <div>Music & Media</div>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center;">
+        <div style="max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center;">
+            [[File:MainTabs-Personnel.webp|thumb|alt=Personnel|link=Gateway:Personnel]]
+        </div>
+        <div>Personnel</div>
+    </div>
 </div>
-<noinclude>[[Category:Main Page templates]]</noinclude>