Template:NavCell: Difference between revisions

← Older edit Newer edit →

Revision as of 15:32, 4 December 2025

Nearby: None

@@ Line 1: / Line 1: @@
-/* SK navigation cells */
+<div class="navcell">
-.navcell {
+<div class="navcell-header">
-  margin: 1.5em 0;
+{{{title|}}}
-}
+</div>
-/* 3×3 compass grid */
+<div class="navcell-directions">
-.nav-grid {
+<div class="nav-grid">
-  display: grid;
-  grid-template-columns: 60px 60px 60px;
-  grid-template-rows: 60px 60px 60px;
-  gap: 6px;
-  justify-content: center;
-  margin: 1em 0;
-}
-.nav-btn {
+  <!-- row 1 -->
-   display: flex;
+   <div class="nav-empty"></div>
-  align-items: center;
+   <div class="nav-btn nav-link-north">{{{north|}}}</div>
-   justify-content: center;
+   <div class="nav-empty"></div>
-  background: #222;
-  border: 1px solid #444;
-  border-radius: 6px;
-  font-size: 0.9em;
-   text-decoration: none !important;
-  color: #eee !important;
-}
-.nav-btn:hover {
+  <!-- row 2 -->
-   background: #333;
+  <div class="nav-btn nav-link-west">{{{west|}}}</div>
-   border-color: #777;
+   <div class="nav-btn nav-center">[[File:CompassRoseTrans.png|50px|center|link=]]</div>
-}
+   <div class="nav-btn nav-link-east">{{{east|}}}</div>
-.nav-empty {
+  <!-- row 3 -->
-   background: transparent;
+  <div class="nav-empty"></div>
-   border: none;
+   <div class="nav-btn nav-link-south">{{{south|}}}</div>
-}
+   <div class="nav-empty"></div>
-/* Up / Down row */
+</div>
-.nav-vertical-row {
+<div class="nav-vertical-row">
-   display: flex;
+   <div class="nav-btn nav-vertical nav-link-up">{{{up|}}}</div>
-   justify-content: center;
+   <div class="nav-btn nav-vertical nav-link-down">{{{down|}}}</div>
-  gap: 8px;
+</div>
-  margin: 0.5em 0 1em 0;
-}
-.nav-vertical {
+</div>
-  min-width: 70px;
-}
-/* Make the link fill the button */
+<div class="navcell-nouns">
+Nearby: {{{nouns|None}}}
+</div>
-.nav-btn a {
+<div class="navcell-desc">
-  text-decoration: none !important;
+{{{desc|}}}
-  color: inherit !important;
+</div>
-  width: 100%;
-  height: 100%;
+<div class="navcell-lore">
-  display: flex;
+{{{lore|}}}
-  align-items: center;
+</div>
-  justify-content: center;
-}
+</div>