add: logo

ProPapier Logo, different claim

app/assets/styles/header.css

@@ -3,13 +3,19 @@
     top: 0;
     z-index: 100;
     background: var(--color-main-darkest);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: var(--padding-default);
+
+    & .logo {
+        height: 40px;
+    }
 
     & header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: var(--padding-default);
-        padding-bottom: 0;
         font-family: 'Roboto', sans-serif;
         font-weight: bold;
 

app/assets/styles/page.css

@@ -23,7 +23,6 @@
 
 .search-bar {
     z-index: 100;
-    padding: 0 1rem 1rem 1rem;
 
     & p {
         font-family: 'Roboto Condensed', sans-serif;

app/components/Pp/Header.vue

@@ -1,24 +1,27 @@
 <template>
   <div class="Header">
-    <header>
-      <NuxtLink class="header-text" to="/">
-        ProPapier
-      </NuxtLink>
-      <label for="burger_nav_toggle" v-if="available">
-        <Icon name="solar:hamburger-menu-broken" size="2em" />
-      </label>
-      <input type="checkbox" id="burger_nav_toggle" v-if="available" />
-      <nav class="flex-col" v-if="available">
-        <label for="burger_nav_toggle">
-          <Icon name="solar:close-circle-broken" />
+    <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
+    <div>
+      <header>
+        <NuxtLink class="header-text" to="/">
+          ProPapier
+        </NuxtLink>
+        <label for="burger_nav_toggle" v-if="available">
+          <Icon name="solar:hamburger-menu-broken" size="2em" />
         </label>
-        <ul class="flex-col">
-          <li>Home</li>
-          <li>Übersicht</li>
-        </ul>
-      </nav>
-    </header>
-    <div id="subheader" />
+        <input type="checkbox" id="burger_nav_toggle" v-if="available" />
+        <nav class="flex-col" v-if="available">
+          <label for="burger_nav_toggle">
+            <Icon name="solar:close-circle-broken" />
+          </label>
+          <ul class="flex-col">
+            <li>Home</li>
+            <li>Übersicht</li>
+          </ul>
+        </nav>
+      </header>
+      <div id="subheader" />
+    </div>
   </div>
 </template>
 

app/pages/index.vue

@@ -14,7 +14,7 @@
       />
       <Teleport to="#subheader">
         <div class="search-bar">
-          <p>Preise. Schnell. Unkompliziert.</p>
+          <p>Preisvergleich. Schnell. Unkompliziert.</p>
         </div>
       </Teleport>
       <section class="content flex-col">