Homepage fanciness

Author: CodeCasterNL

src/App.vue

@@ -25,9 +25,9 @@ const needsCatalog = () => !!route.meta.needsCatalog
         </router-link>
         <nav class="header-nav">
           <router-link to="/zoek" active-class="nav-active">Welke batterij?</router-link>
-          <router-link to="/database" active-class="nav-active">Bekijk Modellen</router-link>
-          <router-link to="/merken" active-class="nav-active">Bekijk Merken</router-link>
-          <router-link to="/faq" active-class="nav-active">Veelgestelde Vragen</router-link>
+          <router-link to="/database" active-class="nav-active">Alle modellen</router-link>
+          <router-link to="/merken" active-class="nav-active">Alle merken</router-link>
+          <router-link to="/faq" active-class="nav-active">Veelgestelde vragen</router-link>
         </nav>
       </div>
     </header>

src/assets/css/layout.css

@@ -25,22 +25,25 @@
 }
 
 .header-nav a {
-  color: rgba(255, 255, 255, 0.75);
+  color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
   font-size: 0.85rem;
   font-weight: 500;
   padding: 0.35rem 0.75rem;
   border-radius: var(--radius-sm);
+  background: rgba(0, 0, 0, 0.12);
+  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
 }
 
 .header-nav a:hover {
   color: white;
-  background: rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
 }
 
 .header-nav a.nav-active {
   color: white;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(0, 0, 0, 0.25);
 }
 
 .header-brand {