6 files changed, 149 insertions(+), 106 deletions(-)

M css/style.css
M flake.lock
M flake.nix
D tailwind.config.js
M templates/layouts/base.html
M templates/project.html

@@ 1,3 1,142 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+
+@theme {
+  --font-*: initial;
+  --font-sans: DejaVu, sans-serif;
+  --font-serif: DejaVu, serif;
+  --font-mono: DejaVu, monospace;
+
+  --color-*: initial;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+
+  --color-text-50: hsl(200, 60%, 95%);
+  --color-text-100: hsl(199, 61%, 90%);
+  --color-text-200: hsl(200, 61%, 80%);
+  --color-text-300: hsl(200, 59%, 70%);
+  --color-text-400: hsl(200, 60%, 60%);
+  --color-text-500: hsl(200, 60%, 50%);
+  --color-text-600: hsl(200, 60%, 40%);
+  --color-text-700: hsl(200, 59%, 30%);
+  --color-text-800: hsl(200, 61%, 20%);
+  --color-text-900: hsl(199, 61%, 10%);
+  --color-text-950: hsl(200, 60%, 5%);
+  --color-text-orig: hsl(200, 60%, 1%);
+
+  --color-background-50: hsl(195, 62%, 95%);
+  --color-background-100: hsl(196, 65%, 90%);
+  --color-background-200: hsl(197, 65%, 80%);
+  --color-background-300: hsl(197, 63%, 70%);
+  --color-background-400: hsl(197, 64%, 60%);
+  --color-background-500: hsl(197, 64%, 50%);
+  --color-background-600: hsl(197, 64%, 40%);
+  --color-background-700: hsl(197, 63%, 30%);
+  --color-background-800: hsl(197, 65%, 20%);
+  --color-background-900: hsl(196, 65%, 10%);
+  --color-background-950: hsl(199, 62%, 5%);
+  --color-background-orig: hsl(197, 64%, 98%);
+
+  --color-primary-50: hsl(198, 38%, 95%);
+  --color-primary-100: hsl(200, 41%, 90%);
+  --color-primary-200: hsl(201, 41%, 80%);
+  --color-primary-300: hsl(201, 41%, 70%);
+  --color-primary-400: hsl(201, 41%, 60%);
+  --color-primary-500: hsl(201, 41%, 50%);
+  --color-primary-600: hsl(201, 41%, 40%);
+  --color-primary-700: hsl(201, 41%, 30%);
+  --color-primary-800: hsl(201, 41%, 20%);
+  --color-primary-900: hsl(200, 41%, 10%);
+  --color-primary-950: hsl(204, 38%, 5%);
+  --color-primary-orig: hsl(201, 41%, 69%);
+
+  --color-secondary-50: hsl(201, 68%, 95%);
+  --color-secondary-100: hsl(201, 69%, 90%);
+  --color-secondary-200: hsl(200, 67%, 80%);
+  --color-secondary-300: hsl(200, 67%, 70%);
+  --color-secondary-400: hsl(200, 67%, 60%);
+  --color-secondary-500: hsl(200, 67%, 50%);
+  --color-secondary-600: hsl(200, 67%, 40%);
+  --color-secondary-700: hsl(200, 67%, 30%);
+  --color-secondary-800: hsl(200, 67%, 20%);
+  --color-secondary-900: hsl(201, 69%, 10%);
+  --color-secondary-950: hsl(198, 68%, 5%);
+  --color-secondary-orig: hsl(200, 67%, 87%);
+
+  --color-accent-50: hsl(204, 20%, 95%);
+  --color-accent-100: hsl(200, 18%, 90%);
+  --color-accent-200: hsl(201, 20%, 80%);
+  --color-accent-300: hsl(201, 19%, 70%);
+  --color-accent-400: hsl(201, 19%, 60%);
+  --color-accent-500: hsl(201, 19%, 50%);
+  --color-accent-600: hsl(201, 19%, 40%);
+  --color-accent-700: hsl(201, 19%, 30%);
+  --color-accent-800: hsl(201, 20%, 20%);
+  --color-accent-900: hsl(200, 18%, 10%);
+  --color-accent-950: hsl(204, 20%, 5%);
+  --color-accent-orig: hsl(201, 19%, 40%);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

@@ 2,11 2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1727777050,
-        "narHash": "sha256-5jw7zwOcWOpxTO6NCzmFZfq0klNGA+ktw+Yb3n35eUQ=",
+        "lastModified": 1739863612,
+        "narHash": "sha256-UbtgxplOhFcyjBcNbTVO8+HUHAl/WXFDOb6LvqShiZo=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "d78d09350ac7dfe503cf48cbc59764aef4157b9a",
+        "rev": "632f04521e847173c54fa72973ec6c39a371211c",
         "type": "github"
       },
       "original": {

@@ 5,15 5,12 @@
     let
       pkgs = nixpkgs.legacyPackages.x86_64-linux.pkgs;
 
-      # https://github.com/NixOS/nixpkgs/blob/340a3345a23ad684a8c328eecc20bb0437e6954d/pkgs/development/haskell-modules/configuration-nix.nix#L1311
-        tailwind = pkgs.nodePackages.tailwindcss.overrideAttrs
-          (o: { plugins = [ pkgs.nodePackages."@tailwindcss/typography" ]; });
-
       buildInputs = with pkgs; [
         just
 
         zola
-      ] ++ [ tailwind ];
+        tailwindcss_4
+      ];
     in
     {
       packages.x86_64-linux.default = pkgs.stdenv.mkDerivation {

@@ 1,93 0,0 @@
-/** @type {import('tailwindcss').Config} */
-const colors = require('tailwindcss/colors')
-
-module.exports = {
-  content: ["./templates/**/*.html", "./content/**/*.md"],
-  theme: {
-    fontFamily: {
-      "sans": ["DejaVu", "sans-serif"],
-      "serif": ["DejaVu", "serif"],
-      "mono": ["DejaVu", "monospace"],
-    },
-    colors: {
-      /* https://tailwindcss.com/docs/customizing-colors#disabling-a-default-color */
-      'amber': colors.amber,
-      'emerald': colors.emerald,
-      'orange': colors.orange,
-      'sky': colors.sky,
-      'text': {
-        orig: 'hsl(200, 60%, 1%)',
-        50: 'hsl(200, 60%, 95%)',
-        100: 'hsl(199, 61%, 90%)',
-        200: 'hsl(200, 61%, 80%)',
-        300: 'hsl(200, 59%, 70%)',
-        400: 'hsl(200, 60%, 60%)',
-        500: 'hsl(200, 60%, 50%)',
-        600: 'hsl(200, 60%, 40%)',
-        700: 'hsl(200, 59%, 30%)',
-        800: 'hsl(200, 61%, 20%)',
-        900: 'hsl(199, 61%, 10%)',
-        950: 'hsl(200, 60%, 5%)',
-      },
-      'background': {
-        orig: 'hsl(197, 64%, 98%)',
-        50: 'hsl(195, 62%, 95%)',
-        100: 'hsl(196, 65%, 90%)',
-        200: 'hsl(197, 65%, 80%)',
-        300: 'hsl(197, 63%, 70%)',
-        400: 'hsl(197, 64%, 60%)',
-        500: 'hsl(197, 64%, 50%)',
-        600: 'hsl(197, 64%, 40%)',
-        700: 'hsl(197, 63%, 30%)',
-        800: 'hsl(197, 65%, 20%)',
-        900: 'hsl(196, 65%, 10%)',
-        950: 'hsl(199, 62%, 5%)',
-      },
-      'primary': {
-        orig: 'hsl(201, 41%, 69%)',
-        50: 'hsl(198, 38%, 95%)',
-        100: 'hsl(200, 41%, 90%)',
-        200: 'hsl(201, 41%, 80%)',
-        300: 'hsl(201, 41%, 70%)',
-        400: 'hsl(201, 41%, 60%)',
-        500: 'hsl(201, 41%, 50%)',
-        600: 'hsl(201, 41%, 40%)',
-        700: 'hsl(201, 41%, 30%)',
-        800: 'hsl(201, 41%, 20%)',
-        900: 'hsl(200, 41%, 10%)',
-        950: 'hsl(204, 38%, 5%)',
-      },
-      'secondary': {
-        orig: 'hsl(200, 67%, 87%)',
-        50: 'hsl(201, 68%, 95%)',
-        100: 'hsl(201, 69%, 90%)',
-        200: 'hsl(200, 67%, 80%)',
-        300: 'hsl(200, 67%, 70%)',
-        400: 'hsl(200, 67%, 60%)',
-        500: 'hsl(200, 67%, 50%)',
-        600: 'hsl(200, 67%, 40%)',
-        700: 'hsl(200, 67%, 30%)',
-        800: 'hsl(200, 67%, 20%)',
-        900: 'hsl(201, 69%, 10%)',
-        950: 'hsl(198, 68%, 5%)',
-      },
-      'accent': {
-        orig: 'hsl(201, 19%, 40%)',
-        50: 'hsl(204, 20%, 95%)',
-        100: 'hsl(200, 18%, 90%)',
-        200: 'hsl(201, 20%, 80%)',
-        300: 'hsl(201, 19%, 70%)',
-        400: 'hsl(201, 19%, 60%)',
-        500: 'hsl(201, 19%, 50%)',
-        600: 'hsl(201, 19%, 40%)',
-        700: 'hsl(201, 19%, 30%)',
-        800: 'hsl(201, 20%, 20%)',
-        900: 'hsl(200, 18%, 10%)',
-        950: 'hsl(204, 20%, 5%)',
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/typography")
-  ],
-}

@@ 32,7 32,7 @@
                     <div class="w-full h-full pointer-events-auto
                         p-3 rounded-xl
                         border border-text-100  drop-shadow-md
-                        backdrop-blur-sm"
+                        backdrop-blur-xs"
                     >
                         <div class="flex gap-1">
                             <a data-umami-event="breadcrumbs-root" class="hover:underline" href="/">{{ config.title }}</a>

@@ 20,7 20,7 @@
         {% endif %}
     </div>
     {% if section.pages %}
-    <div class="flex flex-col items-center p-2 border border-text-100 rounded-xl drop-shadow-sm">
+    <div class="flex flex-col items-center p-2 border border-text-100 rounded-xl drop-shadow-xs">
         <p class="text-lg">{{ section.extra.logs_visual }}</p>
         {% if section.generate_feeds %}
         <a data-umami-event="project-{{ section.extra.id }}-feed" class="hover:underline" href="{{ section.path }}atom.xml">RSS Feed</a>