chore: style and script refactor

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

assets/css/global.css

@@ -18,12 +18,6 @@
     @apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
   }
 
-  .external-link {
-    .icon-svg svg {
-      @apply text-base ml-1 align-top;
-    }
-  }
-
   .invertible {
     @apply dark:hue-rotate-180 dark:invert dark:filter;
   }

assets/css/icons.css

@@ -8,4 +8,22 @@
       fill: currentColor;
     }
   }
+
+  .icon-xs {
+    svg {
+      @apply text-base;
+    }
+  }
+
+  .icon-sm {
+    svg {
+      @apply text-lg;
+    }
+  }
+
+  .icon-top {
+    svg {
+      @apply ml-1 align-top;
+    }
+  }
 }

layouts/_default/_markup/render-link.html

@@ -2,12 +2,12 @@
 {{- if (strings.HasPrefix $url "http") -}}
   {{/* external link, add icon */}}
   <a
-    class="link external-link"
+    class="link"
     href="{{ $url | safeURL }}"
     target="_blank"
     rel="noopener">
       {{- .Text | safeHTML -}}
-      <span class="icon-svg">
+      <span class="icon-svg icon-xs icon-top">
         {{- partial "icon" "open_in_new" -}}
       </span></a>
 {{- else if (strings.HasPrefix $url "/") -}}

layouts/partials/github-links.html

@@ -3,9 +3,9 @@
 {{ if not (in .Filename "/_vendor/") }}
 <p class="flex items-center gap-2">
   <span class="icon-svg">{{ partial "icon" "edit" }}</span>
-  <a class="link external-link" target="_blank" rel="noopener"
+  <a class="link" target="_blank" rel="noopener"
     href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{ T "editPage" }}
-    <span class="icon-svg">
+    <span class="icon-svg icon-xs icon-top">
       {{- partial "icon" "open_in_new" -}}
     </span></a>
 </p>
@@ -13,9 +13,9 @@
 {{ end }}
 <p class="flex items-center gap-2">
   <span class="icon-svg">{{ partial "icon" "done" }}</span>
-  <a class="link external-link" target="_blank" rel="noopener"
+  <a class="link" target="_blank" rel="noopener"
     href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{ T "requestChanges" }}
-    <span class="icon-svg">
+    <span class="icon-svg icon-xs icon-top">
       {{- partial "icon" "open_in_new" -}}
     </span></a>
   </a>