style: design updates march 2024

Signed-off-by: David Karlsson <[email protected]>
whmmm · Mar 4, 2024 · d29dbaf · d29dbaf
1 parent 6d1edcc
commit d29dbaf
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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="">
+    <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>
+      <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="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 class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
+          {{ .description | markdownify }}
         </div>
       </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 }}
+    </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 }}
-          <div>
-            <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
-              {{ markdownify .title }}
-            </div>
+        {{ 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="text-gray-light-500 leading-snug dark:text-gray-dark-700">
-          {{ .description | markdownify }}
-        </div>
       </div>
-      {{ end }}
+      <div class="text-gray-light-600 leading-snug dark:text-gray-dark-700">
+        {{ .description | markdownify }}
+      </div>
     </div>
-    {{ if .link }}
-  </a>
+    {{ end }}
+  {{ if .link }}
+    </a>
   {{ end }}
 </div>
diff --git a/layouts/partials/github-links.html b/layouts/partials/github-links.html
@@ -4,19 +4,19 @@
 <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 }}
 {{ end }}
 <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
@@ -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
@@ -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"),