header styling

blog/package.json

@@ -12,9 +12,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^5.0.2",
+    "@astrojs/preact": "^6.0.1",
     "@astrojs/rss": "^4.0.19",
-    "astro": "^6.4.6",
+    "astro": "^7.1.4",
     "preact": "^10.29.0"
   }
 }

blog/src/components/BackNav.astro

@@ -1,15 +1,14 @@
 ---
+---
 
----
+<a href={Astro.request.headers.get('referer') || '/'}>
-
-<a class="no-link-link" href="javascript:history.back()">
   <button class="rounded">zurück</button>
 </a>
 
 <style>
   button {
     padding: 12px 24px;
-    margin: 8px 0 16px 64px;
+    margin: 8px 0 16px 0px;
     border-style: none;
   }
 </style>

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

blog/src/components/PostPreviewLarge.astro

@@ -1,6 +1,7 @@
 ---
 import type { Post } from "../types/global";
 import { findImageByPath } from "../lib/findImage";
+import { Image } from "astro:assets";
 
 interface Props {
   post: Post;
@@ -15,16 +16,20 @@ const img = findImageByPath(post.image.path);
 <a href={url} class="no-link-link">
   <div class="wide-container">
     <div class="image-col col rounded">
-      <img src={img.src} alt={post.image.alt} />
+      <Image
+        src={img}
+        alt={post.image.alt}
+        layout="constrained"
+      />
     </div>
     <div class="text-col col">
-      <h2 class="headline">{post.title}</h2>
+      <div class="top-info">
-      <h7 class="subtitle">{post.subtitle}</h7>
-      <p class="description">{post.description}</p>
-      <div class="bottom-info">
         <span>Autor: {post.author}</span>
         <span>{post.date}</span>
       </div>
+      <h2 class="headline">{post.title}</h2>
+      <h7 class="subtitle">{post.subtitle}</h7>
+      <p class="description">{post.description}</p>
     </div>
   </div>
 </a>
@@ -67,8 +72,9 @@ const img = findImageByPath(post.image.path);
     object-position: center;
   }
 
-  .bottom-info {
+  .top-info {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 16px;
   }
 </style>

blog/src/layouts/BlogPostLayout.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import BackNav from "../components/BackNav.astro";
 import { findImageByPath } from "../lib/findImage";
 import type { Post } from "../types/global";
@@ -15,9 +16,9 @@ const titleImg = findImageByPath(frontmatter.image.path);
 
 <Main>
   <article>
-    <img
+    <Image
       id="titleImg"
-      src={titleImg.src}
+      src={titleImg}
       alt={frontmatter.image.alt}
       class="rounded"
     />
@@ -30,8 +31,8 @@ const titleImg = findImageByPath(frontmatter.image.path);
     </div>
     <hr />
     <slot />
-  </article>
   <BackNav />
+  </article>
 </Main>
 
 <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>
 

blog/src/pages/impressum.astro

@@ -8,8 +8,8 @@ import Main from "../layouts/Main.astro";
     <h3>Betreiber der Website</h3>
     <p>
       Tim Eberhardt <br />
-      Domplatz 16 <br />
+      Pförtchenstr. 6 <br />
-      99084 Erfurt <br />
+      99096 Erfurt <br />
       Deutschland
     </p>
 
@@ -19,8 +19,8 @@ import Main from "../layouts/Main.astro";
     <h3>Angaben zur Verantwortlichkeit gemäß § 55 RStV</h3>
     <p>
       Tim Eberhardt <br />
-      Domplatz 16<br />
+      Pförtchenstr. 6<br />
-      99084 Erfurt
+      99096 Erfurt
     </p>
 
     <h3>Haftung für Inhalte</h3>

blog/src/pages/privacy-policy.astro

@@ -16,7 +16,7 @@ import Main from "../layouts/Main.astro";
       <h2>Verantwortlicher</h2>
       <ul>
         <li><strong>Name:</strong> Tim Eberhardt</li>
-        <li><strong>Anschrift:</strong> Domplatz 16, 99084 Erfurt</li>
+        <li><strong>Anschrift:</strong> Pförtchenstr. 6, 99096 Erfurt</li>
         <li><strong>Telefon:</strong> +49 (1577) 6822446</li>
         <li>
           <strong>E-Mail:</strong>