move to tailwind

astro.config.mjs

···
 import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 
+import tailwindcss from "@tailwindcss/vite";
+
 // https://astro.build/config
 export default defineConfig({
-	site: "https://www.vixalien.com",
-	integrations: [sitemap()],
-	redirects: {
-		"/posts": "/",
-		"/feed": "/rss.xml",
+  site: "https://www.vixalien.com",
+  integrations: [sitemap()],
+
+  redirects: {
+      "/posts": "/",
+      "/feed": "/rss.xml",
 	},
-});
+
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});

deno.lock

···
   "specifiers": {
     "npm:@astrojs/rss@^4.0.12": "4.0.12",
     "npm:@astrojs/sitemap@^3.4.1": "3.4.1",
-    "npm:astro@^5.9.3": "5.9.3_vite@6.3.5__picomatch@4.0.2_zod@3.25.64"
+    "npm:@tailwindcss/vite@^4.1.11": "4.1.11_vite@6.3.5__picomatch@4.0.2",
+    "npm:astro@^5.9.3": "5.9.3_vite@6.3.5__picomatch@4.0.2_zod@3.25.64",
+    "npm:tailwindcss@^4.1.11": "4.1.11"
   },
   "npm": {
+    "@ampproject/remapping@2.3.0": {
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dependencies": [
+        "@jridgewell/gen-mapping",
+        "@jridgewell/trace-mapping"
+      ]
+    },
     "@astrojs/compiler@2.12.2": {
       "integrity": "sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw=="
     },
···
         "fontkit"
       ]
     },
+    "@emnapi/core@1.4.4": {
+      "integrity": "sha512-A9CnAbC6ARNMKcIcrQwq6HeHCjpcBZ5wSx4U01WXCqEKlrzB9F9315WDNHkrs2xbx7YjjSxbUYxuN6EQzpcY2g==",
+      "dependencies": [
+        "@emnapi/wasi-threads",
+        "tslib"
+      ]
+    },
     "@emnapi/runtime@1.4.3": {
       "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
+    "@emnapi/wasi-threads@1.0.3": {
+      "integrity": "sha512-8K5IFFsQqF9wQNJptGbS6FNKgUTsSRYnTqNCG1vPP8jFdjSv18n2mQfJpkt2Oibo9iBEzcDnDxNwKTzC7svlJw==",
       "dependencies": [
         "tslib"
       ]
···
       "os": ["win32"],
       "cpu": ["x64"]
     },
+    "@isaacs/fs-minipass@4.0.1": {
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dependencies": [
+        "minipass"
+      ]
+    },
+    "@jridgewell/gen-mapping@0.3.12": {
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "dependencies": [
+        "@jridgewell/sourcemap-codec",
+        "@jridgewell/trace-mapping"
+      ]
+    },
+    "@jridgewell/resolve-uri@3.1.2": {
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="
+    },
     "@jridgewell/sourcemap-codec@1.5.0": {
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+    },
+    "@jridgewell/trace-mapping@0.3.29": {
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "dependencies": [
+        "@jridgewell/resolve-uri",
+        "@jridgewell/sourcemap-codec"
+      ]
+    },
+    "@napi-rs/wasm-runtime@0.2.12": {
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dependencies": [
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util@0.10.0"
+      ]
     },
     "@oslojs/encoding@1.1.0": {
       "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="
···
         "tslib"
       ]
     },
