[S] Better home page tab styling

AquaNet/src/App.svelte

@@ -68,22 +68,6 @@
         > span
           display: none
 
-    > div, > a
-      cursor: pointer
-      transition: $transition
-      text-decoration: underline 1px solid transparent
-      text-underline-offset: 0.1em
-
-      display: flex
-      align-items: center
-      color: unset
-      font-weight: unset
-
-      &:hover
-        color: $c-main
-        text-decoration-color: $c-main
-        text-underline-offset: 0.5em
-
     @media (max-width: $w-mobile)
       justify-content: center
 

AquaNet/src/app.sass

@@ -176,6 +176,16 @@ main.content
   @media (max-width: $w-mobile)
     margin: 100px 0 0
 
+  > h2.outer-title
+    margin-top: -3.5rem
+    //color: transparent
+    //background-color: rgba($c-main, 70%)
+    //-webkit-background-clip: text
+    //background-clip: text
+    //text-shadow: rgb(0 0 0 / 50%) 0 5px 6px
+
+    @media (max-width: $w-mobile)
+      text-align: center
 
 // Overlay
 .overlay
@@ -206,4 +216,21 @@ main.content
     max-width: 400px
 
 .no-margin
-  margin: 0
+  margin: 0
+
+nav
+  > div, > a
+    cursor: pointer
+    transition: $transition
+    text-decoration: underline 1px solid transparent
+    text-underline-offset: 0.1em
+
+    display: flex
+    align-items: center
+    color: unset
+    font-weight: unset
+
+    &:hover
+      color: $c-main
+      text-decoration-color: $c-main
+      text-underline-offset: 0.5em

AquaNet/src/pages/Home.svelte

@@ -5,15 +5,20 @@
   import {FADE_IN, FADE_OUT} from "../libs/config";
 
   let tab = 0;
+  let tabs = ["Portal", "Link Card", "Game Setup"];
 </script>
 
 <main class="content">
-  <h2>Welcome to AquaDX!</h2>
-
+  <h2 class="outer-title">Home</h2>
   <nav class="tabs">
-    <button class:active={tab === 0} on:click={() => tab = 0}>Welcome</button>
-    <button class:active={tab === 1} on:click={() => tab = 1}>Link Card</button>
-    <button class:active={tab === 2} on:click={() => tab = 2}>Setup Instructions</button>
+    {#each tabs as t, i}
+      <div class="clickable"
+        class:active={tab === i}
+        on:click={() => tab = i}
+        on:keydown={(e) => e.key === "Enter" && (tab = i)}
+        role="button" tabindex={i}>{t}
+      </div>
+    {/each}
   </nav>
 
   {#if tab === 0}
@@ -28,4 +33,16 @@
       <SetupInstructions/>
     </div>
   {/if}
-</main>
+</main>
+
+<style lang="sass">
+  @import "../vars"
+
+  .tabs
+    display: flex
+    gap: 1rem
+
+    div
+      &.active
+        color: $c-main
+</style>