From 0c3741b98802a1241718aa10eb34f4a128439b39 Mon Sep 17 00:00:00 2001
From: Dwayne Charrington <dwaynecharrington@gmail.com>
Date: Mon, 16 Dec 2024 21:52:45 +1000
Subject: [PATCH] feat(layouts): fixing header on single pages

---
 themes/aurelia-theme/layouts/blog/list.html   |  2 +-
 themes/aurelia-theme/layouts/blog/single.html |  2 +-
 .../aurelia-theme/layouts/contact/single.html | 33 ++++++++--------
 .../layouts/examples/single.html              | 35 +++++++++--------
 themes/aurelia-theme/layouts/faq/single.html  | 34 ++++++++---------
 .../aurelia-theme/layouts/learn/single.html   | 15 ++++----
 .../aurelia-theme/layouts/roadmap/single.html | 38 ++++++++-----------
 7 files changed, 75 insertions(+), 84 deletions(-)

diff --git a/themes/aurelia-theme/layouts/blog/list.html b/themes/aurelia-theme/layouts/blog/list.html
index e169150..5ca06ba 100644
--- a/themes/aurelia-theme/layouts/blog/list.html
+++ b/themes/aurelia-theme/layouts/blog/list.html
@@ -30,7 +30,7 @@ <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-
 </section>
 
 <!-- Blog Posts List -->
-<section class="py-16 bg-white">
+<section class="py-4 bg-white">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Featured Post -->
     {{ $paginator := .Paginate (where .Site.RegularPages "Section" "blog") 7 }}
diff --git a/themes/aurelia-theme/layouts/blog/single.html b/themes/aurelia-theme/layouts/blog/single.html
index b3556e2..84c7673 100644
--- a/themes/aurelia-theme/layouts/blog/single.html
+++ b/themes/aurelia-theme/layouts/blog/single.html
@@ -48,7 +48,7 @@ <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-
 </section>
 
 <!-- Article Content -->
-<article class="py-16 bg-white">
+<article class="py-4 bg-white">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex flex-col lg:flex-row gap-12">
       <!-- Main Content -->
diff --git a/themes/aurelia-theme/layouts/contact/single.html b/themes/aurelia-theme/layouts/contact/single.html
index 8d945c0..04ebb49 100644
--- a/themes/aurelia-theme/layouts/contact/single.html
+++ b/themes/aurelia-theme/layouts/contact/single.html
@@ -1,25 +1,24 @@
 {{ define "main" }}
-<!-- Contact Header -->
 <section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
-  <!-- Decorative Background -->
-  <div class="absolute inset-0 overflow-hidden">
-    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
-    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
-  </div>
-
-  <!-- Header Content -->
-  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-      {{ .Title }}
-    </h1>
-    {{ with .Description }}
-    <p class="text-xl text-gray-600 mb-8">{{ . }}</p>
-    {{ end }}
-  </div>
+    <!-- Decorative Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
+      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
+    </div>
+  
+    <!-- Header Content -->
+    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+        {{ .Title }}
+      </h1>
+      {{ with .Description }}
+      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
+      {{ end }}
+    </div>
 </section>
 
 <!-- Contact Content -->
-<section class="py-16 bg-white">
+<section class="py-4 bg-white">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Content Area -->
     <div class="prose prose-lg max-w-none mb-12
diff --git a/themes/aurelia-theme/layouts/examples/single.html b/themes/aurelia-theme/layouts/examples/single.html
index cf69399..d5c93b1 100644
--- a/themes/aurelia-theme/layouts/examples/single.html
+++ b/themes/aurelia-theme/layouts/examples/single.html
@@ -1,25 +1,24 @@
 {{ define "main" }}
-<!-- Examples Header -->
-<section class="relative py-24 bg-gradient-to-b from-white to-gray-50">
-  <!-- Decorative Background -->
-  <div class="absolute inset-0 overflow-hidden">
-    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
-    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
-  </div>
-
-  <!-- Header Content -->
-  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-      {{ .Title }}
-    </h1>
-    <div class="prose prose-lg max-w-none text-gray-600">
-      {{ .Content }}
+<section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
+    <!-- Decorative Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
+      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
     </div>