+    "@tailwindcss/node@4.1.11": {
+      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+      "dependencies": [
+        "@ampproject/remapping",
+        "enhanced-resolve",
+        "jiti",
+        "lightningcss",
+        "magic-string",
+        "source-map-js",
+        "tailwindcss"
+      ]
+    },
+    "@tailwindcss/oxide-android-arm64@4.1.11": {
+      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@tailwindcss/oxide-darwin-arm64@4.1.11": {
+      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@tailwindcss/oxide-darwin-x64@4.1.11": {
+      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@tailwindcss/oxide-freebsd-x64@4.1.11": {
+      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11": {
+      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@tailwindcss/oxide-linux-arm64-gnu@4.1.11": {
+      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@tailwindcss/oxide-linux-arm64-musl@4.1.11": {
+      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@tailwindcss/oxide-linux-x64-gnu@4.1.11": {
+      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@tailwindcss/oxide-linux-x64-musl@4.1.11": {
+      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@tailwindcss/oxide-wasm32-wasi@4.1.11": {
+      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
+      "dependencies": [
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@emnapi/wasi-threads",
+        "@napi-rs/wasm-runtime",
+        "@tybys/wasm-util@0.9.0",
+        "tslib"
+      ],
+      "cpu": ["wasm32"]
+    },
+    "@tailwindcss/oxide-win32-arm64-msvc@4.1.11": {
+      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@tailwindcss/oxide-win32-x64-msvc@4.1.11": {
+      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@tailwindcss/oxide@4.1.11": {
+      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+      "dependencies": [
+        "detect-libc",
+        "tar"
+      ],
+      "optionalDependencies": [
+        "@tailwindcss/oxide-android-arm64",
+        "@tailwindcss/oxide-darwin-arm64",
+        "@tailwindcss/oxide-darwin-x64",
+        "@tailwindcss/oxide-freebsd-x64",
+        "@tailwindcss/oxide-linux-arm-gnueabihf",
+        "@tailwindcss/oxide-linux-arm64-gnu",
+        "@tailwindcss/oxide-linux-arm64-musl",
+        "@tailwindcss/oxide-linux-x64-gnu",
+        "@tailwindcss/oxide-linux-x64-musl",
+        "@tailwindcss/oxide-wasm32-wasi",
+        "@tailwindcss/oxide-win32-arm64-msvc",
+        "@tailwindcss/oxide-win32-x64-msvc"
+      ],
+      "scripts": true
+    },
+    "@tailwindcss/vite@4.1.11_vite@6.3.5__picomatch@4.0.2": {
+      "integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
+      "dependencies": [
+        "@tailwindcss/node",
+        "@tailwindcss/oxide",
+        "tailwindcss",
+        "vite"
+      ]
+    },
+    "@tybys/wasm-util@0.10.0": {
+      "integrity": "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
+    "@tybys/wasm-util@0.9.0": {
+      "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
     "@types/debug@4.1.12": {
       "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
       "dependencies": [
···
         "readdirp"
       ]
     },
+    "chownr@3.0.0": {
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="
+    },
     "ci-info@4.2.0": {
       "integrity": "sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg=="
     },
···
     "emoji-regex@8.0.0": {
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
+    "enhanced-resolve@5.18.2": {
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+      "dependencies": [
+        "graceful-fs",
+        "tapable"
+      ]
+    },
     "entities@6.0.1": {
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="
     },
···
     "github-slugger@2.0.0": {
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
     },
+    "graceful-fs@4.2.11": {
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
     "h3@1.15.3": {
       "integrity": "sha512-z6GknHqyX0h9aQaTx22VZDf6QyZn+0Nh+Ym8O/u0SGSkyF5cuTJYKlc8MkzW3Nzf9LE1ivcpmYC3FUGpywhuUQ==",
       "dependencies": [
···
         "is-inside-container"
       ]
     },
+    "jiti@2.4.2": {
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "bin": true
+    },
     "js-yaml@4.1.0": {
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dependencies": [
···
     "kleur@4.1.5": {
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
     },
+    "lightningcss-darwin-arm64@1.30.1": {
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-darwin-x64@1.30.1": {
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-freebsd-x64@1.30.1": {
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-linux-arm-gnueabihf@1.30.1": {
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "lightningcss-linux-arm64-gnu@1.30.1": {
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-linux-arm64-musl@1.30.1": {
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-linux-x64-gnu@1.30.1": {
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-linux-x64-musl@1.30.1": {
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-win32-arm64-msvc@1.30.1": {
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-win32-x64-msvc@1.30.1": {
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "lightningcss@1.30.1": {
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dependencies": [
+        "detect-libc"
+      ],
+      "optionalDependencies": [
+        "lightningcss-darwin-arm64",
+        "lightningcss-darwin-x64",
+        "lightningcss-freebsd-x64",
+        "lightningcss-linux-arm-gnueabihf",
+        "lightningcss-linux-arm64-gnu",
+        "lightningcss-linux-arm64-musl",
+        "lightningcss-linux-x64-gnu",
+        "lightningcss-linux-x64-musl",
+        "lightningcss-win32-arm64-msvc",
+        "lightningcss-win32-x64-msvc"
+      ]
+    },
     "longest-streak@3.1.0": {
       "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="
     },
···
         "micromark-util-types"
       ]
     },
+    "minipass@7.1.2": {
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="
+    },
+    "minizlib@3.0.2": {
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dependencies": [
+        "minipass"
+      ]
+    },
+    "mkdirp@3.0.1": {
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "bin": true
+    },
     "mrmime@2.0.1": {
       "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="
     },
···
     "strnum@2.1.1": {
       "integrity": "sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw=="
     },
+    "tailwindcss@4.1.11": {
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA=="
+    },
+    "tapable@2.2.2": {
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="
+    },
+    "tar@7.4.3": {
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dependencies": [
+        "@isaacs/fs-minipass",
+        "chownr",
+        "minipass",
+        "minizlib",
+        "mkdirp",
+        "yallist"
+      ]
+    },
     "tiny-inflate@1.0.3": {
       "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
     },
···
     "xxhash-wasm@1.1.0": {
       "integrity": "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA=="
     },
+    "yallist@5.0.0": {
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="
+    },
     "yargs-parser@21.1.1": {
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
     },
···
       "dependencies": [
         "npm:@astrojs/rss@^4.0.12",
         "npm:@astrojs/sitemap@^3.4.1",
-        "npm:astro@^5.9.3"
+        "npm:@tailwindcss/vite@^4.1.11",
+        "npm:astro@^5.9.3",
+        "npm:tailwindcss@^4.1.11"
       ]
     }
   }

