hover icons for header links

assets/scss/colors.scss

@@ -229,6 +229,15 @@ h6 {
 }
 
 h1 {
+  & a {
+    &.light {
+      color: $light-bg;
+    }
+    color: $dark-bg;
+    &:hover {
+      background-color: transparent;
+    }
+  }
   & #rss-title {
     background-color: transparent;
     color: $dark-bg;

assets/scss/style.scss

@@ -75,6 +75,20 @@ h5,
 h6 {
   border-top-right-radius: $radius;
   border-bottom-right-radius: $radius;
+  & .with-rss {
+    &:hover {
+      &::before {
+        content: " ";
+      }
+    }
+  }
+  & .singlepagelink {
+    &:hover {
+      &::before{
+        content: "./";
+      }
+    }
+  }
   & .hash-link {
     &:hover {
       cursor: pointer;

layouts/_default/list.html

@@ -2,7 +2,7 @@
 <main>
     <article class="colorswitch">
         <header>
-            <h1 id="title"><a href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></h1>
+            <h1 id="title"><a target="_blank" rel="noreferrer noopener" href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></h1>
         </header>
         <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
         {{.Content}}

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <section id="main">
   <div class="titlecontainer">
-  <h1 id="title" class="colorswitch">{{ .Title }}</h1>
+    <h1 id="title" class="colorswitch"><a href="./" class="colorswitch singlepagelink">{{ .Title }}</a></h1>
   </div>
   <div>
         <article id="content" class="colorswitch">

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <header>
-    <h1 id="title"><a href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></h1>
+    <h1 id="title"><a target="_blank" rel="noreferrer noopener" href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></h1>
 </header>
 <article id="content" class="colorswitch">
   <p>