Add clickable anchors

themes/maik-blog/assets/scss/_main.scss

@@ -477,4 +477,46 @@ table {
       display: inline;
     }
   }
-}
+}
+
+.article-heading {
+  a {
+    position: relative;
+    text-decoration: none;
+
+    &:hover {
+      &::after {
+        content: " ";
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 100%;
+
+        background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: auto 50%;
+      }
+    }
+
+    @media #{$media-size-tablet-min} {
+      &:hover {
+        &::after {
+          right: 100%;
+          width: 1.5em;
+
+        }
+      }
+    }
+
+    @media #{$media-size-tablet} {
+      &:hover {
+        &::after {
+          left: 100%;
+          width: 1.2em;
+        }
+      }
+    }
+  }
+}

themes/maik-blog/assets/scss/_variables.scss

@@ -15,7 +15,9 @@ $dark-color-secondary: #73747b;
 $dark-border-color: #4a4b50;
 
 $media-size-phone: "(max-width: 684px)";
+$media-size-phone-min: "(min-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
+$media-size-tablet-min: "(min-width: 900px)";
 $media-size-medium: "(max-width: 1200px)";
 $media-size-medium-min: "(min-width: 1200px)";