package.json

···
   "dependencies": {
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.4.1",
-    "astro": "^5.9.3"
+    "@tailwindcss/vite": "^4.1.11",
+    "astro": "^5.9.3",
+    "tailwindcss": "^4.1.11"
   }
 }

src/components/ContactLinks.astro

···
     links.map((link) => {
       return (
         <li>
-          <a href={link.url} class="link-with-icon" rel={link.rel}>
+          <a
+            href={link.url}
+            class="inline-flex gap-1 items-center align-text-top"
+            rel={link.rel}
+          >
             <IconSelector link={link.url} />
             <span>{link.title}</span>
           </a>
···
     })
   }
   <li>
-    <a href="/rss.xml" title="Atom Feed" class="link-with-icon">
+    <a
+      href="/rss.xml"
+      title="Atom Feed"
+      class="inline-flex gap-1 items-center align-text-top"
+    >
       <IconRssFeed />
       <span>RSS</span>
     </a>

src/components/Header.astro

···
 ---
 export interface Props {
-	title?: string;
+  title?: string;
+  href?: string;
 }
+
+const { title = "Home", href = "/" } = Astro.props;
 ---
 
 <header>
-	<nav>
-		<a href="/">&larr; {Astro.props.title || "Home"}</a>
-	</nav>
+  <nav>
+    <a href={href}>&larr; {title}</a>
+  </nav>
 </header>

src/components/ImageContainer.astro

···
----
-export interface Props {
-  image: string;
-  invert: boolean;
-}
-
-const { invert, image } = Astro.props;
----
-
-<div class={`image-container` + (invert ? " invert" : "")}>
-  <div class="inner-container container">
-    <div class="top">
-      <slot name="top" />
-    </div>
-    <picture>
-      <img src={image} aria-hidden alt="Banner Image for post" />
-    </picture>
-    <div class="bottom" id="main">
-      <slot name="bottom" />
-      <div class="stack">
-        <p>
-          <a href="#main" class="read-link">&darr; Read</a>
-        </p>
-        <hr />
-      </div>
-    </div>
-  </div>
-</div>

src/components/Intro.astro

···
 const { title, created, author, dateFormat } = Astro.props;
 ---
 
-<div class="intro">
+<div class="mt-12 mb-5">
   {
     created ? (
       <>
···
       </>
     ) : null
   }
-  <h1>{title}</h1>
+  <h1 class="text-4xl font-bold">{title}</h1>
 </div>

src/components/MainContainer.astro

···
+<main class="max-w-2xl mx-auto px-5 py-8">
+  <slot />
+</main>

src/components/PostsIndex.astro

···
       return (
         <>
           <h3>{year}</h3>
-          {posts.map(
-            ({
-              id,
-              data: {
-                title,
-                description: snippet,
-                publish_date,
-                hero_image,
-                // tags,
-              },
-            }) => (
-              <a class="post" href={`/blog/${id}`}>
-                {hero_image ? (
-                  <img class="post-image" src={hero_image} alt={title} />
-                ) : null}
-                <h3 class="post-title">
-                  <span>{title}</span> <span class="post-arrow">&rarr;</span>
-                </h3>
-                <br />
-                <small class="intro-meta">
-                  {/* {author && <span>{author || ""} at </span>} */}
-                  <PrettyDate date={publish_date ?? new Date()} />
-                </small>
-                <br />
-                <span>{snippet}</span>
-                <br />
-                {/* <Tags tags={tags} /> */}
-              </a>
-            ),
-          )}
+          <ul>
+            {posts.map(
+              ({
+                id,
+                data: {
+                  title,
+                  description: snippet,
+                  publish_date,
+                  hero_image,
+                  // tags,
+                },
+              }) => (
+                <li>
+                  <div class="flex gap-2 items-center">
+                    <a href={`/blog/${id}`} class="leading-tight inline-block">
+                      {title}
+                    </a>
+                    <div class="border-b border-dashed self-center flex-1" />
+                    <PrettyDate date={publish_date ?? new Date()} />
+                  </div>
+                  <p>{snippet}</p>
+                </li>
+              ),
+            )}
+          </ul>
         </>
       );
     })
   }
 </div>
