site: migrate to tailwindcss v4

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
docker · dvdksn · Dec 16, 2024 · Jan 13, 2025 · 0585f9f86f4b6204156e30230c14403fdc3b9bd8
commit 0585f9f86f4b6204156e30230c14403fdc3b9bd8
diff --git a/assets/css/code.css b/assets/css/code.css
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
@@ -0,0 +1,73 @@
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    /*
+   * Font faces for Roboto Flex and Roboto Mono.
+   *
+   * - https://fonts.google.com/specimen/Roboto+Flex
+   * - https://fonts.google.com/specimen/Roboto+Mono
+   *
+   * The TTF fonts have been compressed to woff2,
+   * preserving the latin character subset.
+   *
+   * */
+
+    /* Roboto Flex */
+    @font-face {
+      font-family: "Roboto Flex";
+      src: url("/assets/fonts/RobotoFlex.woff2") format("woff2");
+      font-weight: 100 1000; /* Range of weights Roboto Flex supports */
+      font-stretch: 100%; /* Range of width Roboto Flex supports */
+      font-style: oblique 0deg 10deg; /* Range of oblique angle Roboto Flex supports */
+      font-display: fallback;
+    }
+
+    /* Roboto Mono */
+    @font-face {
+      font-family: "Roboto Mono";
+      src: url("/assets/fonts/RobotoMono-Regular.woff2") format("woff2");
+      font-weight: 100 700; /* Define the range of weight the variable font supports */
+      font-style: normal;
+      font-display: fallback;
+    }
+
+    /* Roboto Mono Italic */
+    @font-face {
+      font-family: "Roboto Mono";
+      src: url("/assets/fonts/RobotoMono-Italic.woff2") format("woff2");
+      font-weight: 100 700; /* Define the range of weight the variable font supports */
+      font-style: italic;
+      font-display: fallback;
+    }
+  }
+}
+
+@theme {
+  /* Font variables */
+  --font-sans: "Roboto Flex", system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+    sans-serif;
+  --font-mono: "Roboto Mono", monospace;
+  --font-icons: "Material Symbols Rounded";
+
+  /* Font sizes */
+  --text-xs: 0.7143rem;
+  --text-xs--letter-spacing: 0.015em;
+  --text-xs--font-weight: 500;
+  --text-sm: 0.851rem;
+  --text-base: 14px;
+  --text-lg: 1.1429rem;
+  --text-lg--line-height: 1.75;
+  --text-xl: 1.2857rem;
+  --text-xl--letter-spacing: -0.015em;
+  --text-xl--font-weight: 500;
+  --text-2xl: 1.5rem;
+  --text-2xl--letter-spacing: -0.015em;
+  --text-2xl--font-weight: 500;
+  --text-3xl: 2rem;
+  --text-3xl--font-weight: 500;
+  --text-4xl: 2.5rem;
+  --text-4xl--letter-spacing: -0.015em;
+  --text-4xl--font-weight: 500;
+}
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -1,4 +1,5 @@
 /* global styles */
+@import "tailwindcss";
 
 @layer base {
   [x-cloak=""] {
@@ -41,49 +42,61 @@
   input[type="search"]::-ms-clear {
     display: none;
   }
+
+  /* Styles for built-in Table of Contents markup */
+  #TableOfContents {
+    .toc a {
+      @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
+      &[aria-current="true"],
+      &:hover {
+        @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
+      }
+      &:not([aria-current="true"]) {
+        @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
+      }
+    }
+  }
 }
 
 /* utility classes */
 
-@layer utilities {
-  .link {
-    @apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
-  }
+@utility link {
+  @apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
+}
 
-  .invertible {
-    @apply dark:hue-rotate-180 dark:invert dark:filter;
-  }
+@utility invertible {
+  @apply dark:hue-rotate-180 dark:invert dark:filter;
+}
 
-  .bg-pattern-blue {
-    background-color: theme(colors.white / 50%);
-    background-image: url('/assets/images/bg-pattern-blue.webp');
-    background-blend-mode: overlay;
-    background-size: cover;
-    background-repeat: none;
-    .dark & {
-      background-color: theme(colors.black / 70%);
-    }
+@utility bg-pattern-blue {
+  background-color: theme(colors.white / 50%);
+  background-image: url('/assets/images/bg-pattern-blue.webp');
+  background-blend-mode: overlay;
+  background-size: cover;
+  background-repeat: none;
+  .dark & {
+    background-color: theme(colors.black / 70%);
   }
+}
 
-  .bg-pattern-purple {
-    background-color: theme(colors.white / 50%);
-    background-image: url('/assets/images/bg-pattern-purple.webp');
-    background-blend-mode: overlay;
-    background-size: cover;
-    background-repeat: none;
-    .dark & {
-      background-color: theme(colors.black / 70%);
-    }
+@utility bg-pattern-purple {
+  background-color: theme(colors.white / 50%);
+  background-image: url('/assets/images/bg-pattern-purple.webp');
+  background-blend-mode: overlay;
+  background-size: cover;
+  background-repeat: none;
+  .dark & {
+    background-color: theme(colors.black / 70%);
   }
+}
 
-  .bg-pattern-verde {
-    background-color: theme(colors.white / 50%);
-    background-image: url('/assets/images/bg-pattern-verde.webp');
-    background-blend-mode: overlay;
-    background-size: cover;
-    background-repeat: none;
-    .dark & {
-      background-color: theme(colors.black / 70%);
-    }
+@utility bg-pattern-verde {
+  background-color: theme(colors.white / 50%);
+  background-image: url('/assets/images/bg-pattern-verde.webp');
+  background-blend-mode: overlay;
+  background-size: cover;
+  background-repeat: none;
+  .dark & {
+    background-color: theme(colors.black / 70%);
   }
 }
diff --git a/assets/css/hack.css b/assets/css/hack.css
@@ -2,3 +2,24 @@
 .ot-floating-button__close {
   @apply flex justify-center items-center;
 }
+
+/* Kapa overrides */
+.mantine-Modal-root {
+  .mantine-Modal-inner { inset: 0; }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  .mantine-List-root {
+    min-width: 100%;
+  }
+
+  .mantine-List-itemWrapper {
+    max-width: 100%;
+  }
+
+  .mantine-Prism-copy {
+    background-color: rgb(20, 21, 23)
+  }
+}
diff --git a/assets/css/icons.css b/assets/css/icons.css
@@ -1,29 +1,29 @@
-@layer utilities {
-  .icon-svg {
-    svg {
-      font-size: 24px;
-      width: 1em;
-      height: 1em;
-      display: inline-block;
-      fill: currentColor;
-    }
+@import "tailwindcss";
+
+@utility icon-svg {
+  svg {
+    font-size: 24px;
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    fill: currentColor;
   }
+}
 
-  .icon-xs {
-    svg {
-      font-size: 12px;
-    }
+@utility icon-xs {
+  svg {
+    font-size: 12px;
   }
+}
 
-  .icon-sm {
-    svg {
-      font-size: 16px;
-    }
+@utility icon-sm {
+  svg {
+    font-size: 16px;
   }
+}
 
-  .icon-lg {
-    svg {
-      font-size: 32px;
-    }
+@utility icon-lg {
+  svg {
+    font-size: 32px;
   }
 }
diff --git a/assets/css/kapa.css b/assets/css/kapa.css