fix: fix formatting on feature and code links (#182)

.markdownlint.yml

@@ -2,5 +2,6 @@
 default: True
 MD013: False
 MD041: False
+MD042: False
 MD004:
   style: dash

exampleSite/content/posts/features/code-blocks.md

@@ -20,7 +20,7 @@ To display an inline shortcode use single quotes:
 `some code`
 ```
 
-**Example:** `some code`
+**Example:** `some code` with a [`link`](#)
 
 ## Code blocks
 

layouts/_default/_markup/render-link.html

@@ -1,8 +1,14 @@
 {{- $raw := or (hasPrefix .Text "<img") (hasPrefix .Text "<figure") -}}
+{{- $code := hasPrefix .Text "<code" -}}
 <a
-  class="gblog-markdown__link{{ if $raw }}--raw{{ end }}"
+  class="gblog-markdown__link{{ if $raw -}}
+    --raw
+  {{- else if $code -}}
+    --code
+  {{- end }}"
   href="{{ .Destination | safeURL }}"
   {{ with .Title }}title="{{ . }}"{{ end }}
-  >{{ .Text | safeHTML }}</a
 >
+  {{- .Text | safeHTML -}}
+</a>
 {{- /* Drop trailing newlines */ -}}

src/sass/_base.scss

@@ -312,7 +312,7 @@ img {
   }
 
   &__readmore {
-    margin: 1.5rem 0 $padding-32 0;
+    margin: $padding-16 0;
 
     a:visited {
       color: var(--link-color);
@@ -369,20 +369,29 @@ img {
     }
 
     span {
-      background: rgba($gray-900, 0.8);
+      background: $gray-800;
       position: absolute;
       bottom: 0;
       right: 0;
-      padding: $padding-4;
+      padding: $padding-4 $padding-8;
       font-size: 0.8em;
       color: $gray-100;
       border-radius: $border-radius 0;
     }
 
-    a:hover,
+    a {
+      text-decoration: none;
+      color: $link-color-dark;
+    }
+
+    a:hover {
+      text-decoration: underline;
+      background: none;
+    }
+
     a:visited,
     a:visited:hover {
-      color: $gray-100 !important;
+      color: $link-color-dark;
     }
   }
 

src/sass/_markdown.scss

@@ -62,6 +62,24 @@
     }
   }
 
+  &__link--code {
+    text-decoration: none;
+    code {
+      color: inherit !important;
+    }
+
+    &:hover {
+      background: none;
+      color: var(--link-color) !important;
+      text-decoration: underline;
+    }
+
+    &:visited,
+    &:visited:hover {
+      color: var(--link-color-visited) !important;
+    }
+  }
+
   img {
     max-width: 100%;
     border-radius: $border-radius;