-
-<style>
-  .post {
-    --padding: 12px;
-    --link: var(--fg);
-    --link-bg: #abd5ff;
-    --link-bg-hover: #7ebfff;
-
-    background-color: var(--link-bg);
-    border-radius: 12px;
-    padding: var(--padding);
-    margin-inline: calc(-1 * var(--padding));
-    display: block;
-    margin-bottom: 2em;
-    border-bottom: none;
-    transition: 0.3s background-color;
-  }
-
-  @media screen and (prefers-color-scheme: dark) {
-    .post {
-      --link-bg: #153e68;
-      --link-bg-hover: #2c6fb8;
-      --fg: white;
-    }
-  }
-
-  .post:hover {
-    background-color: var(--link-bg-hover);
-  }
-
-  .post-arrow {
-    display: inline-block;
-    transition: 0.3s translate;
-  }
-
-  .post:hover .post-arrow,
-  .post:focus .post-arrow {
-    translate: 10px;
-  }
-
-  .post .post-title {
-    font-size: 1.1em;
-    font-weight: 900;
-    border-bottom-width: 2px;
-    margin: 0;
-    color: inherit;
-  }
-
-  .post a.post-image {
-    border-bottom: none;
-  }
-
-  .post .post-image {
-    width: 100%;
-    aspect-ratio: 16/9;
-    overflow: hidden;
-    object-fit: cover;
-    border-radius: 6px;
-    margin-bottom: 0.5em;
-  }
-</style>

src/components/ProjectsIndex.astro

···
 type Project = CollectionEntry<"portfolio">;
 ---
 
-<div class="projects">
+<div class="grid lg:grid-cols-2 lg:-mx-20 gap-4 mb-5">
   {
     projects.map(
-      ({
-        id,
-        data: {
-          title,
-          description,
-          hero_image,
-          bg_color,
-          link
-        },
-      }) => (
+      ({ data: { title, description, hero_image, bg_color, link } }) => (
         <a
-          class="project"
+          class="border-0 rounded-lg hover:saturate-50 transition text-bg flex flex-col items-center"
           href={link}
           style={bg_color ? { "background-color": bg_color } : null}
           target="_blank"
···
           {hero_image ? (
             <img class="project-image" src={hero_image} alt={title} />
           ) : null}
-          <h3 class="project-title">
-            <span>{title}</span> <span class="project-arrow">&rarr;</span>
-          </h3>
-          <span>{description}</span>
-          <br />
+          <div class="p-4 pt-0 flex flex-col items-center">
+            <h3 class="text-inherit mb-1">
+              <span>{title}</span>
+            </h3>
+            <span>{description}</span>
+          </div>
         </a>
       ),
     )
   }
 </div>
-
-<style>
-  .project {
-    --padding: 12px;
-    --link: var(--fg);
-    --link-bg: #abd5ff;
-    --link-bg-hover: #7ebfff;
-
-    background-color: var(--link-bg);
-    border-radius: 12px;
-    padding: var(--padding);
-    margin-inline: calc(-1 * var(--padding));
-    margin-bottom: 2em;
-    border-bottom: none;
-    transition: 0.3s background-color;
-    text-align: center;
-    min-height: 200px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 1rem;
-  }
-
-  @media screen and (prefers-color-scheme: dark) {
-    .project {
-      --link-bg: #153e68;
-      --link-bg-hover: #2c6fb8;
-      --fg: white;
-    }
-  }
-
-  .project:hover {
-    background-color: var(--link-bg-hover);
-  }
-
-  .project-arrow {
-    display: inline-block;
-    transition: 0.3s translate;
-  }
-
-  .project:hover .project-arrow,
-  .project:focus .project-arrow {
-    translate: 10px;
-  }
-
-  .project .project-title {
-    font-size: 1.25em;
-    font-weight: 900;
-    border-bottom-width: 2px;
-    margin: 0;
-    color: inherit;
-  }
-
-  .project a.project-image {
-    border-bottom: none;
-  }
-
-  .project .project-image {
-    width: 100%;
-    border-radius: 6px;
-  }
-</style>

src/layouts/BlogPost.astro

···
 
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
-import ImageContainer from "../components/ImageContainer.astro";
 import PostInfo from "../components/PostInfo.astro";
 import { AUTHOR, PUBLISH_YEAR, SITE_TITLE } from "../consts";
+import MainContainer from "../components/MainContainer.astro";
 
 type Props = CollectionEntry<"blog">["data"];
 
···
     <meta name="fediverse:creator" content="@[e-mail]" />
   </head>
 
-  <body class="overflow-yes">
-    {
-      hero_image && (
-        <ImageContainer image={hero_image} invert={false}>
-          <Fragment slot="top">
-            <Header title={SITE_TITLE} />
-          </Fragment>
-          <Fragment slot="bottom">
-            <PostInfo
-              title={title}
-              description={description}
-              publish_date={publish_date}
-              tags={tags}
-            />
-          </Fragment>
-        </ImageContainer>
-      )
-    }
-    <main class="container">
+  <body>
+    <MainContainer>
+      <Header title="vixalien´s blog" href="/blog" />
+      <PostInfo
+        title={title}
+        description={description}
+        publish_date={publish_date}
+        tags={tags}
+      />
       {
-        !hero_image && (
-          <>
-            <Header title={SITE_TITLE} />
-            <PostInfo
-              title={title}
-              description={description}
-              publish_date={publish_date}
-              tags={tags}
-            />
-            <hr />
-            <br />
-          </>
+        hero_image ? (
+          <img
+            class="rounded-lg"
+            src={hero_image}
+            alt="Banner Image for post"
+          />
+        ) : (
+          <hr />
         )
       }
+      <br />
       <article>
         <slot />
       </article>
+      <br />
       <hr />
       <br />
       <span>
···
           )
         }
       </span>
