CSS Anpassungen im Header und Preview

blog/src/components/Header.astro

@@ -7,8 +7,8 @@
       <!-- <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="/impressum" style="#789">Impressum</a>
-      <a class="nav-link" href="/privacy-policy">Datenschutz</a>
+      <a class="nav-link" href="/privacy-policy" style="#789">Datenschutz</a>
     </div>
   </nav>
 </header>
@@ -19,10 +19,10 @@
   }
 
   header {
-    padding: 24px;
+    padding: 32px;
     display: flex;
     align-items: center;
-    background-color: var(--primary-color);
+    background-color: #fff;
   }
 
   #name {
@@ -31,9 +31,8 @@
   }
 
   .vertical-line {
-    border-right: 3px solid var(--primary-text);
+    color: var(--primary-text);
-    padding-left: 16px;
+    border-right-width: 3px;
-    height: 2rem;
   }
 
   nav {
@@ -44,15 +43,11 @@
   }
 
   a {
-    font-size: 1.5rem;
     padding-left: 16px;
     color: var(--primary-text);
     width: fit-content;
   }
 
-  .nav-left {
-  }
-
   .nav-right {
     display: flex;
     flex-wrap: wrap;
@@ -60,7 +55,4 @@
     
   }
 
-  .nav-right > a {
-    font-size: 1rem;
-  }
 </style>

blog/src/components/PostPreviewLarge.astro

@@ -13,22 +13,22 @@ const { post, url } = Astro.props;
 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" />
   </div>
   <div class="text-col col">
-      <div class="top-info">
+    <a href={url} class="headline-link">
-        <span>Autor: {post.author}</span>
-        <span>{post.date}</span>
-      </div>
       <h2 class="headline">{post.title}</h2>
-      <h7 class="subtitle">{post.subtitle}</h7>
+    </a>
+    <div class="top-info">
+      <span>{post.date}</span>
+      <span class="vertical-line"></span>
+      <span>Autor: {post.author}</span>
+    </div>
     <p class="description">{post.description}</p>
   </div>
 </div>
-</a>
 
 <style>
   .wide-container {
@@ -69,9 +69,16 @@ const img = findImageByPath(post.image.path);
   }
 
   .top-info {
-    display: flex;
     justify-content: space-between;
-    margin-bottom: 16px;
+    margin: 16px 0;
+    font-size: 1.125rem;
+    color: lightslategray;
+  }
+
+  .vertical-line{
+    color: #789;
+    border-right-width: 2px;
+    margin-right: 16px;
   }
 
   @media only screen and (max-width: 800px) {

blog/src/pages/posts/XX0826_Ostseeurlaub.md

@@ -1,8 +1,7 @@
 ---
 layout: ../../layouts/BlogPostLayout.astro
-title: Ostseeurlaub
+title: Ostseeurlaub - Finden wir ein Boot? Suchen wir überhaupt oder faulenzen wir nur?
-subtitle: Finden wir ein Boot? Suchen wir überhaupt oder faulenzen wir nur?
+description: Ostseeurlaub bedeutet für mich viele Kindheitserinnerungen. Besonders diese Woche war vollgepackt davon. Hier meine Reiseempfehlung...
-description: Ostseeurlaub bedeutet für mich ganz viele Kindheitserinnerungen. Besonders diese Woche war vollgepackt davon. Hier meine Reiseempfehlung...
 image:
     path: ostsee.jpg
     alt: Chiara und Tim vor einem Strand

blog/src/styles/global.css

@@ -1,12 +1,12 @@
 :root {
-    --primary-color: rgb(32, 33, 79);
+    --primary-color: #416A79;
-    --primary-text: rgb(215, 213, 213);
+    --primary-text: #454545;
 }
 
 * {
     font-family: Arial, Helvetica, sans-serif;
     box-sizing: border-box;
-    font-size: 110%;
+    /*font-size: 110%;*/
 }
 
 html, body {
@@ -23,6 +23,7 @@ body {
 }
 
 .nav-link {
+    font-size: 1.2rem;
     text-decoration: none;
     color: black;
 }
@@ -39,7 +40,13 @@ body {
 .headline {
     margin-top: 8px;
     margin-bottom: 0;
-    font-weight: bold;
+    font-weight: normal;
+    font-size: 28px;
+}
+
+.headline-link{
+    color: var(--primary-color);
+    text-decoration: none;
 }
 
 .subtitle {
@@ -47,9 +54,15 @@ body {
 }
 
 .description {
-    font-weight: bold;
+    font-size: 1.125rem;
 }
 
 .rounded {
     border-radius: 8px;
 }
+
+  .vertical-line {
+    border-right-style: solid;
+    padding-left: 16px;
+    height: 2rem;
+  }