Mobile Header

blog/src/components/Header.astro

@@ -1,8 +1,10 @@
 <header>
-  <span id="name">Blauwasser Mausis</span>
+  <span>Blauwasser Mausis</span>
   <span class="vertical-line"></span>
+
   <nav>
     <div class="nav-left">
+      <span id="side-nav-header">Blauwasser Mausis</span>
       <a class="nav-link" href="/">Startseite</a>
       <!-- <a class="nav-link" href="/about">Über uns</a> -->
     </div>
@@ -11,48 +13,136 @@
       <a class="nav-link" href="/privacy-policy" style="#789">Datenschutz</a>
     </div>
   </nav>
+
+  <input type="checkbox" id="menu-toggle" class="menu-icon" />
+  <label for="menu-toggle" class="menu-icon" aria-label="Menü öffnen">
+    ☰
+  </label>
+
+  <label for="menu-toggle" class="menu-backdrop"></label>
 </header>
 
 <style>
   * {
+    box-sizing: border-box;
     color: var(--primary-text);
   }
 
   header {
+    position: relative;
+    width: 100%;
     padding: 32px;
     display: flex;
     align-items: center;
-    background-color: #fff;
-  }
-
-  #name {
-    font-weight: bold;
-    width: min-content;
-  }
-
-  .vertical-line {
-    color: var(--primary-text);
-    border-right-width: 3px;
+    justify-content: space-between;
+    gap: 20px;
   }
 
   nav {
-    width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex: 1;
+  }
+
+  .nav-left,
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
   }
 
   a {
-    padding-left: 16px;
     color: var(--primary-text);
-    width: fit-content;
+    text-decoration: none;
   }
 
-  .nav-right {
+  #menu-toggle,
+  .menu-icon,
+  .menu-backdrop,
+  #side-nav-header {
+    display: none;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .menu-icon {
+      display: block;
+      position: relative;
+      font-size: 1.6rem;
+      cursor: pointer;
+      z-index: 4;
+    }
+
+    #menu-toggle {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    #side-nav-header {
+      display: block;
+      padding-bottom: 32px;
+    }
+
+    nav {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 66vw;
+      height: 100vh;
+      padding: 42px 24px 24px;
+      background: #ddd;
+
       display: flex;
-    flex-wrap: wrap;
-    justify-content: end;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: 30px;
 
+      transform: translateX(-100%);
+      transition: transform 0.3s ease;
+      z-index: 3;
     }
 
+    .nav-left,
+    .nav-right {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .nav-left {
+      margin-bottom: auto;
+    }
+
+    nav:has(~ #menu-toggle:checked) {
+      transform: translateX(0);
+    }
+
+    .menu-backdrop {
+      display: block;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+      z-index: 2;
+    }
+
+    #menu-toggle:checked ~ .menu-backdrop {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
+  .vertical-line {
+    visibility: hidden;
+  }
 </style>

blog/src/components/PostPreviewLarge.astro

@@ -11,6 +11,7 @@ interface Props {
 const { post, url } = Astro.props;
 
 const img = findImageByPath(post.image.path);
+const localeDate = new Date(post.date).toLocaleDateString()
 ---
 
 <div class="wide-container">
@@ -25,7 +26,7 @@ const img = findImageByPath(post.image.path);
     </a>
     <h7>{post.subtitle}</h7>
     <div class="top-info">
-      <span>{post.date}</span>
+      <span>{localeDate}</span>
       <span class="vertical-line"></span>
       <span>Autor: {post.author}</span>
     </div>

blog/src/components/PostPreviewSmall.astro

@@ -11,6 +11,7 @@ interface Props {
 const { post, url } = Astro.props;
 
 const img = findImageByPath(post.image.path)
+const localeDate = new Date(post.date).toLocaleDateString()
 ---
 
 <a href={url} class="no-link-link">
@@ -21,7 +22,7 @@ const img = findImageByPath(post.image.path)
     <p class="description">{post.description}</p>
     <div class="bottom-info">
       <span>Author: {post.author}</span>
-      <span>{post.date}</span>
+      <span>{localeDate}</span>
     </div>
   </div>
 </a>

blog/src/layouts/BlogPostLayout.astro

@@ -12,6 +12,7 @@ interface Props {
 const { frontmatter } = Astro.props;
 
 const titleImg = findImageByPath(frontmatter.image.path);
+const localeDate = new Date(frontmatter.date).toLocaleDateString()
 ---
 
 <Main>
@@ -25,7 +26,7 @@ const titleImg = findImageByPath(frontmatter.image.path);
     <h1 class="headline">{frontmatter.title}</h1>
     <div class="bottom-info">
       <span>Autor: {frontmatter.author}</span>
-      <span>{frontmatter.date}</span>
+      <span>{localeDate}</span>
     </div>
     <slot />
     <BackNav />

blog/src/pages/rss.xml.js

@@ -12,6 +12,7 @@ export async function GET(context) {
         site: context.site,
         items: posts.map(post => ({
             title: post.frontmatter.title,
+            subtitle: post.frontmatter.subtitle,
             pubDate: Date.parse(post.frontmatter.date),
             description: post.frontmatter.description,
             link: post.url,

blog/src/styles/global.css

@@ -8,7 +8,8 @@
     box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
 }

blog/src/types/global.ts

@@ -2,7 +2,7 @@ export interface Post {
     title: String,
     subtitle: String,
     description: String,
-    date: String, 
+    date: string, 
     author: String,
     image: {
         path: string,