-    </main>
+    </MainContainer>
   </body>
 </html>

src/pages/404.astro

···
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import Intro from "../components/Intro.astro";
 import Header from "../components/Header.astro";
+import MainContainer from "../components/MainContainer.astro";
 ---
 
 <!doctype html>
···
     />
   </head>
   <body>
-    <main class="container">
+    <MainContainer>
       <Header title={SITE_TITLE} />
       <Intro title="404 - page not found" />
       <p>You're lost, but aren't we all? :)</p>
-    </main>
+    </MainContainer>
   </body>
 </html>

src/pages/blog.astro

···
 import PostsIndex from "../components/PostsIndex.astro";
 import ContactLinks from "../components/ContactLinks.astro";
 import Header from "../components/Header.astro";
+import MainContainer from "../components/MainContainer.astro";
 ---
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<BaseHead title={`vixalien´s blog`} description={SITE_DESCRIPTION} />
-	</head>
-	<body>
-		<main class="container">
-			<Header title={SITE_TITLE} />
-			<Intro title={`vixalien´s blog`} />
-			<p> An archive of all my blog posts. </p>
-			<h2>Posts</h2>
-			<PostsIndex />
+  <head>
+    <BaseHead title={`vixalien´s blog`} description={SITE_DESCRIPTION} />
+  </head>
+  <body>
+    <MainContainer>
+      <Header title={SITE_TITLE} />
+      <Intro title={`vixalien´s blog`} />
+      <p>An archive of all my blog posts.</p>
+      <h2>Posts</h2>
+      <PostsIndex />
 
-			<footer>
-				<a class="top" href="#top">↑ Scroll to Top</a>
-				{
-					(
-						<div>
-							<br />
-							<span>
-								&copy; {AUTHOR} {PUBLISH_YEAR}
-							</span>
-						</div>
-					)
-				}
-			</footer>
-		</main>
-	</body>
+      <footer>
+        <a class="top" href="#top">↑ Scroll to Top</a>
+        {
+          (
+            <div>
+              <br />
+              <span>
+                &copy; {AUTHOR} {PUBLISH_YEAR}
+              </span>
+            </div>
+          )
+        }
+      </footer>
+    </MainContainer>
+  </body>
 </html>

src/pages/index.astro

···
 import { SITE_TITLE, SITE_DESCRIPTION, AUTHOR } from "../consts";
 import Intro from "../components/Intro.astro";
 import ContactLinks from "../components/ContactLinks.astro";
