Merge pull request #143 from bkmgit/clickable-navigation

Ensure links are above any images to remain clickable

Author: jubalh

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>

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>

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>

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>

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>

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>

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%);