blog/package.json

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

blog/src/components/BackNav.astro

@@ -1,14 +1,15 @@
 ---
----
 
-<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 0px;
+    margin: 8px 0 16px 64px;
     border-style: none;
   }
 </style>

blog/src/components/Footer.astro

@@ -0,0 +1,20 @@
+<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,52 +1,33 @@
 <header>
-  <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>
+    <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>
 </header>
 
 <style>
+    * {
+        font-size: larger;
+    }
 
-  header {
-    padding: 24px;
-    display: flex;
-    align-items: center;
-    background-color: var(--primary-color);
-  }
+    header {
+        padding: 24px;
+        display: flex;
+        background-color: var(--primary-color);
+    }
 
-  #name {
-    font-weight: bold;
-    width: min-content;
-  }
+    #name {
+        font-weight: bold;
+    }
 
-  .vertical-line {
-    border-right: 3px solid black;
-    padding-left: 16px;
-    height: 2rem;
-  }
+    .vertical-line {
+        border-right: 3px solid black;
+        padding-left: 16px;
+    }
 
-  nav {
-    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;
-  }
+    a {
+        padding-left: 16px;
+    }
 </style>

blog/src/components/PostPreviewLarge.astro

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

blog/src/layouts/BlogPostLayout.astro

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

blog/src/layouts/Main.astro

@@ -1,4 +1,5 @@
 ---
+import Footer from "../components/Footer.astro";
 import Header from "../components/Header.astro";
 import "../styles/global.css";
 ---
@@ -22,6 +23,7 @@ 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 />
-      Pförtchenstr. 6 <br />
-      99096 Erfurt <br />
+      Domplatz 16 <br />
+      99084 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 />
-      Pförtchenstr. 6<br />
-      99096 Erfurt
+      Domplatz 16<br />
+      99084 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> Pförtchenstr. 6, 99096 Erfurt</li>
+        <li><strong>Anschrift:</strong> Domplatz 16, 99084 Erfurt</li>
         <li><strong>Telefon:</strong> +49 (1577) 6822446</li>
         <li>
           <strong>E-Mail:</strong>