blog/src/components/Header.astro

@@ -1,10 +1,8 @@
 <header>
-  <span>Blauwasser Mausis</span>
+  <span id="name">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>
@@ -13,136 +11,48 @@
       <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;
-    justify-content: space-between;
+    background-color: #fff;
-    gap: 20px;
   }
 
-  nav {
+  #name {
-    display: flex;
+    font-weight: bold;
-    align-items: center;
+    width: min-content;
-    justify-content: space-between;
-    flex: 1;
-  }
-
-  .nav-left,
-  .nav-right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  a {
-    color: var(--primary-text);
-    text-decoration: none;
-  }
-
-  #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-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;
+    color: var(--primary-text);
+    border-right-width: 3px;
   }
+
+  nav {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  a {
+    padding-left: 16px;
+    color: var(--primary-text);
+    width: fit-content;
+  }
+
+  .nav-right {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    
+  }
+
 </style>

blog/src/components/PostPreviewLarge.astro

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

blog/src/components/PostPreviewSmall.astro

@@ -11,7 +11,6 @@ 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">
@@ -22,7 +21,7 @@ const localeDate = new Date(post.date).toLocaleDateString()
     <p class="description">{post.description}</p>
     <div class="bottom-info">
       <span>Author: {post.author}</span>
-      <span>{localeDate}</span>
+      <span>{post.date}</span>
     </div>
   </div>
 </a>

blog/src/layouts/BlogPostLayout.astro

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

blog/src/pages/rss.xml.js

@@ -12,7 +12,6 @@ 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,8 +8,7 @@
     box-sizing: border-box;
 }
 
-html,
+html, body {
-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,