-  </div>
-</section>
+  
+    <!-- Header Content -->
+    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+        {{ .Title }}
+      </h1>
+      {{ with .Description }}
+      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
+      {{ end }}
+    </div>
+  </section>
 
 <!-- Repository Link -->
-<section class="py-8 bg-white">
+<section class="py-4 bg-white">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="p-6 rounded-2xl bg-gradient-to-r from-aurelia/5 to-aurelia-light/5 border border-aurelia/10">
       <div class="flex items-center justify-between gap-6">
diff --git a/themes/aurelia-theme/layouts/faq/single.html b/themes/aurelia-theme/layouts/faq/single.html
index 03f4ec6..5701e07 100644
--- a/themes/aurelia-theme/layouts/faq/single.html
+++ b/themes/aurelia-theme/layouts/faq/single.html
@@ -1,23 +1,23 @@
 {{ define "main" }}
 <section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
-  <!-- Decorative Background -->
-  <div class="absolute inset-0 overflow-hidden">
-    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
-    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
-  </div>
-
-  <!-- Header Content -->
-  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-      {{ .Title }}
-    </h1>
-    {{ with .Description }}
-    <p class="text-xl text-gray-600 mb-8">{{ . }}</p>
-    {{ end }}
-  </div>
-</section>
+    <!-- Decorative Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
+      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
+    </div>
+  
+    <!-- Header Content -->
+    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+        {{ .Title }}
+      </h1>
+      {{ with .Description }}
+      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
+      {{ end }}
+    </div>
+  </section>
 
-<section class="py-16 bg-white relative">
+<section class="py-4 bg-white relative">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="lg:grid lg:grid-cols-8 lg:gap-8">
       <!-- Main Content -->
diff --git a/themes/aurelia-theme/layouts/learn/single.html b/themes/aurelia-theme/layouts/learn/single.html
index c29678d..d1ef254 100644
--- a/themes/aurelia-theme/layouts/learn/single.html
+++ b/themes/aurelia-theme/layouts/learn/single.html
@@ -1,25 +1,24 @@
 {{ define "main" }}
-<!-- Learn Header -->
 <section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
   <!-- Decorative Background -->
-  <div class="absolute inset-0 overflow-hidden">
-    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
-    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
+  <div class="absolute inset-0 overflow-hidden pointer-events-none">
+    <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
+    <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
   </div>
 
   <!-- Header Content -->
-  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
       {{ .Title }}
     </h1>
     {{ with .Description }}
-    <p class="text-xl text-gray-600 mb-8">{{ . }}</p>
+    <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
     {{ end }}
   </div>
 </section>
 
 <!-- Learn Content -->
-<article class="py-16 bg-white">
+<article class="py-4 bg-white">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="prose prose-lg max-w-none 
                 prose-h1:text-4xl prose-h1:font-bold prose-h1:mb-8 prose-h1:text-gray-900
diff --git a/themes/aurelia-theme/layouts/roadmap/single.html b/themes/aurelia-theme/layouts/roadmap/single.html
index 70784bf..1306205 100644
--- a/themes/aurelia-theme/layouts/roadmap/single.html
+++ b/themes/aurelia-theme/layouts/roadmap/single.html
@@ -1,30 +1,24 @@
 {{ define "main" }}
-<!-- Roadmap Header -->
-<section class="relative py-24 bg-gradient-to-b from-white to-gray-50">
-  <!-- Decorative Background -->
-  <div class="absolute inset-0 overflow-hidden">
-    <div
-      class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl">
+<section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
+    <!-- Decorative Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
+      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
     </div>
-    <div
-      class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl">
+  
+    <!-- Header Content -->
+    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+        {{ .Title }}
+      </h1>
+      {{ with .Description }}
+      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
+      {{ end }}
     </div>
-  </div>
-
-  <!-- Header Content -->
-  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h1
-      class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-      {{ .Title }}
-    </h1>
-    {{ with .Description }}
-    <p class="text-xl text-gray-600 mb-8">{{ . }}</p>
-    {{ end }}
-  </div>
-</section>
+  </section>
 
 <!-- Roadmap Content -->
-<section class="py-16 bg-white">
+<section class="py-4 bg-white">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="roadmap-timeline relative">
       <!-- Timeline Center Line -->