Fix back arrow

Author: marc-mrt

assets/css/index.css

@@ -105,16 +105,15 @@ header > a {
 }
 
 #back-arrow {
-    font-size: var(--text-font-size-lg);
     position: absolute;
     text-decoration: none;
     top: 0;
     left: calc(var(--text-font-size-lg) * -1);
 }
 
-#back-arrow:hover {
-    transition: all ease 250ms;
-    transform: translateX(-0.25rem);
+#back-arrow:hover > svg {
+    transition: stroke ease 250ms;
+    stroke: var(--text-accent-color) ;
 }
 
 footer {
@@ -125,7 +124,6 @@ footer {
 
 h1 {
     font-size: var(--text-font-size-lg);
-    line-height: var(--text-line-height-lg);
 }
 
 p,

layouts/_default/baseof.html

@@ -16,7 +16,9 @@ <h1>{{ .Page.Parent.Title }}</h1>
       {{ end }}
     {{ end }}
     {{ if .Page.Parent }}
-      <a id="back-arrow" aria-label="Go back" href="{{ .Parent.Permalink }}"><-</a>
+      <a id="back-arrow" aria-label="Go back" href="{{ .Parent.Permalink }}">
+        {{ partial "back-arrow.html" . }}
+      </a>
     {{ end }}
     </header>
     <main>

layouts/partials/back-arrow.html

@@ -0,0 +1,15 @@
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  fill="none" 
+  viewBox="0 0 24 24" 
+  stroke-width="1.5" 
+  stroke="currentColor" 
+  height="1.5rem" 
+  width="1.5rem"
+>
+  <path 
+    stroke-linecap="round" 
+    stroke-linejoin="round" 
+    d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" 
+  />
+</svg>