tailwind working kinda

5 files changed, 207 insertions, 234 deletions

diff --git a/NOTES.md b/NOTES.md
index 0fd67b5..082a9d4 100644
--- a/NOTES.md
+++ b/NOTES.md
@@ -18,6 +18,10 @@ The user is experiencing a build failure with the `litedb` library. The error me
 *   The `lib` directory works correctly without a main module file or an explicit `(modules ...)` stanza.
 *   The error is specific to the `litedb` library.
 
+
+* Tailwind is abominable. They deprecated the tailwind.config.js file for a shitty CLI with barely any options. You can't tell it which folders to follow so just call it from root.
+  `bunx @tailwindcss/cli -i js/styles.css -o js/output.css`
+
 ### Next Steps:
 
 I need to re-evaluate my understanding of how `dune` resolves modules. I will now try to run the application again, but this time I will pay close attention to the build output to see if there are any other clues that I've missed.
diff --git a/flake.nix b/flake.nix
index d17ff6f..19f3b33 100644
--- a/flake.nix
+++ b/flake.nix
@@ -4,6 +4,9 @@
     nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
     ocaml.url = "github:nix-ocaml/nix-overlays";
     ocaml.inputs.nixpkgs.follows = "nixpkgs";
+    # it's broken wtf
+    # lsp.url = "github:ocaml/ocaml-lsp";
+    # lsp.inputs.nixpkgs.follows = "nixpkgs";
   };
 
   outputs = {
@@ -88,6 +91,79 @@
           writeShellApplication
           ;
       };