+import MainContainer from "../components/MainContainer.astro";
 ---
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-	</head>
-	<body>
-		<main class="container">
-			<header>
-				<nav>
-					<a href="/blog">blog</a>
-					<a href="/portfolio">portfolio</a>
-					<a href="https://memories.vixalien.com" target="_blank">memories &#8599;</a>
-				</nav>
-			</header>
-			<Intro title={SITE_TITLE} />
-			<p>
-				Hello! I'm Angelo Verlain, but you can call me <i>vixalien</i>. I am a
-				web and GTK developer and this is my website, a collection of projects
-				and writings.
-			</p>
-			<p>
-				You'll mostly find me working on open-source projects, particularly
-				involved with the GNOME Project, Alpine Linux and others.
-			</p>
-			<p>
-				You can read about what I do by reading a few of my regular <a
-					href="/blog">blog posts</a
-				>, or see a list of projects I've worked on in the past by visiting my <a
-					href="/portfolio">portfolio</a
-				>.
-			</p>
-			<p>
-				Also keep an eye on <a href="https://karabo.io">Karabo</a>, which is an
-				upcoming start-up I'm working on to help improve organisational
-				procedures in the region.
-			</p>
-			<h2 id="contact">Contact & Links</h2>
-			<ContactLinks />
-			<footer>
-				&copy; {AUTHOR}
-				{new Date().getFullYear()}
-			</footer>
-		</main>
-	</body>
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <body>
+    <MainContainer>
+      <header>
+        <nav>
+          <ul
+            class="flex-row list-none pl-0 gap-8 *:*:text-fg *:*:hover:text-link *:*:border-b"
+          >
+            <li><a href="/blog">blog</a></li>
+            <li><a href="/portfolio">portfolio</a></li>
+            <li>
+              <a href="https://memories.vixalien.com" target="_blank"
+                >memories &#8599;</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </header>
+      <Intro title={SITE_TITLE} />
+      <p>
+        Hello! I'm Angelo Verlain, but you can call me <i>vixalien</i>. I am a
+        web and GTK developer and this is my website, a collection of projects
+        and writings.
+      </p>
+      <p>
+        You'll mostly find me working on open-source projects, particularly
+        involved with the GNOME Project, Alpine Linux and others.
+      </p>
+      <p>
+        You can read about what I do by reading a few of my regular <a
+          href="/blog">blog posts</a
+        >, or see a list of projects I've worked on in the past by visiting my <a
+          href="/portfolio">portfolio</a
+        >.
+      </p>
+      <p>
+        Also keep an eye on <a href="https://karabo.io">Karabo</a>, which is an
+        upcoming start-up I'm working on to help improve organisational
+        procedures in the region.
+      </p>
+      <h2 id="contact">Contact & Links</h2>
+      <ContactLinks />
+      <footer>
+        &copy; {AUTHOR}
+        {new Date().getFullYear()}
+      </footer>
+    </MainContainer>
+  </body>
 </html>
-
-<style>
-	.heading {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	nav {
-		padding: 0;
-		display: flex;
-		gap: 2rem;
-		list-style-type: none;
-		margin: 0;
-	}
-
-	/* nav ul li {
-		margin: 0;
-		line-height: 1;
-	} */
-
-	nav a {
-		border-bottom: 1px solid;
-		display: inline-block;
-	}
-
-	nav a:hover {
-		color: var(--heading-fg);
-	}
-</style>

src/pages/portfolio.astro

···
 import Intro from "../components/Intro.astro";
 import Header from "../components/Header.astro";
 import ProjectsIndex from "../components/ProjectsIndex.astro";
+import MainContainer from "../components/MainContainer.astro";
 ---
 
 <!doctype html>
···
     <BaseHead title={`vixalien´s portfolio`} description={SITE_DESCRIPTION} />
   </head>
   <body>
-    <main class="container">
+    <MainContainer>
       <Header title={SITE_TITLE} />
       <Intro title={`vixalien´s portfolio`} />
       <p>Personal projects I've worked on in the past.</p>
···
           )
         }
       </footer>
-    </main>
+    </MainContainer>
   </body>
 </html>

src/styles/global.css

···
-html {
-	--secondary: #666;
-	--fg: #333;
-	--bg: #fff;
-	--heading-fg: #000;
-	--link: #0169ec;
-	color-scheme: light dark;
-}
+@import "tailwindcss";
 
