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

blog/src/components/PostImageBig.astro

@@ -1,8 +0,0 @@
----
-const {imgPath, alt} = Astro.props
----
-
-<img src={imgPath} 
-     alt={alt} 
-     style="max-width: 100%; height: auto;" 
-     loading="lazy">

blog/src/components/PostPreviewLarge.astro

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

blog/src/layouts/BlogPostLayout.astro

@@ -15,7 +15,7 @@ const titleImg = findImageByPath(frontmatter.image.path);
 ---
 
 <Main>
-  <article class="markdown-content">
+  <article>
     <Image
       id="titleImg"
       src={titleImg}
@@ -23,17 +23,15 @@ const titleImg = findImageByPath(frontmatter.image.path);
       class="rounded"
     />
     <h1 class="headline">{frontmatter.title}</h1>
+    <span class="subtitle">{frontmatter.subtitle}</span>
+    <hr />
     <div class="bottom-info">
       <span>Autor: {frontmatter.author}</span>
       <span>{frontmatter.date}</span>
     </div>
+    <hr />
     <slot />
-    <BackNav />
-    <p class="disclaimer">
-      Disclaimer: Dieser Artikel ist ausschließlich privat und wird nicht durch
-      Produktplatzierung, Affiliate-Links oder ähnliches Unterstützt. Links
-      dienen allein dem Zweck der Information.
-    </p>
+  <BackNav />
   </article>
 </Main>
 
@@ -43,11 +41,6 @@ const titleImg = findImageByPath(frontmatter.image.path);
     padding: 0 clamp(8px, 32px, 64px);
   }
 
-  .markdown-content {
-    font-size: 1.5rem;
-    line-height: 1.6;
-  }
-
   #titleImg {
     width: 100%;
     height: 200px;
@@ -58,11 +51,6 @@ const titleImg = findImageByPath(frontmatter.image.path);
   .bottom-info {
     display: flex;
     justify-content: space-between;
-    margin-top: 16px;
   }
 
-  .disclaimer {
-    margin: 32px 0 64px 0;
-    font-size: smaller;
-  }
 </style>

blog/src/pages/posts/100726_Under_Construction.md

@@ -1,6 +1,7 @@
 ---
 layout: ../../layouts/BlogPostLayout.astro
 title: Under Construction
+subtitle: Wir befinden uns im Aufbau
 description: Bald könnt ihr hier unsere ersten Abenteuer mitverfolgen. Und keine Sorge...an der Webseite wird auch noch gearbeitet!
 image:
     path: construction.png

blog/src/pages/posts/200826_Ostseeurlaub.md

