moved footer in header

blog/src/components/Footer.astro

@@ -1,20 +0,0 @@
-<footer>
-    <a class="nav-link" href="/impressum">Impressum</a>
-    <a class="nav-link" href="/privacy-policy">Datenschutz</a>
-</footer>
-
-
-<style>
-    footer {
-        display: flex;
-        width: 100vw;
-        justify-content: end;
-        padding: 16px 0;
-        background-color: var(--primary-color);
-    }
-
-    a {
-        padding-right: 32px;
-    }
-    
-</style>

blog/src/components/Header.astro

@@ -1,33 +1,55 @@
 <header>
-    <span id="name">Blauwasser Mausis</span>
-    <span class="vertical-line"></span>
-    <nav>
-        <a class="nav-link" href="/">Startseite</a>
-        <!-- <a class="nav-link" href="/about">Über uns</a> -->
-    </nav>
+  <span id="name">Blauwasser Mausis</span>
+  <span class="vertical-line"></span>
+  <nav>
+    <div class="nav-left">
+      <a class="nav-link" href="/">Startseite</a>
+      <!-- <a class="nav-link" href="/about">Über uns</a> -->
+    </div>
+    <div class="nav-right">
+      <a class="nav-link" href="/impressum">Impressum</a>
+      <a class="nav-link" href="/privacy-policy">Datenschutz</a>
+    </div>
+  </nav>
 </header>
 
 <style>
-    * {
-        font-size: larger;
-    }
+  * {
+    font-size: larger;
+  }
 
-    header {
-        padding: 24px;
-        display: flex;
-        background-color: var(--primary-color);
-    }
+  header {
+    width: 100%;
+    padding: 24px 0 24px 24px;
+    display: flex;
+    align-items: center;
+    background-color: var(--primary-color);
+  }
 
-    #name {
-        font-weight: bold;
-    }
+  #name {
+    font-weight: bold;
+  }
 
-    .vertical-line {
-        border-right: 3px solid black;
-        padding-left: 16px;
-    }
+  .vertical-line {
+    border-right: 3px solid black;
+    padding-left: 16px;
+    height: 2rem;
+  }
 
-    a {
-        padding-left: 16px;
-    }
+  nav {
+    width: 100%;
+    padding-right: 24px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  a {
+    font-size: larger;
+    padding-left: 16px;
+  }
+
+  .nav-right > a {
+    font-size: 1rem;
+  }
 </style>

blog/src/layouts/Main.astro

@@ -1,5 +1,4 @@
 ---
-import Footer from "../components/Footer.astro";
 import Header from "../components/Header.astro";
 import "../styles/global.css";
 ---
@@ -23,7 +22,6 @@ import "../styles/global.css";
     <main>
       <slot />
     </main>
-    <Footer />
   </body>
 </html>