From d29dbaf482c6793935b91149a8d994a8d879d47a Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Mon, 4 Mar 2024 11:58:08 +0100
Subject: [PATCH] style: design updates march 2024

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/css/global.css                     |  5 ++
 assets/css/icons.css                      |  8 +--
 assets/css/styles.css                     |  1 -
 assets/css/tables.css                     | 15 -----
 layouts/_default/_markup/render-link.html |  2 +-
 layouts/partials/components/card.html     | 80 +++++++++++------------
 layouts/partials/github-links.html        | 12 ++--
 layouts/partials/tooltip.html             |  2 +-
 tailwind.config.js                        |  1 -
 9 files changed, 56 insertions(+), 70 deletions(-)
 delete mode 100644 assets/css/tables.css

diff --git a/assets/css/global.css b/assets/css/global.css
index 0b8471c001..36f68746df 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -8,6 +8,11 @@
   :root {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+
+    scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05);
+    &.dark {
+      scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10);
+    }
   }
 }
 
diff --git a/assets/css/icons.css b/assets/css/icons.css
index 4a6121f460..08428273b2 100644
--- a/assets/css/icons.css
+++ b/assets/css/icons.css
@@ -11,19 +11,19 @@
 
   .icon-xs {
     svg {
-      @apply text-base;
+      font-size: 12px;
     }
   }
 
   .icon-sm {
     svg {
-      @apply text-lg;
+      font-size: 16px;
     }
   }
 
-  .icon-top {
+  .icon-lg {
     svg {
-      @apply ml-1 align-top;
+      font-size: 32px;
     }
   }
 }
diff --git a/assets/css/styles.css b/assets/css/styles.css
index dacea4f522..9a0e27ef3a 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -10,7 +10,6 @@
 @import "/assets/css/code";
 @import "/assets/css/toc";
 @import "/assets/css/callouts";
-@import "/assets/css/tables";
 
 @import "tailwindcss/utilities";
 @import "/assets/css/syntax-light";
diff --git a/assets/css/tables.css b/assets/css/tables.css
deleted file mode 100644
index 80c65ced1b..0000000000
--- a/assets/css/tables.css
+++ /dev/null
@@ -1,15 +0,0 @@
-@layer components {
-  .prose table {
-    @apply table w-full overflow-x-auto text-base sm:block;
-    thead tr {
-      @apply bg-gray-light-300 dark:bg-gray-dark-300;
-    }
-    tbody tr:nth-of-type(2n) {
-      @apply bg-gray-light-200 dark:bg-gray-dark-200;
-    }
-    th,
-    td {
-      @apply p-2;
-    }
-  }
-}
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index d0fb36db14..45051bc673 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -7,7 +7,7 @@
     target="_blank"
     rel="noopener">
       {{- .Text | safeHTML -}}
-      <span class="icon-svg icon-xs icon-top">
+      <span class="pl-1 icon-svg icon-sm">
         {{- partial "icon" "open_in_new" -}}
       </span></a>
 {{- else if (strings.HasPrefix $url "/") -}}
diff --git a/layouts/partials/components/card.html b/layouts/partials/components/card.html
index 4603ffb09c..0d1b6bead8 100644
--- a/layouts/partials/components/card.html
+++ b/layouts/partials/components/card.html
@@ -1,54 +1,52 @@
 {{ if (and .image .icon) }}
   {{ errorf "card: don't use both image and icon: %s" . }}
 {{ end }}
-<div class="not-prose overflow-x-hidden">
+<div class="not-prose overflow-x-hidden drop-shadow bg-white rounded
+             border border-gray-light-100 dark:bg-gray-dark-200 dark:border-gray-dark-400
+             {{ if .link }}hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
   {{ if .link }}
-  <a class="h-full" href="{{ .link }}">
-    {{ end }}
-    <div class="h-full bg-white rounded-sm
-             border border-gray-light-100 drop-shadow-sm dark:bg-gray-dark-200 dark:border-gray-dark-400
-             {{ if .link }}hover:drop-shadow-lg hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
-      {{ if .image }}
-      {{/* use the "tall image" layout */}}
-      <div class="flex gap-2 items-stretch">
-        <div class="basis-1/3">
-          <img class="h-full w-full object-cover" src="{{ .image }}" alt="">
-        </div>
-        <div class="basis-2/3 flex flex-col gap-2 p-4">
-          <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
-            {{ markdownify .title }}
-          </div>
-          <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
-            {{ .description | markdownify }}
-          </div>
-        </div>
+    <a href="{{ .link }}">
+  {{ end }}
+    {{ if .image }}
+    {{/* use the "tall image" layout */}}
+    <div class="flex gap-2 items-stretch">
+      <div class="basis-1/3">
+        <img class="h-full w-full object-cover" src="{{ .image }}" alt="">
       </div>