@@ -1,137 +0,0 @@
----
-layout: ../../layouts/BlogPostLayout.astro
-title: Ostseeurlaub
-subtitle: Finden wir ein Boot? Suchen wir überhaupt oder faulenzen wir nur?
-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
-author: Tim
-date: '2026-08-20'
----
-
-Eigentlich soll es hier um unser (zukünftiges) Boot und die Segelreisen gehen. 
-Bis wir davon berichten können dauert es aber noch ein bisschen. Was wir bis dahin machen? 
-Das Leben als Privatière genießen! Und das sieht so aus... 
-</br>
-</br>
-
----
-
-## Ostseecamp Rerik
-Unser erstes light-Abenteuer führt uns an die Ostsee. Mit meiner Mutter und kleinem Bruder verbringen wir eine Woche im Ostseecamp Seeblick bei Rerik.
-
-Freitag morgen, 5 Uhr, geht's los. Chiara war da bereits in Kiel und beging den letzten Tag ihres Praktikums in einer Werft. (Vielleicht teilt sie diese Erfahrung auch noch in einem Post). 
-
-Das Ostseecamp kannte ich schon aus den letzten drei Urlauben (vor 2017). Unser Platz hat perfekten zweite Reihe Blick von den Klippen auf das Meer. Der Name ist nicht nur Marketing. Immer eine leichte Briese frische Meeresluft, so lassen sich die Temperaturen gut aushalten. Ab uns zu sehen wir Segelschiffe und sogar ein paar Traditionssegler auf dem Weg zur HanseSail. Dass das Animationsprogramm an diesem Tag bis 23 Uhr geht will mir, im Schlafsack liegend, aber nicht einleuchten. Ab 10 ist Nachtruhe!<br>
-Einschlafen klappt dann aber doch irgendwie. Wenn man hier eins lernt, dann auch bei einer Geräuschkulisse zu schlafen.
-</br>
-</br>
-
----
-
-## Tschu Tschuuuu
-
-<div style="display: flex; flex-direction: row; gap: 2%;">
-    <img src="/src/assets/blog_img/ostseeurlaub/molly_1.jpg" 
-        alt="Chiara und Tim stehen vor der Dampflok Molly." 
-        style="max-width: 49%; height: auto;" 
-        loading="lazy" />
-    <img src="/src/assets/blog_img/ostseeurlaub/molly_2.jpg" 
-        alt="Chiara und Tim stehen neben der Dampflok Molly." 
-        style="max-width: 49%; height: auto;" 
-        loading="lazy" />
-</div>
-
-
-Da wir nur eine Woche haben (sonst waren es drei), tüffteln wir uns einen straffen Plan aus.
-Station Nummer 1 ist eine Fahrt mit der Molly. Eine süße Schmalspurbahn zwischen Kühlungsborn und Bad Doberan. Das Ruckeln, der Windzug und dicke schwarze Rauch sind immer wieder ein herliches Erlebnis und nur ein geringer Preis dafür, Pünktlich zu sein. Looking at you, Fernverkehr!
-Vorbei an Heiligendamm, der Pferderennbahn, durch Felder und Wälder.
-
-In der kühle des Doberaner Klosters lässt es sich gut aushalten, bis es zurück zu Molly geht. 
-Zurück Kühlungsborn nutzen wir den Tag für ein kleines Mittagessen und einen Besuch des Strandes.
-Es dauert zwar ein bisschen, bei genauen Suchen findet sich zwischen den Strandkörben, Menschen und Sandburgen doch etwas Sand zum liegen.
-Hier kommen wir schon zu einem meiner Highlights der Woche: Chiara, die das erste Mal in Wellen springt. So richtig schön große 2 Meter Wellen. Erst zögerlich und dann mit immer mehr Inbrunst. Die Stunde vergeht schnell, wenn man gegen die Macht des Meeres ankämpft. Das macht als Erwachsener noch genauso viel Spaß wie als Kind. Nur die Wellen sind in der Zwischenzeit irgendwie kleiner geworden...
-</br>
-</br>
-
----
-
-## Toms Erlebnis-Dorf
- <img src="/src/assets/blog_img/ostseeurlaub/karls.jpg" 
-        alt="Chiara und Tim stehen vor dem Eingangsschild zum Karls Erlebnisdorf in Rövershagen." 
-        style="max-width: 100%; height: auto;" 
-        loading="lazy" />
-
-Nächster Halt ist <a href="https://karls.de/" target="_blank">**Karls Erlebnis-Dorf**</a> in Rövershagen. Eine meiner jüngeren Kindheitserinnerungen. 
-Hier muss ich immer an Tom denken, einen lieben Kollegen. Er hat in seiner Jugend im Karls Erlebnis-Dorf bei Berlin in der Pfannkuchen-Schmiede gearbeitet. Liebe Grüße!<br>
-*PS: Es gibt keinen herzhaften veggy Pfannkuchen. Skandal!!11!*
-
-
-Dieses erdbeerige Vergnügungsparadies bietet eine Menge Attraktionen für Familien. Vom Erdbeer-Schnaps über das Stockbrot bis zur saucoolen Murmelbahn.
-Mit dem Tagesticket können wir jegliche Attraktion fahren. Das machen wir auch! Alle Achterbahnen und Fahrgeschäfte nehmen wir mit. Auch das kleine Karoussel mit dem man einen riesen Lärm machen kann, Oink! Määähhh!, und die Treggerbahn kriegen uns begeistert. Hier wird Kapitalismus in besonders schöne Bänder gehüllt!
-
-<img src="/src/assets/blog_img/ostseeurlaub/karls_mais.jpg" 
-    alt="Chiara sizt in einem riesigen Maisbad." 
-    style="max-width: 100%; height: auto;" 
-    loading="lazy" />
-Chiara wird im Mais verbuddelt.
-
-Besonders freue ich mich auf die Eiswelt. In einer großen Halle stellen Bildhauis ihre Kunst aus und zeigen sogar live wie es geht. Das Thema in diesem Jahr ist Märchen (Und irgendwie ist auch die AIDA dabei...).
-
-<div style="display: flex; flex-direction: row; gap: 2%;">
-    <img src="/src/assets/blog_img/ostseeurlaub/karls_eis_thron.jpg" 
-        alt="Chiara und Tim auf einem Thron aus Eis." 
-        style="max-width: 49%; height: auto;" 
-        loading="lazy" />
-    <img src="/src/assets/blog_img/ostseeurlaub/karls_eis_aida.jpg" 
-        alt="Chiara und Tim stehen auf einem kleinen AIDA Bug aus Eis und spielen diese eine Szene aus Titanic nach." 
-        style="max-width: 49%; height: auto;" 
-        loading="lazy" />
-</div>
-Die blauen Mäntel bekommt man übrigens wegen der -15°C.
-
-Sogar zwei Rutschen aus Eis haben sie gebaut. Wunderschön und spaßig dazu. Außerdem die schnellste Abkühlung, die man im Sommer kriegen kann ;) 
-</br>
-</br>
-
----
-
-## Nun doch ein bisschen Segelboot und Störtebeker 
-Donnerstag ist der große Tag für Störtebeker. Das Open-Air Theater auf der großartigen Naturbühne Ralswiek. Als Kind war es eine Konstante im Rügenurlaub. Das Ganze ist zwar 2,5 Stunden entfernt, aber die nehmen wir gerne in Kauf. 
-Als Zwischenstopp gucken wir uns in Rostock die schönen Traditionssegler an, die für die 
-<a href="https://www.hansesail.com/" target="_blank">HanseSail</a> im Stadthafen liegen.
-
-Ganz uneigentnützig ist der Besuch in Rostock allerdings auch nicht. Wir haben endlich den Termin mit unserer Bootsberaterin Marie. Dafür suchen wir uns einen ruhigen Ort mit stabilem Netz. Für beides taugt der Campingplatz nicht. 
-
-Der 3,5 Stunden-Workshop mit Marie vergeht wie im Flug. Sie hilft uns mit ihrem Wissen und erfragt Dinge, über die wir uns noch keine Gedanken gemacht haben.<br> 
-Wenn ich eins mitgenommen habe: Immer prüfen aus welchem Stahl die Edelstahlkette ist. Sonst lieber wegschmeißen und zur versinkten Kette greifen :D
-
-In den nächsten Wochen erhalten wir konkrete Rückmeldungen vom Bootsmarkt und dann heißt es: Boote besichtigen! :)
-Dafür nehmen wir euch natürlich mit (metaphorisch!).
-
-Aber nun ab zu den <a href="https://www.stoertebeker.de/de/" target="_blank">Störtebeker Festspielen</a>, wir sind spät dran. 
-Wem dieses Erlebnis bisher noch nicht zuteil wurde: Absolute Empfehlung! In den letzten 4 Jahren haben wir es immer geschafft und sind weiterhin große Fans. Dafür lohnt sich auch mal ein verpennter nächster Tag.
-Spoilern werde ich natürlich nicht. Nur soviel: **So'n großer Feuerball, Junge!**
-
-<img src="/src/assets/blog_img/ostseeurlaub/stoertebeker.jpg" 
-    alt="Chiara sizt in einem riesigen Maisbad." 
-    style="max-width: 100%; height: auto;" 
-    loading="lazy" />
-Nach der Vorstellung auf dem Weg zum Auto.
-</br>
-</br>
-
----
-
-## Zufälle
-Der letzte ganze Tag verläuft eher typisch. Lange schlafen. Lesen. Kleine Spaziergänge. Eis essen.
-Nach so viel Action brauchen wir das auch mal.
-
-Während mein kleiner Bruder beim Volleyball Tournier mit seinen Aufschlägen physische Schmerzen verteilt, entdecke ich, dass der Mensch, der meinen Laptop über Kleinanzeigen kaufen will, in Wismar wohnt.
-Nur 20 Bahnminuten von uns entfernt!
-Den Laptop bringe ich ihm direkt vorbei und wir nutzen die Gelegenheit uns den Hafen von Wismar anzugucken. 
-
-Mit dem NEUEN Laptop, sind wir übrigens SEHR zufrieden ;). Der Framework 13 Pro ist wahrlich ein Meisterwerk.
-
-**Diese Woche war vollgepackt mit Kindheitserinnerungen, Erholung und Abenteuer. Das Wetter hätte nicht besser sein können. Zu sagen, dass wir es genoßen hätten wäre eine Untertreibung. Entsprechend erholt sind wir danach und bereit für das nächste Abenteuer. Zeit für Kontrast zum Strand...**

blog/src/styles/global.css

@@ -1,6 +1,6 @@
 :root {
-    --primary-color: #416A79;
-    --primary-text: #454545;
+    --primary-color: rgb(32, 33, 79);
+    --primary-text: rgb(215, 213, 213);
 }
 
 * {
@@ -22,7 +22,6 @@ body {
 }
 
 .nav-link {
-    font-size: 1.2rem;
     text-decoration: none;
     color: black;
 }
@@ -39,13 +38,7 @@ body {
 .headline {
     margin-top: 8px;
     margin-bottom: 0;
-    font-weight: normal;
-    font-size: 28px;
-}
-
-.headline-link{
-    color: var(--primary-color);
-    text-decoration: none;
+    font-weight: bold;
 }
 
 .subtitle {
@@ -53,15 +46,9 @@ body {
 }
 
 .description {
-    font-size: 1.125rem;
+    font-weight: bold;
 }
 
 .rounded {
     border-radius: 8px;
 }
-
-  .vertical-line {
-    border-right-style: solid;
-    padding-left: 16px;
-    height: 2rem;
-  }