From 6075584f367679e3c117a270e09f20b68dba263d Mon Sep 17 00:00:00 2001
From: Benson Muite <benson_muite@emailplus.org>
Date: Wed, 25 Mar 2026 20:44:47 +0300
Subject: [PATCH] Ensure links are above any images to remain clickable

Styling is also changed within the templates. Probably
sufficient to only style links using css.
---
 blogsource/content/contributors/contributor-index.xml    | 4 ++--
 blogsource/content/contributors/contributor-template.xml | 4 ++--
 blogsource/content/post/blog-index.xml                   | 6 +++---
 blogsource/content/post/blog-post-template.xml           | 4 ++--
 landing-template.xml                                     | 2 +-
 manual-template.xml                                      | 4 ++--
 src/scss/layout.scss                                     | 5 +++++
 7 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/blogsource/content/contributors/contributor-index.xml b/blogsource/content/contributors/contributor-index.xml
index e4ce650..5da5c0c 100644
--- a/blogsource/content/contributors/contributor-index.xml
+++ b/blogsource/content/contributors/contributor-index.xml
@@ -14,7 +14,7 @@
     <img class="overlay" src="../images/profanity_mouth-only.png" alt="Profanity Illustration" />
     <header>
         <h1>
-            <a href="../../index.html">
+            <a href="../../index.html" style="position: relative">
             Profani<span class="kern-ty">ty</span>
             </a>
         </h1>
@@ -23,7 +23,7 @@
     <nav style="float: right;">
         <a href="../index.html">Main page</a>
     </nav>
-    <article id="manual">
+    <article id="manual" style="position: relative">
         <ul>
             <li data-sblg-nav="1" data-sblg-navcontent="1">
                 <a href="${sblg-base}.html">${sblg-title}</a>
diff --git a/blogsource/content/contributors/contributor-template.xml b/blogsource/content/contributors/contributor-template.xml
index ba5b833..f8887bd 100644
--- a/blogsource/content/contributors/contributor-template.xml
+++ b/blogsource/content/contributors/contributor-template.xml
@@ -14,7 +14,7 @@
     <img class="overlay" src="../images/profanity_mouth-only.png" alt="Profanity Illustration" />
     <header>
         <h1>
-            <a href="../index.html">
+            <a href="../index.html" style="position: relative">
             Profani<span class="kern-ty">ty</span>
             </a>
         </h1>
@@ -31,7 +31,7 @@
             <a href="${sblg-next-base}.html">&#x21A0;</a>
         </span>
     </nav>
-    <article data-sblg-article="1"> Content</article>
+    <article data-sblg-article="1" style="position: relative"> Content</article>
     <nav style="float: right;">
         <span>
             <a href="${sblg-prev-base}.html">&#x219E;</a>
diff --git a/blogsource/content/post/blog-index.xml b/blogsource/content/post/blog-index.xml
index a540817..0ab7dee 100644
--- a/blogsource/content/post/blog-index.xml
+++ b/blogsource/content/post/blog-index.xml
@@ -14,16 +14,16 @@
     <img class="overlay" src="../../images/profanity_mouth-only.png" alt="Profanity Illustration" />
     <header>
         <h1>
-            <a href="../../index.html">
+            <a href="../../index.html" style="position: relative">
             Profani<span class="kern-ty">ty</span>
             </a>
         </h1>
         <h2>Developer Blog</h2>
     </header>
     <nav style="float: right;">
-        <a href="../../index.html">Main page</a>
+        <a href="../../index.html" style="position: relative">Main page</a>
     </nav>
-    <article id="manual">
+    <article id="manual" style="position: relative">
         <ul>
             <li data-sblg-nav="1" data-sblg-navcontent="1">
                 <a href="${sblg-base}.html">${sblg-title}</a>
diff --git a/blogsource/content/post/blog-post-template.xml b/blogsource/content/post/blog-post-template.xml
index 5dd58a8..e81e458 100644
--- a/blogsource/content/post/blog-post-template.xml
+++ b/blogsource/content/post/blog-post-template.xml
@@ -14,7 +14,7 @@
     <img class="overlay" src="../../images/profanity_mouth-only.png" alt="Profanity Illustration" />
     <header>
         <h1>
-            <a href="../../index.html">
+            <a href="../../index.html" style="position: relative">
             Profani<span class="kern-ty">ty</span>
             </a>
         </h1>
@@ -31,7 +31,7 @@
             <a href="${sblg-next-base}.html">&#x21A0;</a>
         </span>
     </nav>
-    <article data-sblg-article="1"> Content</article>
+    <article data-sblg-article="1" style="position: relative"> Content</article>
     <nav style="float: right;">
         <span>
             <a href="${sblg-prev-base}.html">&#x219E;</a>
diff --git a/landing-template.xml b/landing-template.xml
index 103f1ce..e7a0a61 100644
--- a/landing-template.xml
+++ b/landing-template.xml
@@ -17,7 +17,7 @@
         <h1>Profani<span class="kern-ty">ty</span></h1>
         <h2>${sblg-get|subtitle}</h2>
     </header>
-    <article data-sblg-article="1"> Content</article>
+    <article data-sblg-article="1" style="position: relative"> Content</article>
     <div id="Zoomer" style="overflow-y:auto"></div>
     <footer>
         <p class="matty">site designed by <a href="http://www.matthewbalaam.co.uk">Matthew Balaam</a></p>
diff --git a/manual-template.xml b/manual-template.xml
index db2c556..b119d8e 100644
--- a/manual-template.xml
+++ b/manual-template.xml
@@ -14,13 +14,13 @@
     <img class="overlay" src="images/profanity_mouth-only.png" alt="Profanity Illustration" />
     <header>
         <h1>
-            <a href="index.html">
+            <a href="index.html" style="position: relative">
             Profani<span class="kern-ty">ty</span>
             </a>
         </h1>
         <h2>${sblg-get|subtitle}</h2>
     </header>
-    <article data-sblg-article="1"> Content</article>
+    <article data-sblg-article="1" style="position: relative"> Content</article>
     <footer>
         <p class="matty">site designed by <a href="http://www.matthewbalaam.co.uk">Matthew Balaam</a></p>
     </footer>
diff --git a/src/scss/layout.scss b/src/scss/layout.scss
index 891fa90..2e2c743 100644
--- a/src/scss/layout.scss
+++ b/src/scss/layout.scss
@@ -20,6 +20,9 @@ body {
   overflow-x: hidden; //stop horizontal scrollbars
   padding-left: $grid-padding-mobile;
   padding-right: $grid-padding-mobile;
+  a {
+    position: relative;
+  }
   @media screen and (min-width: $medium) {
     width: auto;
     margin-left: auto;
@@ -100,6 +103,7 @@ header {
   margin-top: $gap-vertical * 3;
   margin-bottom: $gap-vertical * 3;
   a {
+    position:relative,
     &:link,
     &:visited,
     &:hover,
@@ -216,6 +220,7 @@ header {
   }
 
   a {
+    position: relative;
     border-radius: 6px;
     min-height: 10em;
     border: 1em solid color.mix(black, $backgroundShade, 95%);