-      {{ else }}
-      {{/* use the default layout */}}
-      <div class="flex flex-col gap-2 p-4">
-        <div class="flex gap-4 items-center">
-          {{ with .icon }}
-            {{ if strings.ContainsAny . "/." }}
-            {{/* image file */}}
-            <img class="w-[32px] invertible" src="{{ . }}" alt="">
-            {{ else }}
-            {{/* icon ligature */}}
-            <span class="icon-svg">{{ partial "icon" . }}</span>
-            {{ end }}
-          {{ end }}
-          <div>
-            <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
-              {{ markdownify .title }}
-            </div>
-          </div>
+      <div class="basis-2/3 flex flex-col gap-2 p-4">
+        <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
+          {{ markdownify .title }}
         </div>
         <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
           {{ .description | markdownify }}
         </div>
       </div>
-      {{ end }}
     </div>
-    {{ if .link }}
-  </a>
+    {{ else }}
+    {{/* use the default layout */}}
+    <div class="flex flex-col gap-2 p-4">
+      <div class="flex gap-4 items-center">
+        {{ with .icon }}
+          {{ if strings.ContainsAny . "/." }}
+          {{/* image file */}}
+          <img class="w-[32px] invertible" src="{{ . }}" alt="">
+          {{ else }}
+          {{/* icon ligature */}}
+          <span class="icon-svg">{{ partial "icon" . }}</span>
+          {{ end }}
+        {{ end }}
+        <div>
+          <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
+            {{ markdownify .title }}
+          </div>
+        </div>
+      </div>
+      <div class="text-gray-light-600 leading-snug dark:text-gray-dark-700">
+        {{ .description | markdownify }}
+      </div>
+    </div>
+    {{ end }}
+  {{ if .link }}
+    </a>
   {{ end }}
 </div>
diff --git a/layouts/partials/github-links.html b/layouts/partials/github-links.html
index 7755e4952b..9476d84b35 100644
--- a/layouts/partials/github-links.html
+++ b/layouts/partials/github-links.html
@@ -4,9 +4,9 @@
 <p class="flex items-center gap-2">
   <span class="icon-svg">{{ partial "icon" "edit" }}</span>
   <a class="link" target="_blank" rel="noopener"
-    href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{ T "editPage" }}
-    <span class="icon-svg icon-xs icon-top">
-      {{- partial "icon" "open_in_new" -}}
+    href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{- T "editPage" -}}
+    <span class="icon-svg icon-xs">
+      {{ partial "icon" "open_in_new" }}
     </span></a>
 </p>
 {{ end }}
@@ -14,9 +14,9 @@
 <p class="flex items-center gap-2">
   <span class="icon-svg">{{ partial "icon" "done" }}</span>
   <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 icon-xs icon-top">
-      {{- partial "icon" "open_in_new" -}}
+    href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{- T "requestChanges" -}}
+    <span class="icon-svg icon-xs">
+      {{ partial "icon" "open_in_new" }}
     </span></a>
   </a>
 </p>
diff --git a/layouts/partials/tooltip.html b/layouts/partials/tooltip.html
index 06fa905ffb..bebaa4a2ed 100644
--- a/layouts/partials/tooltip.html
+++ b/layouts/partials/tooltip.html
@@ -1,5 +1,5 @@
 <div data-tooltip-wrapper>
-  <div data-tooltip-button class="icon-svg icon-sm flex items-center text-blue-light dark:text-blue-dark">
+  <div data-tooltip-button class="icon-svg flex items-center text-blue-light dark:text-blue-dark">
     {{ partial "icon" "help" }}
   </div>
   <div data-tooltip-body
diff --git a/tailwind.config.js b/tailwind.config.js
index daaf363ce5..03792a11ef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,6 @@ module.exports = {
             'pre code': false,
             'code::before': false,
             'code::after': false,
-            table: false,
             // light colors for prose
             "--tw-prose-body": theme("colors.black"),
             "--tw-prose-headings": theme("colors.black"),