From 0d8058901987e8dd0cd0e28b7c4038a71e1d60d5 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Sun, 21 Feb 2021 14:04:40 +0100
Subject: [PATCH] fix: prevend wrong formatting for linked images

---
 layouts/_default/_markup/render-link.html |  3 ++-
 layouts/shortcodes/img.html               |  2 +-
 src/sass/_markdown.scss                   | 16 +++++++++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index 5a540b4..a6f52a1 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -1 +1,2 @@
-<a href="{{ .Destination | safeURL | relURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
+{{ $raw := or (hasPrefix .Text "<img") (hasPrefix .Text "<figure") }}
+<a class="gdoc-markdown__link{{ if $raw }}--raw{{ end }}" href="{{ .Destination | safeURL | relURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index 119086d..4ce0085 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -15,7 +15,7 @@
 
 <div class="flex justify-center">
 <figure class="gdoc-markdown__figure">
-    <a href="{{ .RelPermalink }}">
+    <a class="gdoc-markdown__link--raw" href="{{ .RelPermalink }}">
         <img
             {{ if $lazyLoad }}loading="lazy"{{ end }}
             {{ with $customSize }}
diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss
index 34b8305..904e2f1 100644
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@@ -42,7 +42,8 @@
     font-weight: bolder;
   }
 
-  a {
+  a,
+  &__link {
     text-decoration: none;
     border-bottom: 1px solid transparent;
     line-height: 1em;
@@ -52,6 +53,19 @@
     }
   }
 
+  &__link--raw {
+    text-decoration: none;
+    color: $body-font-color;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:visited {
+      color: $body-font-color;
+    }
+  }
+
   img {
     max-width: 100%;
     border-radius: $border-radius;