+      mlx-repo = pkgs.fetchFromGitHub {
+        owner = "ocaml-mlx";
+        repo = "mlx";
+        rev = "aa59db58c948f93ab960c63e127f0f5c41d8530c";
+        sha256 = "g2v6U4lubYIVKUkU0j+OwtPxK9tKvleuX+vA4ljJ1bA=";
+      };
+      mlx = pkgs.ocamlPackages.buildDunePackage {
+        pname = "mlx";
+        version = "0.9.0";
+        src = mlx-repo;
+        propagatedBuildInputs = with pkgs.ocamlPackages; [
+          ppxlib
+          ocaml-compiler-libs
+        ];
+      };
+      ocamlmerlinmlx = pkgs.ocamlPackages.buildDunePackage {
+        pname = "ocamlmerlin-mlx";
+        version = "0.9.0";
+        src = mlx-repo;
+
+        nativeBuildInputs = with pkgs.ocamlPackages; [
+          cppo
+        ];
+        propagatedBuildInputs = with pkgs.ocamlPackages; [
+          ppxlib
+          merlin-lib
+          csexp
+        ];
+      };
+      # lsp-repo = pkgs.fetchFromGitHub {
+      #   owner = "ocaml";
+      #   repo = "ocaml-lsp";
+      #   rev = "4483b5b9cb3c58d09cfd113394f3ced8fea11f50";
+      #   sha256 = "+h8XzJutCT587XrLg/rC/c7TXsnm84BEtvUj4CfFqaM=";
+      # };
+      # jsonrpc = pkgs.ocamlPackages.buildDunePackage {
+      #   pname = "jsonrpc";
+      #   version = "1.23.0";
+      #   src = lsp-repo;
+      # };
+      # lsp = pkgs.ocamlPackages.buildDunePackage {
+      #   pname = "lsp";
+      #   version = "1.23.0";
+      #   src = lsp-repo;
+      #   propagatedBuildInputs = with pkgs.ocamlPackages; [
+      #     yojson
+      #     uutf
+      #     ppx_yojson_conv
+      #     jsonrpc
+      #   ];
+      # };
+      # ocaml-lsp = pkgs.ocamlPackages.buildDunePackage {
+      #   pname = "ocaml-lsp-server";
+      #   version = "1.23.0";
+      #   src = lsp-repo;
+      #   nativeBuildInputs = with pkgs.ocamlPackages; [merlin-lib];
+      #   propagatedBuildInputs = with pkgs.ocamlPackages; [
+      #     lsp
+      #     jsonrpc
+      #     stdune
+      #     dune-build-info
+      #     ocamlc-loc
+      #     ocamlformat-rpc-lib
+      #     dune-rpc
+      #     re
+      #     merlin-lib
+      #     spawn
+      #     chrome-trace
+      #     fiber
+      #     camlp-streams
+      #     astring
+      #   ];
+      # };
     in {
       devShells.default = pkgs.mkShell rec {
         packages = [gemini-cli];
@@ -103,10 +179,12 @@
 
           pkgs.opam
           findlib
-          ocaml-lsp
           ocamlformat
+          #
+          ocaml-lsp
           mlx
-          ocamlmerlin-mlx
+          ocamlmerlinmlx
+          #
           ocamlformat-mlx
           melange-json-native
           ppx_rapper
@@ -115,8 +193,8 @@
           eio_main
           piaf
           routes
-          caqti-dynload
-          caqti-driver-postgresql
+          # caqti-dynload
+          # caqti-driver-postgresql
           caqti-driver-sqlite3
           ppx_expect
           logs
diff --git a/js/Pepe.tsx b/js/Pepe.tsx
index c829058..e247f9a 100644
--- a/js/Pepe.tsx
+++ b/js/Pepe.tsx
@@ -167,7 +167,7 @@ export default function VPSProvider() {
   const renderApiKeyStep = () => (
     <Card className="w-full max-w-md mx-auto">
       <CardHeader className="text-center">
-        <div className="mx-auto w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
+        <div className="mx-auto w-[20px] h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
           <Key className="w-6 h-4 text-blue-600" />
         </div>
         <CardTitle>Connect Your Account</CardTitle>
@@ -219,7 +219,7 @@ export default function VPSProvider() {
     <Card className="w-full max-w-4xl mx-auto">
       <CardHeader className="text-center">
         <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
-          <MapPin className="w-6 h-6 text-green-600" />
+          <MapPin className="w-6 h-6 text-green-500" />
         </div>
         <CardTitle>Choose Server Location</CardTitle>
         <CardDescription>
diff --git a/js/output.css b/js/output.css
index ef300d9..97c7dfe 100644
--- a/js/output.css
+++ b/js/output.css
@@ -1,11 +1,8 @@
 /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-
 @layer theme {
-
-  :root,
-  :host {
+  :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
@@ -13,13 +10,18 @@
     --color-red-100: oklch(93.6% 0.032 17.717);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-900: oklch(21% 0.034 264.665);
+    --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-4xl: 56rem;
@@ -32,6 +34,10 @@
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -42,22 +48,14 @@
     --default-mono-font-family: var(--font-mono);
   }
 }
-
 @layer base {
-
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     border: 0 solid;
   }
-
-  html,
-  :host {
+  html, :host {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
@@ -66,117 +64,74 @@
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
   }
-
   hr {
     height: 0;
     color: inherit;
     border-top-width: 1px;
   }
-
   abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
   }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1, h2, h3, h4, h5, h6 {
     font-size: inherit;
     font-weight: inherit;
   }
-
   a {
     color: inherit;
     -webkit-text-decoration: inherit;
     text-decoration: inherit;
   }
-
-  b,
-  strong {
+  b, strong {
     font-weight: bolder;
   }
-
-  code,
-  kbd,
-  samp,
-  pre {
+  code, kbd, samp, pre {
     font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
     font-feature-settings: var(--default-mono-font-feature-settings, normal);
     font-variation-settings: var(--default-mono-font-variation-settings, normal);
     font-size: 1em;
   }
-
   small {
     font-size: 80%;
   }
-
-  sub,
-  sup {
+  sub, sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
-
   sub {
     bottom: -0.25em;
   }
-
   sup {
     top: -0.5em;
   }
-
   table {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
   }
-
   :-moz-focusring {
     outline: auto;
   }
-
   progress {
     vertical-align: baseline;
   }
-
   summary {
     display: list-item;
   }
-
-  ol,
-  ul,
-  menu {
+  ol, ul, menu {
     list-style: none;
   }
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
+  img, svg, video, canvas, audio, iframe, embed, object {
     display: block;
     vertical-align: middle;
   }
-
-  img,
-  video {
+  img, video {
     max-width: 100%;
     height: auto;
   }
-
-  button,
-  input,
-  select,
-  optgroup,
-  textarea,
-  ::file-selector-button {
+  button, input, select, optgroup, textarea, ::file-selector-button {
     font: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -186,207 +141,173 @@
     background-color: transparent;
     opacity: 1;
   }
-
   :where(select:is([multiple], [size])) optgroup {
     font-weight: bolder;
   }
-
   :where(select:is([multiple], [size])) optgroup option {
     padding-inline-start: 20px;
   }
-
   ::file-selector-button {
     margin-inline-end: 4px;
   }
-
   ::placeholder {
     opacity: 1;
   }
-
-  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
     ::placeholder {
       color: currentcolor;
-
       @supports (color: color-mix(in lab, red, red)) {
         color: color-mix(in oklab, currentcolor 50%, transparent);
       }
     }
   }
-
   textarea {
     resize: vertical;
   }
-
   ::-webkit-search-decoration {
     -webkit-appearance: none;
   }
-
   ::-webkit-date-and-time-value {
     min-height: 1lh;
     text-align: inherit;
   }
-
   ::-webkit-datetime-edit {
     display: inline-flex;
   }
-
   ::-webkit-datetime-edit-fields-wrapper {
     padding: 0;
   }
-
-  ::-webkit-datetime-edit,
-  ::-webkit-datetime-edit-year-field,
-  ::-webkit-datetime-edit-month-field,
-  ::-webkit-datetime-edit-day-field,
-  ::-webkit-datetime-edit-hour-field,
-  ::-webkit-datetime-edit-minute-field,
-  ::-webkit-datetime-edit-second-field,
-  ::-webkit-datetime-edit-millisecond-field,
-  ::-webkit-datetime-edit-meridiem-field {
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
-
   :-moz-ui-invalid {
     box-shadow: none;
   }
-
-  button,
-  input:where([type="button"], [type="reset"], [type="submit"]),
-  ::file-selector-button {
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
     appearance: button;
   }
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
     height: auto;
   }
-
   [hidden]:where(:not([hidden="until-found"])) {
     display: none !important;
   }
 }
-
 @layer utilities {
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .mx-auto {
     margin-inline: auto;
   }
-
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
-
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
-
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
-
   .flex {
     display: flex;
   }
-
   .grid {
     display: grid;
   }
-
   .table {
     display: table;
   }
-
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
-
-  .h-8 {
-    height: calc(var(--spacing) * 8);
-  }
-
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-
   .min-h-screen {
     min-height: 100vh;
   }
-
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
-
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
-
+  .w-\[20px\] {
+    width: 20px;
+  }
+  .w-\[60px\] {
+    width: 60px;
+  }
   .w-full {
     width: 100%;
   }
-
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
-
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
-
   .max-w-md {
     max-width: var(--container-md);
   }
-
   .flex-1 {
     flex: 1;
   }
-
   .border-collapse {
     border-collapse: collapse;
   }
-
   .transform {
-    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
-
   .animate-spin {
     animation: var(--animate-spin);
   }
-
   .cursor-pointer {
     cursor: pointer;
   }
-
   .resize {
     resize: both;
   }
-
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-
   .items-center {
     align-items: center;
   }
-
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
-
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -394,7 +315,6 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -402,7 +322,13 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-
+  .space-y-12 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -410,7 +336,6 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-
   .space-x-3 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -418,129 +343,139 @@
       margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-
+  .space-x-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
-
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
-
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
-
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
-
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
-
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-
   .text-center {
     text-align: center;
   }
-
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
-
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
-
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-
   .text-blue-600 {
     color: var(--color-blue-600);
   }
-
   .text-gray-600 {
     color: var(--color-gray-600);
   }
-
   .text-gray-900 {
     color: var(--color-gray-900);
   }
-
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
   .text-green-600 {
     color: var(--color-green-600);
   }
-
   .text-red-600 {
     color: var(--color-red-600);
   }
-
+  .text-white {
+    color: var(--color-white);
+  }
+  .italic {
+    font-style: italic;
+  }
   .underline {
     text-decoration-line: underline;
   }
-
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-shadow {
     transition-property: box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-
   .hover\:border-blue-200 {
     &:hover {
       @media (hover: hover) {
@@ -548,7 +483,20 @@
       }
     }
   }
-
+  .hover\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
+  .hover\:text-gray-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-700);
+      }
+    }
+  }
   .hover\:shadow-md {
     &:hover {
       @media (hover: hover) {
@@ -557,20 +505,17 @@
       }
     }
   }
-
   .md\:grid-cols-2 {
-    @media (width >=48rem) {
+    @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-
   .lg\:grid-cols-3 {
-    @media (width >=64rem) {
+    @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 }
-
 :root {
   --red05: rgba(255, 65, 54, 0.05);
   --red100: rgba(255, 65, 54, 1);
@@ -587,17 +532,14 @@
   --huang: rgb(230, 180, 60);
   --lan: rgb(30, 60, 80);
 }
-
 [data-theme=dark] {
   --background-color: black;
   --text-color: rgb(200, 200, 200);
 }
-
 [data-theme=light] {
   --background-color: white;
   --text-color: black;
 }
-
 @font-face {
   font-family: Crimson Text;
   src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-Regular.ttf) format('truetype');
@@ -605,7 +547,6 @@
   font-style: normal;
   font-display: swap;
 }
-
 @font-face {
   font-family: Crimson Text;
   src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-Italic.ttf) format('truetype');
@@ -613,7 +554,6 @@
   font-style: italic;
   font-display: swap;
 }
-
 @font-face {
   font-family: Crimson Text;
   src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-SemiBold.ttf) format('truetype');
@@ -621,7 +561,6 @@
   font-style: normal;
   font-display: swap;
 }
-
 @font-face {
   font-family: Crimson Text;
   src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-SemiBoldItalic.ttf) format('truetype');
@@ -629,7 +568,6 @@
   font-style: italic;
   font-display: swap;
 }
-
 @font-face {
   font-family: Crimson Text;
   src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-Bold.ttf) format('truetype');
@@ -637,7 +575,6 @@
   font-style: normal;
   font-display: swap;
 }
-
 @font-face {
   font-family: Crimson Text;
   src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-BoldItalic.ttf) format('truetype');
@@ -645,7 +582,6 @@
   font-style: italic;
   font-display: swap;
 }
-
 @font-face {
   font-family: "Inter";
   src: url(https://s3.spandrell.ch/assets/fonts/InterVariableFont.otf) format('truetype-variations');
@@ -653,13 +589,11 @@
   font-style: normal;
   font-display: swap;
 }
-
 html {
   height: 100%;
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
 }
-
 body {
   margin: 0;
   width: 100%;
@@ -675,26 +609,13 @@ body {
   -webkit-font-smoothing: antialiased;
   word-break: break-word;
 }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
+h1, h2, h3, h4, h5, h6, p {
   font-family: Crimson Text;
 }
-
-a,
-button,
-input {
+a, button, input {
   transition: all .4s ease;
 }
-
-input[type="submit"],
-button,
-.button {
+input[type="submit"], button, .button {
   border-color: #181818;
   background-color: #181818;
   padding: 0.5rem 1.25rem;
@@ -725,153 +646,123 @@ button,
   -o-transition: all .4s ease;
   transition: all .4s ease;
 }
-
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-rotate-y {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-rotate-z {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-skew-x {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-skew-y {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
   initial-value: 0;
 }
-
 @property --tw-space-x-reverse {
   syntax: "*";
   inherits: false;
   initial-value: 0;
 }
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
-
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
-
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
 }
-
 @property --tw-shadow-color {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-shadow-alpha {
   syntax: "<percentage>";
   inherits: false;
   initial-value: 100%;
 }
-
 @property --tw-inset-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
 }
-
 @property --tw-inset-shadow-color {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-inset-shadow-alpha {
   syntax: "<percentage>";
   inherits: false;
   initial-value: 100%;
 }
-
 @property --tw-ring-color {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-ring-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
 }
-
 @property --tw-inset-ring-color {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-inset-ring-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
 }
-
 @property --tw-ring-inset {
   syntax: "*";
   inherits: false;
 }
-
 @property --tw-ring-offset-width {
   syntax: "<length>";
   inherits: false;
   initial-value: 0px;
 }
-
 @property --tw-ring-offset-color {
   syntax: "*";
   inherits: false;
   initial-value: #fff;
 }
-
 @property --tw-ring-offset-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
 }
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
-
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-
-    *,
-    ::before,
-    ::after,
-    ::backdrop {
+    *, ::before, ::after, ::backdrop {
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -898,4 +789,4 @@ button,
       --tw-ring-offset-shadow: 0 0 #0000;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/lib/pages/components/Navbar.mlx b/lib/pages/components/Navbar.mlx
index 68003fe..6560572 100644
--- a/lib/pages/components/Navbar.mlx
+++ b/lib/pages/components/Navbar.mlx
@@ -15,7 +15,7 @@ let[@react.component] make () =
         <img className="w-[60px]" src="https://s3.spandrell.ch/assets/icons/tianming.svg"
         />
       </Link>
-      <nav className="flex items-center space-x-6 text-sm font-medium">
+      <nav className="flex w-4 items-center space-x-6 text-sm font-medium">
         <Link href="/blog">(rs "BLOG")</Link>
         <Link href="/chat">(rs "CHAT")</Link>
         <Link href="/board">(rs "BOARD")</Link>