From 0ba9b4bb9a2fa9e649b93ab47e54e451d1db5a6f Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Mon, 29 Dec 2025 19:36:47 +0100
Subject: [PATCH 1/5] Enhance pageHeader component styling

Add new styles for the page header, including branding and navigation elements. Implement gradients, hover effects, and layout adjustments to improve the visual presentation and user experience of the header section.
---
 app/components/pageHeader.vue | 89 +++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)

diff --git a/app/components/pageHeader.vue b/app/components/pageHeader.vue
index 99e885b..0c9f8e8 100644
--- a/app/components/pageHeader.vue
+++ b/app/components/pageHeader.vue
@@ -140,6 +140,95 @@ nav.active {
     border-radius: 20px 20px 0 0;
     border: 1px solid black;
     border-bottom: 0px;
+    background: #415c7b;
+    display: block;
+    padding: 0;
+    border-radius: 20px 20px 0px 0px;
+  }
+
+  .branding {
+    border-radius: 20px 20px 0px 0px;
+    background: linear-gradient(to bottom, #0c5688 0%,#317bab 27%,#3780af 30%,#61a2ca 36%,#accce1 47%,#b2d0e3 48%,#f7f7f9 53%,#bcbfc9 54%,#40526d 54%,#19304f 55%,#0b2345 56%,#396587 56%,#548cad 57%,#65a4c5 58%,#71b5d6 58%,#7ac0e1 59%,#7fc8e9 60%,#82ceef 60%,#85d1f2 62%,#4e7a9a 76%,#182442 100%);
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .branding .logo {
+    font-weight: bold;
+    font-size: 2.5rem;
+    margin-top: 3px!important;
+    -webkit-box-reflect: below -10px
+      -webkit-linear-gradient(
+        top,
+        rgba(0,0,0,0) 25%,
+        rgba(255,255,255,1) 100%
+      );
+  }
+
+
+  .pageHeader nav {
+    margin-top: 10px;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  .mainNav {
+    background: linear-gradient(to bottom, rgba(108,170,209,1) 0%,rgba(80,125,155,1) 49%,rgba(71,110,135,1) 50%,rgba(95,148,183,1) 100%);
+    display: inline-block;
+    border: 1px solid #4a728c;
+    border-color: #5a829c #4a728c #3a627c;
+    border-radius: 0;
+    -webkit-box-shadow: 0 1px 1px #415c7b, 
+      inset 0 1px 0 rgba(108,170,209, 0.5);
+    -moz-box-shadow: 0 1px 1px #415c7b, 
+      inset 0 1px 0 rgba(108,170,209, 0.5);
+    box-shadow: 0px 1px 2px #415c7b, 
+      inset 0 1px 0 rgba(108,170,209, 0.5);
+  }
+
+  .mainNav li {
+    float: left;
+    position: relative;
+    list-style: none;
+  }
+
+  .mainNav li a {
+    font-weight: bolder;
+    font-size: 1.1rem;
+    padding: 8px 20px;
+    text-decoration: none;
+    display: block;
+    /* color: #026; */
+    text-shadow: 0px 1px 0px rgba(108,170,209, 0.55);
+  }
+
+  .mainNav li:hover > a {
+    color: #000;
+    text-shadow: 0px 1px 0px rgba(95,148,183, 0.55);
+    -webkit-box-shadow: 0px 1px 1px 0px rgba(71,110,135, 0.2);
+    -moz-box-shadow: 0px 1px 1px 0px rgba(71,110,135, 0.2);
+    box-shadow: 0px 1px 1px 0px rgba(71,110,135, 0.2);
+    background: #67a2c6;
+    background: -moz-linear-gradient(top, #67a2c6 0%, #4e7996 49%, #4a728c 50%, #5a8dad 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67a2c6), color-stop(49%,#4e7996), color-stop(50%,#4a728c), color-stop(100%,#5a8dad));
+    background: -webkit-linear-gradient(top, #67a2c6 0%,#4e7996 49%,#4a728c 50%,#5a8dad 100%);
+    background: -o-linear-gradient(top, #67a2c6 0%,#4e7996 49%,#4a728c 50%,#5a8dad 100%);
+    background: -ms-linear-gradient(top, #67a2c6 0%,#4e7996 49%,#4a728c 50%,#5a8dad 100%);
+    background: linear-gradient(to bottom, #67a2c6 0%,#4e7996 49%,#4a728c 50%,#5a8dad 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67a2c6', endColorstr='#5a8dad',GradientType=0 );
+  }
+
+  .mainNav:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
   }
 }
 

From b7702e9e09964a1eb868d9fd2cfb88c332785710 Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Mon, 29 Dec 2025 19:45:54 +0100
Subject: [PATCH 2/5] Add 'Blog' link to navigation and adjust media query
 breakpoint

In the pageHeader component, a new 'Blog' link has been added to the main navigation menu. Additionally, the media query breakpoint for larger screens has been updated from 600px to 670px to improve layout responsiveness.
---
 app/components/pageHeader.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/pageHeader.vue b/app/components/pageHeader.vue
index 0c9f8e8..447bdd3 100644
--- a/app/components/pageHeader.vue
+++ b/app/components/pageHeader.vue
@@ -8,6 +8,7 @@
       <ul class="mainNav">
         <li><NuxtLink to="/about" @click="hideMenu">About</NuxtLink></li>
         <li><NuxtLink to="/projects" @click="hideMenu">Projects</NuxtLink></li>
+        <li><NuxtLink to="/" @click="hideMenu">Blog</NuxtLink></li>
         <li><NuxtLink to="/links" @click="hideMenu">Links</NuxtLink></li>
         <li><NuxtLink to="/datenschutzerklaerung" @click="hideMenu">Datenschutz-Erklärung</NuxtLink></li>
         <li><NuxtLink to="/impressum" @click="hideMenu">Impressum</NuxtLink></li>
@@ -117,7 +118,7 @@ nav.active {
 }
 
 /* Media Queries für größere Bildschirme */
-@media (min-width: 600px) {
+@media (min-width: 670px) {
   .mainNav {
     flex-direction: row;
     justify-content: center;

From a5609bd7a2fcb6dddc10c5257e96c0cbe2052f20 Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Tue, 30 Dec 2025 02:51:09 +0100
Subject: [PATCH 3/5] Update pageHeader component styles and add logo text
 overlay

In the pageHeader component, the logo font size has been increased to 3rem, and new styles have been added for a text overlay that displays "mjk @ web" with a gradient effect. The logo's position and display properties have also been adjusted for improved visual presentation.
---
 app/components/pageHeader.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/components/pageHeader.vue b/app/components/pageHeader.vue
index 447bdd3..627d90e 100644
--- a/app/components/pageHeader.vue
+++ b/app/components/pageHeader.vue
@@ -159,9 +159,11 @@ nav.active {
 
   .branding .logo {
     font-weight: bold;
-    font-size: 2.5rem;
+    font-size: 3rem;
     margin-top: 3px!important;
-    -webkit-box-reflect: below -10px
+    position: relative;
+    display: inline-block;
+    -webkit-box-reflect: below -17px
       -webkit-linear-gradient(
         top,
         rgba(0,0,0,0) 25%,
@@ -169,6 +171,25 @@ nav.active {
       );
   }
 
+  .branding .logo::before {
+    content: "mjk @ web";
+    position: absolute;
+    top: 11px;
+    left: 50%;
+    transform: translate(-50%, 1px);
+    z-index: -1;
+    font-weight: bold;
+    font-size: 3rem;
+    line-height: 1;
+    white-space: nowrap;
+    color: transparent;
+    -webkit-text-stroke: 1px;
+    background: linear-gradient(to bottom, #ff2b2b 0%,#fcf400 50%,#00ff00 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
 
   .pageHeader nav {
     margin-top: 10px;

From 0abe65cc99e5c4a759ceb4dd353f8ed8ba626292 Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Tue, 30 Dec 2025 15:52:23 +0100
Subject: [PATCH 4/5] Update pageHeader styles with margin adjustments and
 border-radius enhancements

In the pageHeader component, the margin-bottom has been set to -10px for better spacing, and the border-radius for navigation items has been updated to 15px. Additionally, hover effects for the first and last navigation items have been added to create a more visually appealing design.
---
 app/components/pageHeader.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/pageHeader.vue b/app/components/pageHeader.vue
index 627d90e..8f9d3d9 100644
--- a/app/components/pageHeader.vue
+++ b/app/components/pageHeader.vue
@@ -193,6 +193,7 @@ nav.active {
 
   .pageHeader nav {
     margin-top: 10px;
+    margin-bottom: -10px;
     display: block;
     width: 100%;
     text-align: center;
@@ -203,7 +204,7 @@ nav.active {
     display: inline-block;
     border: 1px solid #4a728c;
     border-color: #5a829c #4a728c #3a627c;
-    border-radius: 0;
+    border-radius: 15px;
     -webkit-box-shadow: 0 1px 1px #415c7b, 
       inset 0 1px 0 rgba(108,170,209, 0.5);
     -moz-box-shadow: 0 1px 1px #415c7b, 
@@ -244,6 +245,14 @@ nav.active {
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67a2c6', endColorstr='#5a8dad',GradientType=0 );
   }
 
+  .mainNav li:first-child:hover > a {
+    border-radius: 15px 0 0 15px;
+  }
+
+  .mainNav li:last-child:hover > a {
+    border-radius: 0 15px 15px 0;
+  }
+
   .mainNav:after {
     content: ".";
     display: block;

From 0c43bbb49b86ed268b42c8ce38633fe11f4bf8cd Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Tue, 30 Dec 2025 17:19:50 +0100
Subject: [PATCH 5/5] Update pageHeader styles with new gradient and shadow
 effects

In the pageHeader component, the background gradient for the main navigation has been updated for a fresher look, and enhancements have been made to the box-shadow properties for improved depth and visual appeal. These changes aim to elevate the overall design of the header section.
---
 app/components/pageHeader.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/components/pageHeader.vue b/app/components/pageHeader.vue
index 8f9d3d9..9ad7915 100644
--- a/app/components/pageHeader.vue
+++ b/app/components/pageHeader.vue
@@ -200,17 +200,20 @@ nav.active {
   }
 
   .mainNav {
-    background: linear-gradient(to bottom, rgba(108,170,209,1) 0%,rgba(80,125,155,1) 49%,rgba(71,110,135,1) 50%,rgba(95,148,183,1) 100%);
+    background: linear-gradient(to bottom, rgba(125,185,225,1) 0%,rgba(85,140,170,1) 49%,rgba(65,100,120,1) 50%,rgba(90,145,175,1) 100%);
     display: inline-block;
     border: 1px solid #4a728c;
     border-color: #5a829c #4a728c #3a627c;
     border-radius: 15px;
     -webkit-box-shadow: 0 1px 1px #415c7b, 
-      inset 0 1px 0 rgba(108,170,209, 0.5);
+      inset 0 2px 4px rgba(255,255,255, 0.3),
+      inset 0 1px 0 rgba(108,170,209, 0.8);
     -moz-box-shadow: 0 1px 1px #415c7b, 
-      inset 0 1px 0 rgba(108,170,209, 0.5);
+      inset 0 2px 4px rgba(255,255,255, 0.3),
+      inset 0 1px 0 rgba(108,170,209, 0.8);
     box-shadow: 0px 1px 2px #415c7b, 
-      inset 0 1px 0 rgba(108,170,209, 0.5);
+      inset 0 2px 4px rgba(255,255,255, 0.3),
+      inset 0 1px 0 rgba(108,170,209, 0.8);
   }
 
   .mainNav li {