-@media (prefers-color-scheme: dark) {
-	html {
-		--secondary: #8e8e8e;
-		--fg: #a0a0a0;
-		--bg: #030f1b;
-		--heading-fg: #fff;
-		--link: #5a99ff;
-	}
-}
+@theme {
+  --font-sans: "Atkinson Hyperlegible";
 
-ol, ul, menu {
-	list-style: initial;
+  --color-fg: #333;
+  --color-bg: #fff;
+  --color-heading: #000;
+  --color-link: #0169ec;
 }
 
-:root {
-	/* Paddings */
-	--padding-top: 30px;
-	--padding-bottom: 30px;
-	--padding-right: 20px;
-	--padding-left: 20px;
-	--max-width: 620px;
-	/* Box shadow */
-	--box-shadow: 0 0 0px 3px #bac7d4;
-}
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
 
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
+  body {
+    @apply text-fg;
+  }
 
-html {
-	font-family:
-		system-ui,
-		/* macOS 10.11-10.12 */ -apple-system,
-		/* Windows 6+ */ "Segoe UI",
-		/* Android 4+ */ "Roboto",
-		/* Ubuntu 10.10+ */ "Ubuntu",
-		/* Gnome 3+ */ "Cantarell",
-		/* KDE Plasma 5+ */ "Noto Sans",
-		/* fallback */ sans-serif,
-		/* macOS emoji */ "Apple Color Emoji",
-		/* Windows emoji */ "Segoe UI Emoji",
-		/* Windows emoji */ "Segoe UI Symbol",
-		/* Linux emoji */ "Noto Color Emoji";
-}
+  a {
+    @apply text-link border-b hover:text-fg;
+  }
 
-html,
-body {
-	padding: 0;
-	margin: 0;
-	color: var(--fg);
-	background-color: var(--bg);
-	scroll-behavior: smooth;
-}
+  p,
+  ol,
+  ul,
+  dl,
+  table {
+    @apply mb-6;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5 {
-	margin: 0 0 1rem 0;
-	font-weight: 600;
-	color: var(--heading-fg);
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply text-heading font-bold mb-4;
+  }
 
-p,
-ol,
-ul,
-dl,
-table {
-	margin: 0 0 1.5rem 0;
-	line-height: 1.5;
-}
+  h1 {
+    @apply text-4xl;
+  }
 
-ul {
-	list-style: "–  ";
-}
+  h2 {
+    @apply text-3xl;
+  }
 
-li {
-	margin-bottom: 5px;
-}
-
-hr {
-	margin: 0;
-	border: 0;
-	border-top: 1px solid var(--secondary);
-}
-
-a {
-	color: var(--link);
-	text-decoration: none;
-	border-bottom: 1px inset transparent;
-}
-
-a:hover,
-a:focus,
-a:active {
-	border-bottom-color: currentColor;
-}
-
-.overflow-yes .block-code,
-.overflow-yes pre.not-code,
-.overflow-yes article img {
-	display: block;
-	margin: 30px 0;
-	width: fit-content;
-	margin-left: 50%;
-	transform: translateX(-50%);
-	min-width: 100%;
-	max-width: calc(100vw - calc(var(--padding-right) + var(--padding-left)));
-}
+  h3 {
+    @apply text-2xl;
+  }
 
-.container {
-	max-width: var(--max-width);
-	padding: 30px 20px;
-	width: 100%;
-	margin: auto;
-}
+  h4 {
+    @apply text-xl;
+  }
 
-.footer {
-	margin-top: 30px;
-}
-
-.footer hr {
-	padding-bottom: 20px;
-}
+  h5 {
+    @apply text-lg;
+  }
 
-.footer a.top {
-	color: inherit;
-	display: inline-block;
-	margin: 10px 0;
-}
+  ul {
+    @apply list-["–__"] pl-10 flex flex-col gap-2;
+  }
 
-header a {
-	color: inherit;
-	border-bottom-style: none;
-}
+  ol {
+    @apply list-decimal pl-10 flex flex-col gap-2;
+  }
 
-header a:hover {
-	border-bottom-style: solid;
-}
+  pre {
+    @apply bg-transparent! my-4;
+  }
 
-article img {
-	max-width: 100%;
-	margin: auto;
-	display: flex;
-	border-radius: 6px;
-	box-sizing: content-box;
-}
+  code {
+    @apply text-sm rounded;
+  }
 
-/* .overflow-yes article img {
-	max-width: unset;
-} */
+  code:not(pre code) {
+    @apply px-1 border;
+  }
 
-.block-image .text {
-	text-align: center;
-	margin-top: 10px;
-	color: var(--secondary);
-}
+  pre code {
+    @apply block p-2  bg-[#0a1826] text-[#b2b6bb];
+  }
 
-.block-image .text a {
-	color: inherit;
+  blockquote {
+    @apply my-12 py-3 border-y-4 border-double *:mb-0;
+  }
 }
 
-.block-image .text a:hover,
-.block-image .text a:focus {
-	color: var(--link);
+@font-face {
+  font-family: "Atkinson Hyperlegible";
+  src: url("/fonts/atkinson-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
 }
 
-.intro {
-	margin: 50px 0 20px;
-}
-
-.intro h1 {
-	margin-bottom: 0;
-}
-
-.tags a {
-	color: inherit;
-}
-
-.link-with-icon {
-	display: inline-flex;
-	gap: 4px;
-	align-items: center;
-	vertical-align: text-top;
-}
-
-.intro-meta {
-	font-weight: bold;
-}
-
-a.tags {
-	border-bottom-style: dotted;
-	border-bottom-color: inherit;
-}
-
-a.tags:focus,
-a.tags:hover,
-a.tags:focus {
-	border-bottom-style: solid;
-	font-weight: bold;
-}
-
-h1 {
-	/* font-size: 2.8em; */
-	font-weight: 800;
-	letter-spacing: -1px;
-}
-
-a:has(code) {
-	border: none;
-}
-a:has(code):is(:hover, :focus, :active) code {
-	background-color: var(--link);
-	color: var(--bg);
-	border-color: var(--link);
-}
-
-table {
-	border-collapse: collapse;
-	min-width: 100%;
-	font-size: 0.85rem;
-}
-
-th,
-td {
-	padding: 0.5rem;
-	text-align: start;
-}
-
-th {
-	border-color: var(--heading-fg);
-	color: var(--heading-fg);
-}
-
-th,
-tr:not(:last-of-type) td {
-	border-bottom: 1px solid;
-}
-
-.image-container {
-	--background-color: rgba(0, 0, 0, 0.33);
-	--text: #fff;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}
-
-.image-container .inner-container {
-	padding: 20px 20px 0;
-}
-
-.image-container .intro {
-	margin-top: 20px;
-}
-
-.image-container,
-.inner-container {
-	z-index: 0;
-}
-
-.image-container.invert {
-	--background-color: rgba(255, 255, 255, 0.13);
-	/* a very weird firefox bug */
-	--text: #001;
-}
-
-@media screen and (max-width: 600px) {
-	.image-container .stack .read-link {
-		display: none;
-	}
-
-	.image-container img {
-		margin-top: 50px;
-		width: 100%;
-		border-radius: 6px;
-	}
-}
-
-@media screen and (min-width: 600px) {
-	.image-container .stack hr {
-		display: none;
-	}
-
-	.image-container {
-		position: relative;
-		height: 100vh;
-	}
-
-	.image-container .inner-container {
-		padding-bottom: 0;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		justify-content: space-between;
-	}
-
-	.image-container img {
-		position: absolute;
-		left: 0;
-		top: 0;
-		z-index: -2;
-		height: 100vh;
-		width: 100vw;
-		object-fit: cover;
-		margin: 0;
-	}
-
-	.image-container .top > header > nav > a {
-		color: var(--text);
-		font-size: xx-large;
-		font-weight: 900;
-		border-bottom-width: 3px;
-		box-shadow: 0 0 100px 100px var(--background-color);
-		background-color: var(--background-color);
-	}
-
-	.image-container .bottom {
-		color: var(--text);
-		box-shadow: 0 0 100px 100px var(--background-color);
-		background-color: var(--background-color);
-	}
-
-	.image-container .read-link {
-		color: inherit;
-		border-bottom-width: 2px;
-		font-weight: bold;
-	}
-
-	.image-container h1 {
-		color: inherit;
-	}
-}
-
-code,
-kbd,
-samp,
-pre {
-	font-family:
-		/* macOS 10.10+ */ "Menlo",
-		/* Windows 6+ */ "Consolas",
-		/* Android 4+ */ "Roboto Mono",
-		/* Ubuntu 10.10+ */ "Ubuntu Monospace",
-		/* KDE Plasma 5+ */ "Noto Mono",
-		/* KDE Plasma 4+ */ "Oxygen Mono",
-		/* Linux/OpenOffice fallback */ "Liberation Mono",
-		/* fallback */ monospace,
-		/* macOS emoji */ "Apple Color Emoji",
-		/* Windows emoji */ "Segoe UI Emoji",
-		/* Windows emoji */ "Segoe UI Symbol",
-		/* Linux emoji */ "Noto Color Emoji";
-}
-
-blockquote {
-	margin: 3em 0;
-	padding: 10px 0;
-	border-width: 4px 0;
-	border-style: double;
-}
-
-blockquote p {
-	margin: 0;
-}
-
-code {
-	padding: 0 5px;
-	font-size: 0.9em;
-	border: 1px solid;
-	border-radius: 5px;
-	line-height: 1;
-}
-
-pre:not(.not-code) code {
-	display: block;
-	padding: 10px;
-	color: #b2b6bb;
-	background-color: #0a1826;
-	border: 0;
-	line-height: 1.5;
-}
-
-code,
-pre {
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	-moz-tab-size: 2;
-	-o-tab-size: 2;
-	tab-size: 2;
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-	overflow: auto;
-}
-
-pre {
-	background-color: transparent  !important;
+@font-face {
+  font-family: "Atkinson Hyperlegible";
+  src: url("/fonts/atkinson-bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
 }