navbar start button

pass/public/styles/base.less

@@ -59,7 +59,7 @@ button {
   padding: 1rem;
   color: white;
   text-decoration: none;
-  background-color: #3a3af9;
+  background-color: @color-secondary;
   width: max-content;
 }
 
@@ -74,6 +74,7 @@ nav {
   position: relative;
   align-items: center;
   gap: 0 2rem;
+  padding: 0 1rem;
 
   #page-logo a {
     display: flex;
@@ -81,7 +82,6 @@ nav {
     gap: 0.5rem;
     text-decoration: none;
     color: inherit;
-    padding-left: 1rem;
 
     > img {
       width: 1.7rem;
@@ -102,6 +102,8 @@ nav {
     padding: 0;
     display: flex;
     flex-grow: 1;
+    align-items: center;
+    gap: 1rem;
 
     li {
       &.whitespace {
@@ -111,10 +113,19 @@ nav {
         text-decoration: none;
         color: inherit;
         white-space: nowrap;
-        padding: 1rem;
         font-weight: bold;
         &:hover {
-          background-color: @color-main-hover;
+          color: @color-secondary;
+          &.button {
+            color: inherit;
+            background-color: fade(@color-secondary, 70%);
+            border-color: @color-main;
+            color: fade(white, 90%);
+          }
+        }
+        &.button {
+          padding: 0.7rem;
+          transition: background-color 300ms, border-color 300ms, color 300ms;
         }
       }
     }
@@ -125,6 +136,11 @@ nav {
       max-height: 0;
       visibility: hidden;
       transition: max-height 0.5s, padding 0.5s;
+      justify-content: space-around;
+
+      > li.whitespace {
+        display: none;
+      }
     }
 
     > input#nav-opener {
@@ -166,7 +182,7 @@ nav {
     > label[for="nav-opener"] {
       --navbar-opener-color: white;
       display: flex;
-      margin: 1rem;
+      margin: 1rem 0 1rem 1rem;
       align-items: center;
       border: 1px solid var(--navbar-opener-color);
       border-radius: 0.4rem;

pass/public/styles/misc/vars.less

 @color-main: rgb(255, 127, 0);
+@color-secondary: #3a3af9;
 @color-main-hover: lighten(@color-main, 5%);
 @color-main-font-color: white;
 

pass/views/index.ejs

@@ -69,13 +69,13 @@
       <li>
         <h2>Suchanfragen kaufen (ca. 5€ / Monat)</h2>
         <div>
-          Einfach mal ausprobieren, oder dauerhafter Nutzer? Es liegt ganz bei Ihnen. Sie bezahlen nicht nach Zeit, sondern nach Nutzung. Sie haben die Wahl, wie viele Suchanfragen es sein dürfen.
+          Einfach mal ausprobieren, oder dauerhafter Nutzer? Es liegt ganz bei Ihnen. Sie bezahlen nicht nach Zeit, sondern nach Nutzungsmenge. Sie haben die Wahl, wie viele Suchanfragen es sein dürfen.
         </div>
       </li>
       <li>
         <h2>Verwenden Sie Ihren Schlüssel auf beliebig vielen Geräten</h2>
         <div>
-          Ihr Schlüssel kann auf beliebig vielen Geräten verwendet werden. Sie können Ihn auch mit Freunden/Verwandten teilen. Rufen Sie einfach mit Ihrem Gerät MetaGer auf und geben Sie dort Ihren Schlüssel ein, indem Sie auf das Schlüsselsymbol neben der Suchleiste klicken und schon kann es losgehen.
+          Ihr Schlüssel kann auf beliebig vielen Geräten verwendet werden. Sie können Ihn auch mit Freunden/Verwandten teilen. Rufen Sie einfach mit Ihrem Gerät <a href="https://metager.de" target="_blank">MetaGer</a> auf und geben Sie dort Ihren Schlüssel ein, indem Sie auf das Schlüsselsymbol neben der Suchleiste klicken und schon kann es losgehen.
         </div>
       </li>
     </ol>

pass/views/templates/page_header.ejs

@@ -37,7 +37,7 @@
       <li><a href="#">Hilfe</a></li>
       <li class="whitespace"></li>
       <li><a href="#">Schlüssel verwalten</a></li>
-      <li><a href="#">Starten</a></li>
+      <li><a href="#" class="button">Starten</a></li>
     </ul>
   </nav>
   <main>
\ No newline at end of file