From ef1dc389a26ed9055076fbd81db8ced8bb9c2715 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Fri, 2 Dec 2022 16:33:33 +0100
Subject: [PATCH] navbar start button

---
 pass/public/styles/base.less         | 26 +++++++++++++++++++++-----
 pass/public/styles/misc/vars.less    |  1 +
 pass/views/index.ejs                 |  4 ++--
 pass/views/templates/page_header.ejs |  2 +-
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index fd3cc29..cf3717f 100644
--- a/pass/public/styles/base.less
+++ b/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;
diff --git a/pass/public/styles/misc/vars.less b/pass/public/styles/misc/vars.less
index da26860..e8e1663 100644
--- a/pass/public/styles/misc/vars.less
+++ b/pass/public/styles/misc/vars.less
@@ -1,4 +1,5 @@
 @color-main: rgb(255, 127, 0);
+@color-secondary: #3a3af9;
 @color-main-hover: lighten(@color-main, 5%);
 @color-main-font-color: white;
 
diff --git a/pass/views/index.ejs b/pass/views/index.ejs
index 9ebc36e..85f2f1e 100644
--- a/pass/views/index.ejs
+++ b/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>
diff --git a/pass/views/templates/page_header.ejs b/pass/views/templates/page_header.ejs
index a9b4bc8..063f00b 100644
--- a/pass/views/templates/page_header.ejs
+++ b/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
-- 
GitLab