From 90e53d08de608c92bc1c6d3ee0bdfa136ae3d2a3 Mon Sep 17 00:00:00 2001 From: Jonni Liljamo Date: Thu, 20 Feb 2025 19:22:16 +0200 Subject: [PATCH] feat: update to tailwindcss 4 --- css/style.css | 145 +++++++++++++++++++++++++++++++++++- flake.lock | 6 +- flake.nix | 7 +- tailwind.config.js | 93 ----------------------- templates/layouts/base.html | 2 +- templates/project.html | 2 +- 6 files changed, 149 insertions(+), 106 deletions(-) delete mode 100644 tailwind.config.js diff --git a/css/style.css b/css/style.css index b5c61c9..5c66a9c 100644 --- a/css/style.css +++ b/css/style.css @@ -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); + } +} diff --git a/flake.lock b/flake.lock index fb6c232..c3b11e5 100644 --- a/flake.lock +++ b/flake.lock @@ -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": { diff --git a/flake.nix b/flake.nix index 3cdee32..6eb6fc8 100644 --- a/flake.nix +++ b/flake.nix @@ -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 { diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 42e2dd7..0000000 --- a/tailwind.config.js +++ /dev/null @@ -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") - ], -} diff --git a/templates/layouts/base.html b/templates/layouts/base.html index 74d9d3a..a0ee0a7 100644 --- a/templates/layouts/base.html +++ b/templates/layouts/base.html @@ -32,7 +32,7 @@
{{ config.title }} diff --git a/templates/project.html b/templates/project.html index 47dbe56..d8e66de 100644 --- a/templates/project.html +++ b/templates/project.html @@ -20,7 +20,7 @@ {% endif %}
{% if section.pages %} -
+

{{ section.extra.logs_visual }}

{% if section.generate_feeds %} RSS Feed -- 2.44.1