feat: move to tailwind

7 files changed, 591 insertions, 137 deletions

diff --git a/_config.ts b/_config.ts
index afdd06e..a702409 100644
--- a/_config.ts
+++ b/_config.ts
@@ -4,21 +4,11 @@ import base_path from "lume/plugins/base_path.ts";
 import code_highlight from "lume/plugins/code_highlight.ts";
 import date from "lume/plugins/date.ts";
 import remark from "lume/plugins/remark.ts";
+import postcss from "lume/plugins/postcss.ts";
 import sass from "lume/plugins/sass.ts";
 import sitemap from "lume/plugins/sitemap.ts";
-
-const site = lume({
-	src: "./src",
-	location: new URL("https://getchoo.github.io"),
-});
-
-site.use(attributes());
-site.use(base_path());
-site.use(code_highlight());
-site.use(date());
-site.use(remark());
-site.use(sass());
-site.use(sitemap());
+import tailwindcss from "lume/plugins/tailwindcss.ts";
+import tailwind_catppuccin from "npm:@catppuccin/[email protected]";
 
 const getGitRevision = async () => {
 	const p = Deno.run({
@@ -28,19 +18,51 @@ const getGitRevision = async () => {
 	const [status, output] = await Promise.all([p.status(), p.output()]);
 
 	if (status.success) {
-		return new TextDecoder().decode(output).trim();
+		return new TextDecoder().decode(output).trim().substring(0, 8);
 	}
 
 	return null;
 };
 
-site.data("gitRevision", await getGitRevision());
-
-site.ignore("README.md", "LICENSE", ".gitignore", ".gitattributes");
+const site = lume({
+	src: "./src",
+	location: new URL("https://getchoo.github.io"),
+});
 
-site.copy("favicon.ico");
-site.copy("files");
-site.copy("imgs");
-site.copy("js");
+site.use(attributes())
+	.use(base_path())
+	.use(code_highlight())
+	.use(date())
+	.use(remark())
+	.use(sitemap())
+	.use(sass())
+	.use(
+		tailwindcss({
+			options: {
+				plugins: [
+					tailwind_catppuccin({
+						defaultFlavour: "mocha",
+					}),
+				],
+			},
+		})
+	)
+	.use(postcss())
+	.data("gitRevision", await getGitRevision())
+	.ignore(
+		"README.md",
+		"LICENSE",
+		".gitignore",
+		".gitattributes",
+		"flake.nix",
+		"flake.lock",
+		".editorconfig",
+		".prettierignore",
+		".envrc"
+	)
+	.copy("favicon.ico")
+	.copy("files")
+	.copy("imgs")
+	.copy("js");
 
 export default site;
diff --git a/deno.lock b/deno.lock
index 3972f77..4eaabdb 100644
--- a/deno.lock
+++ b/deno.lock
@@ -363,10 +363,12 @@
     "https://deno.land/x/[email protected]/deps/markdown_it.ts": "e48e34de092bc3fc96617372f26190cf3bbf722f4206a9e9e64febbc8fb925c4",
     "https://deno.land/x/[email protected]/deps/nunjucks.ts": "a8f31de092612a613680944e10b3647ccf91a1db4e099f046c3e73a40f8a6193",
     "https://deno.land/x/[email protected]/deps/path.ts": "276bb6077962eba04b3db3de4e378303e422791c897ce2ac08d8bb73248224cc",
+    "https://deno.land/x/[email protected]/deps/postcss.ts": "487d235b4974e68e410c1eb830275b57c271326a64bb33e852249fbb23637ae9",
     "https://deno.land/x/[email protected]/deps/pug.ts": "27ae2b6c129f3c5c913057c9388f845fdd4eca600181480aca624f3de4c8a8a4",
     "https://deno.land/x/[email protected]/deps/react.ts": "6ce99e14ad6bd9ce09f69c90b5a5597e44be78eab7f334bcab31f4824b12536a",
     "https://deno.land/x/[email protected]/deps/remark.ts": "1d4c029051e40cc011cb684fed9e282b8d8a8a6d81a2e20ab998226381552788",
     "https://deno.land/x/[email protected]/deps/sass.ts": "b76e67a72eecea86ef9baca25e0f0cab84cf396ab4ed017535456865ef4b6214",
+    "https://deno.land/x/[email protected]/deps/tailwindcss.ts": "70591b5dbcae3e81cbdb0874fbabb160e735eafc9bfb18b7a965aa06d123f2f3",
     "https://deno.land/x/[email protected]/deps/yaml.ts": "4e7333ee5269353315aa0f19d1fe04d704438c7fcb860d36398708036ed1661d",
     "https://deno.land/x/[email protected]/middlewares/logger.ts": "69e69099a2e3a8c62d0bb62014381337f6e855c6b330e210e4a705fe8111e10a",
     "https://deno.land/x/[email protected]/middlewares/no_cache.ts": "95fb11d820d931b6aca268fa30aee22e315c556bd214e135bb9b5ddbcbe039d6",
@@ -387,12 +389,14 @@
     "https://deno.land/x/[email protected]/plugins/modules.ts": "d31ababab5e35b47fc207685765c9431ddc7bec019061e18b1d36f527e13029d",
     "https://deno.land/x/[email protected]/plugins/nunjucks.ts": "6d66887a15cd23793f95e9d38df0b77a55b4b037dd743076556d5c54e2953376",
     "https://deno.land/x/[email protected]/plugins/paginate.ts": "0fefcbb290088bfa8770b84af3cd092a5fd9e8abd0adb426eb74be0927abc0da",
+    "https://deno.land/x/[email protected]/plugins/postcss.ts": "5dc3a6e76293db27a7b98e4f63f1a38fb7c7ca6038628adee79c1b6698795215",
     "https://deno.land/x/[email protected]/plugins/pug.ts": "6115a2906303720ce1afdcf299330a0bd0a3a34b805e2a7fd02792c53abbd824",
     "https://deno.land/x/[email protected]/plugins/remark.ts": "42bf59fe9479ef31e437e207f58c0060a4d30bc5779800d9ced93883075ca791",
     "https://deno.land/x/[email protected]/plugins/sass.ts": "fd21d0c646e3d804a1fc599e6f0dca37dcaa0363f236ea4b129261238013a63f",
     "https://deno.land/x/[email protected]/plugins/search.ts": "63b29bf31dfdb4cb9146b5e82c5d86190507842f5da0b85be9ed310c15752076",
     "https://deno.land/x/[email protected]/plugins/sitemap.ts": "2abf853af68ff36cb8ab46196bf538686de686fb1432db52fc2d59f6968c7a5e",
     "https://deno.land/x/[email protected]/plugins/source_maps.ts": "3d3d97691937019949fa791dbd61002c42d918d07cc7cc37028c5018b9aa1bc4",
+    "https://deno.land/x/[email protected]/plugins/tailwindcss.ts": "6542757ed1778cdc7a76a47d2f986d8fcedb1c00a9fb704e383ad263ccb20cbc",
     "https://deno.land/x/[email protected]/plugins/url.ts": "43d3d47896a7322a8dd34572dedb4baa6f73a382594a2ff7c34a3a064dcc6c9e",
     "https://deno.land/x/[email protected]/plugins/yaml.ts": "df24aac4098dba258f1ac331a3b16ba488a336eb63c51afed8f59201228d583c",
     "https://deno.land/x/[email protected]/mod.d.ts": "7ad0a1e485a1890b16591eaa5a7b48fadca831b71b6c5e13c2a4fed279d70190",
@@ -422,12 +426,18 @@
   },
   "npm": {
     "specifiers": {
+      "@catppuccin/[email protected]": "@catppuccin/[email protected][email protected]",
       "@lumeland/[email protected]": "@lumeland/[email protected]",
+      "@lumeland/[email protected]": "@lumeland/[email protected][email protected]",
+      "[email protected]": "[email protected][email protected]",
       "[email protected]": "[email protected]",
       "[email protected]": "[email protected]",
       "[email protected]": "[email protected][email protected]",
       "[email protected]": "[email protected]",
       "[email protected]": "[email protected]",
+      "[email protected]": "[email protected][email protected]",
+      "[email protected]": "[email protected][email protected][email protected]",
+      "[email protected]": "[email protected]",
       "[email protected]": "[email protected]",
       "[email protected]": "[email protected][email protected]",
       "[email protected]": "[email protected]",
@@ -460,6 +470,38 @@
           "to-fast-properties": "[email protected]"
         }
       },
+      "@catppuccin/[email protected]": {
+        "integrity": "sha512-IQLsZwXDMpLc5CFGjIMa/gFnnFL/QLB280F11B51JweZHerZ/FgPXdIR4eQqn1CgrqI3wGfgnj1LVPx12DV/Uw==",
+        "dependencies": {}
+      },
+      "@catppuccin/[email protected][email protected]": {
+        "integrity": "sha512-WWOzx8uOf3QPZ1HdVSkpgaqzMzrfYpOgAketQAQ7493eFhlYC4bJ1ViT5ukhwfhzuu3xnmke+Op2qjhHnyjt8g==",
+        "dependencies": {
+          "@catppuccin/palette": "@catppuccin/[email protected]",
+          "tailwindcss": "[email protected][email protected]"
+        }
+      },
+      "@csstools/[email protected][email protected]": {
+        "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
+        "dependencies": {
+          "postcss-selector-parser": "[email protected]"
+        }
+      },
+      "@lumeland/[email protected]": {
+        "integrity": "sha512-UkYnuVrw09QEJh1J+1M6o8KWmZnzCv3PU2PbiNImXQGhUcqU5lhqf4KLH3HNcsiVCKLmW0KVqW8rDTGAlDwpbQ==",
+        "dependencies": {
+          "acorn": "[email protected]",
+          "acorn-walk": "[email protected]",
+          "xtend": "[email protected]"
+        }
+      },
+      "@lumeland/[email protected]": {
+        "integrity": "sha512-L5t8if/CUuzDrcyqgOxCDF3Y/wyysBBGb89Em1hm37cp3OLVs5T468VF9NafhjXcY+uRU7g/7Up+dWFdTcmKgA==",
+        "dependencies": {
+          "@lumeland/acorn-node": "@lumeland/[email protected]",
+          "defined": "[email protected]"
+        }
+      },
       "@lumeland/[email protected]": {
         "integrity": "sha512-5zpXkRmvEnvoo061gVJL8GnXfdzi1u/+i7+rygK/xwT4SRKJVx7k8bSrYQD5nj7JvWg8/QQuZWvwhlIty4ddIg==",
         "dependencies": {
@@ -467,6 +509,52 @@
           "source-map-js": "[email protected]"
         }
       },
+      "@lumeland/[email protected][email protected]": {
+        "integrity": "sha512-W9sQwqFoTW4h9jOKx9TGT39Jg0YvVCr0CU0cqK04xvivNIV295KlY5YND0IGNamA0IpqoNSzkyuYz2cHgluQFA==",
+        "dependencies": {
+          "@lumeland/detective": "@lumeland/[email protected]",
+          "arg": "[email protected]",
+          "chokidar": "[email protected]",
+          "color-name": "[email protected]",
+          "didyoumean": "[email protected]",
+          "dlv": "[email protected]",
+          "fast-glob": "[email protected]",
+          "glob-parent": "[email protected]",
+          "is-glob": "[email protected]",
+          "lilconfig": "[email protected]",
+          "micromatch": "[email protected]",
+          "normalize-path": "[email protected]",
+          "object-hash": "[email protected]",
+          "picocolors": "[email protected]",
+          "postcss": "[email protected]",
+          "postcss-import": "[email protected][email protected]",
+          "postcss-js": "[email protected][email protected]",
+          "postcss-load-config": "[email protected][email protected]",
+          "postcss-nested": "[email protected][email protected]",
+          "postcss-selector-parser": "[email protected]",
+          "postcss-value-parser": "[email protected]",
+          "quick-lru": "[email protected]",
+          "resolve": "[email protected]"
+        }
+      },
+      "@nodelib/[email protected]": {
+        "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+        "dependencies": {
+          "@nodelib/fs.stat": "@nodelib/[email protected]",
+          "run-parallel": "[email protected]"
+        }
+      },
+      "@nodelib/[email protected]": {
+        "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+        "dependencies": {}
+      },
+      "@nodelib/[email protected]": {
+        "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+        "dependencies": {
+          "@nodelib/fs.scandir": "@nodelib/[email protected]",
+          "fastq": "[email protected]"
+        }
+      },
       "@types/[email protected]": {
         "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
         "dependencies": {
@@ -497,10 +585,33 @@
         "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+        "dependencies": {
+          "acorn": "[email protected]",
+          "acorn-walk": "[email protected]",
+          "xtend": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+        "dependencies": {
+          "normalize-path": "[email protected]",
+          "picomatch": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
         "dependencies": {}
@@ -513,6 +624,18 @@
         "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==",
         "dependencies": {}
       },
+      "[email protected][email protected]": {
+        "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
+        "dependencies": {
+          "browserslist": "[email protected]",
+          "caniuse-lite": "[email protected]",
+          "fraction.js": "[email protected]",
+          "normalize-range": "[email protected]",
+          "picocolors": "[email protected]",
+          "postcss": "[email protected]",
+          "postcss-value-parser": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
         "dependencies": {
@@ -523,6 +646,25 @@
         "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+        "dependencies": {
+          "fill-range": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+        "dependencies": {
+          "caniuse-lite": "[email protected]",
+          "electron-to-chromium": "[email protected]",
+          "node-releases": "[email protected]",
+          "update-browserslist-db": "[email protected][email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
         "dependencies": {
@@ -530,6 +672,14 @@
           "get-intrinsic": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
         "dependencies": {}
@@ -552,6 +702,23 @@
           "is-regex": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+        "dependencies": {
+          "anymatch": "[email protected]",
+          "braces": "[email protected]",
+          "fsevents": "[email protected]",
+          "glob-parent": "[email protected]",
+          "is-binary-path": "[email protected]",
+          "is-glob": "[email protected]",
+          "normalize-path": "[email protected]",
+          "readdirp": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
         "dependencies": {}
@@ -563,6 +730,10 @@
           "@babel/types": "@babel/[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
         "dependencies": {}
@@ -579,22 +750,50 @@
           "character-entities": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+        "dependencies": {
+          "acorn-node": "[email protected]",
+          "defined": "[email protected]",
+          "minimist": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-W8gdzXG86mVPoc56eM8YA+QiLxaAxJ8cmDjxZgfhLLWVvZQxyA918w5tX2JEWApZta45T1/sYcmFHTsTOUE3nw==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
         "dependencies": {}
@@ -603,6 +802,36 @@
         "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+        "dependencies": {
+          "@nodelib/fs.stat": "@nodelib/[email protected]",
+          "@nodelib/fs.walk": "@nodelib/[email protected]",
+          "glob-parent": "[email protected]",
+          "merge2": "[email protected]",
+          "micromatch": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+        "dependencies": {
+          "reusify": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+        "dependencies": {
+          "to-regex-range": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
         "dependencies": {}
@@ -615,6 +844,18 @@
           "has-symbols": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+        "dependencies": {
+          "is-glob": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+        "dependencies": {
+          "is-glob": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
         "dependencies": {}
@@ -724,6 +965,12 @@
         "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+        "dependencies": {
+          "binary-extensions": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
         "dependencies": {}
@@ -741,6 +988,20 @@
           "object-assign": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+        "dependencies": {
+          "is-extglob": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
         "dependencies": {}
@@ -775,6 +1036,10 @@
         "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
         "dependencies": {
@@ -944,6 +1209,10 @@
         "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==",
         "dependencies": {
@@ -1191,6 +1460,17 @@
           "uvu": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+        "dependencies": {
+          "braces": "[email protected]",
+          "picomatch": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
         "dependencies": {}
@@ -1199,10 +1479,30 @@
         "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
         "dependencies": {}
@@ -1211,6 +1511,85 @@
         "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+        "dependencies": {}
+      },
+      "[email protected][email protected]": {
+        "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+        "dependencies": {
+          "postcss": "[email protected]",
+          "postcss-value-parser": "[email protected]",
+          "read-cache": "[email protected]",
+          "resolve": "[email protected]"
+        }
+      },
+      "[email protected][email protected]": {
+        "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+        "dependencies": {
+          "postcss": "[email protected]",
+          "postcss-value-parser": "[email protected]",
+          "read-cache": "[email protected]",
+          "resolve": "[email protected]"
+        }
+      },
+      "[email protected][email protected]": {
+        "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+        "dependencies": {
+          "camelcase-css": "[email protected]",
+          "postcss": "[email protected]"
+        }
+      },
+      "[email protected][email protected]": {
+        "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+        "dependencies": {
+          "lilconfig": "[email protected]",
+          "postcss": "[email protected]",
+          "yaml": "[email protected]"
+        }
+      },
+      "[email protected][email protected]": {
+        "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+        "dependencies": {
+          "postcss": "[email protected]",
+          "postcss-selector-parser": "[email protected]"
+        }
+      },
+      "[email protected][email protected][email protected]": {
+        "integrity": "sha512-E6Jq74Jo/PbRAtZioON54NPhUNJYxVWhwxbweYl1vAoBYuGlDIts5yhtKiZFLvkvwT73e/9nFrW3oMqAtgG+GQ==",
+        "dependencies": {
+          "@csstools/selector-specificity": "@csstools/[email protected][email protected]",
+          "postcss": "[email protected]",
+          "postcss-selector-parser": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+        "dependencies": {
+          "cssesc": "[email protected]",
+          "util-deprecate": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+        "dependencies": {
+          "nanoid": "[email protected]",
+          "picocolors": "[email protected]",
+          "source-map-js": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
         "dependencies": {
@@ -1312,6 +1691,14 @@
           "pug-strip-comments": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+        "dependencies": {}
+      },
       "[email protected][email protected]": {
         "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
         "dependencies": {
@@ -1326,6 +1713,18 @@
           "loose-envify": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+        "dependencies": {
+          "pify": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+        "dependencies": {
+          "picomatch": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-d6AKtisSRtDRX4aSPsJGTfnzrX2ZkHQLE5kiUuGOeEoLpbEulFF4hj0mLPbsa+7vmguDKOVVEQdHKDSwoaIDsQ==",
         "dependencies": {
@@ -1384,6 +1783,16 @@
           "supports-preserve-symlinks-flag": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+        "dependencies": {
+          "queue-microtask": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
         "dependencies": {
@@ -1415,10 +1824,44 @@
         "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
         "dependencies": {}
       },
+      "[email protected][email protected]": {
+        "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
+        "dependencies": {
+          "arg": "[email protected]",
+          "chokidar": "[email protected]",
+          "color-name": "[email protected]",
+          "detective": "[email protected]",
+          "didyoumean": "[email protected]",
+          "dlv": "[email protected]",
+          "fast-glob": "[email protected]",
+          "glob-parent": "[email protected]",
+          "is-glob": "[email protected]",
+          "lilconfig": "[email protected]",
+          "micromatch": "[email protected]",
+          "normalize-path": "[email protected]",
+          "object-hash": "[email protected]",
+          "picocolors": "[email protected]",
+          "postcss": "[email protected]",
+          "postcss-import": "[email protected][email protected]",
+          "postcss-js": "[email protected][email protected]",
+          "postcss-load-config": "[email protected][email protected]",
+          "postcss-nested": "[email protected][email protected]",
+          "postcss-selector-parser": "[email protected]",
+          "postcss-value-parser": "[email protected]",
+          "quick-lru": "[email protected]",
+          "resolve": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
         "dependencies": {}
       },
+      "[email protected]": {
+        "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+        "dependencies": {
+          "is-number": "[email protected]"
+        }
+      },
       "[email protected]": {
         "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
         "dependencies": {}
@@ -1484,6 +1927,18 @@
           "unist-util-visit-parents": "[email protected]"
         }
       },
+      "[email protected][email protected]": {
+        "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+        "dependencies": {
+          "browserslist": "[email protected]",
+          "escalade": "[email protected]",
+          "picocolors": "[email protected]"
+        }
+      },
+      "[email protected]": {
+        "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
         "dependencies": {
@@ -1533,6 +1988,14 @@
           "babel-walk": "[email protected]"
         }
       },
+      "[email protected]": {
+        "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+        "dependencies": {}
+      },
+      "[email protected]": {
+        "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+        "dependencies": {}
+      },
       "[email protected]": {
         "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
         "dependencies": {}
diff --git a/src/_includes/components/headerbar.njk b/src/_includes/components/headerbar.njk
index e1601c4..54ea25a 100644
--- a/src/_includes/components/headerbar.njk
+++ b/src/_includes/components/headerbar.njk
@@ -1,12 +1,13 @@
 <div class="headerbar">
-	<div id="links">
-		<p>||
-		<a href="/">home</a>
-		|
-		<a href="/blog">blog</a>
-		|
-		<a href="https://github.com/getchoo">github</a>
-		||
-		</p>
+	<div id="links" class="flex gap-3">
+		<button onclick="window.location.href='/'">
+			home
+		</button>
+		<button onclick="window.location.href='/blog'">
+			blog
+		</button>
+		<button onclick="window.location.href='https://github.com/getchoo'">
+			github
+		</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index b0c9294..42e03ba 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -7,7 +7,7 @@
 		<meta name="description" content="{{ description }}"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1"/>
 		<link rel="stylesheet" href="/guzzle.css"/>
-		<script type="module" src="/js/chrisApp.js"></script>
+
 	</head>
 
 	<body>
diff --git a/src/_includes/layouts/index.njk b/src/_includes/layouts/index.njk
index feccdfc..7bf9545 100644
--- a/src/_includes/layouts/index.njk
+++ b/src/_includes/layouts/index.njk
@@ -7,30 +7,34 @@ layout: "layouts/base.njk"
 		{{ content | safe }}
 	</div>
 	<div id="gifs">
-		<img src="/imgs/gifs/legalize.gif" width="88" height="31" loading="lazy" decoding="async" alt="legalize now!"/>
-		<img src="/imgs/gifs/acab.gif" width="88" height="31" loading="lazy" decoding="async" alt="acab"/>
-		<img src="/imgs/gifs/poweredbyfedora.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by fedora"/>
-		<img src="/imgs/gifs/capitalism.gif" width="88" height="31" loading="lazy" decoding="async" alt="let's crush capitalism!"/>
-		<br>
-		<img src="/imgs/gifs/anybrowser.gif" width="88" height="31" loading="lazy" decoding="async" alt="best viewed with any browser"/>
-		<img src="/imgs/gifs/weezer.gif" width="88" height="31" loading="lazy" decoding="async" alt="weezer fan"/>
-		<a href="https://dnsense.pub/">
-			<img src="/imgs/gifs/steam.gif" width="88" height="31" loading="lazy" decoding="async" alt="play with steam"/>
-		</a>
-		<img src="/imgs/gifs/vi.gif" width="88" height="31" loading="lazy" decoding="async" alt="made with vi"/>
-		<img src="/imgs/gifs/pride.gif" width="88" height="31" loading="lazy" decoding="async" alt="pride"/>
-		<img src="/imgs/gifs/imagine.gif" width="88" height="31" loading="lazy" decoding="async" alt="imagination"/>
-		<br>
-		<img src="/imgs/gifs/moz.gif" width="88" height="31" loading="lazy" decoding="async" alt="mozilla is cool"/>
-		<img src="/imgs/gifs/free.gif" width="88" height="31" loading="lazy" decoding="async" alt="completely free software"/>
-		<img src="/imgs/gifs/gimp.gif" width="88" height="31" loading="lazy" decoding="async" alt="graphics by gimp"/>
-		<img src="/imgs/gifs/explorer.gif" width="88" height="31" loading="lazy" decoding="async" alt="marijuana mind explorer"/>
-		<img src="/imgs/gifs/jsfree.gif" width="88" height="31" loading="lazy" decoding="async" alt="javascript free"/>
-		<img src="/imgs/gifs/web3.gif" width="88" height="31" loading="lazy" decoding="async" alt="keep the web free! say no to web3!"/>
-		<img src="/imgs/gifs/tired.gif" width="88" height="31" loading="lazy" decoding="async" alt="tired"/>
-		<img src="/imgs/gifs/arnold.gif" width="88" height="31" loading="lazy" decoding="async" alt="hey arnold!"/>
-		<img src="/imgs/gifs/bob.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by bob"/>
-		<img src="/imgs/gifs/counterstrike.gif" width="88" height="31" loading="lazy" decoding="async" alt="counter-strike player"/>
-		<img src="/imgs/gifs/chris.gif" width="88" height="31" loading="lazy" decoding="async" alt="chris troll" id="chris_gif"/>
+		<div id="gif">
+			<img src="/imgs/gifs/legalize.gif" width="88" height="31" loading="lazy" decoding="async" alt="legalize now!"/>
+			<img src="/imgs/gifs/acab.gif" width="88" height="31" loading="lazy" decoding="async" alt="acab"/>
+			<img src="/imgs/gifs/poweredbyfedora.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by fedora"/>
+			<img src="/imgs/gifs/capitalism.gif" width="88" height="31" loading="lazy" decoding="async" alt="let's crush capitalism!"/>
+		</div>
+		<div id="gif">
+			<img src="/imgs/gifs/anybrowser.gif" width="88" height="31" loading="lazy" decoding="async" alt="best viewed with any browser"/>
+			<img src="/imgs/gifs/weezer.gif" width="88" height="31" loading="lazy" decoding="async" alt="weezer fan"/>
+			<a href="https://dnsense.pub/">
+				<img src="/imgs/gifs/steam.gif" width="88" height="31" loading="lazy" decoding="async" alt="play with steam"/>
+			</a>
+			<img src="/imgs/gifs/vi.gif" width="88" height="31" loading="lazy" decoding="async" alt="made with vi"/>
+			<img src="/imgs/gifs/pride.gif" width="88" height="31" loading="lazy" decoding="async" alt="pride"/>
+			<img src="/imgs/gifs/imagine.gif" width="88" height="31" loading="lazy" decoding="async" alt="imagination"/>
+		</div>
+		<div id="gif">
+			<img src="/imgs/gifs/moz.gif" width="88" height="31" loading="lazy" decoding="async" alt="mozilla is cool"/>
+			<img src="/imgs/gifs/free.gif" width="88" height="31" loading="lazy" decoding="async" alt="completely free software"/>
+			<img src="/imgs/gifs/gimp.gif" width="88" height="31" loading="lazy" decoding="async" alt="graphics by gimp"/>
+			<img src="/imgs/gifs/explorer.gif" width="88" height="31" loading="lazy" decoding="async" alt="marijuana mind explorer"/>
+			<img src="/imgs/gifs/jsfree.gif" width="88" height="31" loading="lazy" decoding="async" alt="javascript free"/>
+			<img src="/imgs/gifs/web3.gif" width="88" height="31" loading="lazy" decoding="async" alt="keep the web free! say no to web3!"/>
+			<img src="/imgs/gifs/tired.gif" width="88" height="31" loading="lazy" decoding="async" alt="tired"/>
+			<img src="/imgs/gifs/arnold.gif" width="88" height="31" loading="lazy" decoding="async" alt="hey arnold!"/>
+			<img src="/imgs/gifs/bob.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by bob"/>
+			<img src="/imgs/gifs/counterstrike.gif" width="88" height="31" loading="lazy" decoding="async" alt="counter-strike player"/>
+			<img src="/imgs/gifs/chris.gif" width="88" height="31" loading="lazy" decoding="async" alt="chris troll" id="chris_gif"/>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/src/guzzle.sass b/src/guzzle.sass
index e9e0415..2939c8a 100644
--- a/src/guzzle.sass
+++ b/src/guzzle.sass
@@ -1,106 +1,68 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;700&display=swap')
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap')
 
-$fonts: "Noto Sans", "Fira Code", monospace
-$background-color: #1e1e2e
-$foreground-color: #b4befe
-$overlay: #7f849c
-$text: #1e1e2e
-$subtext: #cdd6f4
+@tailwind base
+@tailwind components
+@tailwind utilities
+@tailwind variants
 
-body
-	background-color: $background-color
-	font-family: $fonts
-	color: $text
-
-	padding: 10px
+html
+	font-family: "Noto Sans", sans-serif
 
-	p,li
-		font-size: 16px
+h1
+	@apply text-2xl
 
-	h1
-		font-size: 24px
+p,li
+	@apply text-base
 
-footer
-	font-size: 12px
-	color: $subtext
+a
+	@apply underline
 
-	display: flex
-	align-items: center
-	justify-content: center
-
-.container
-	background-color: $foreground-color
+button
+	@apply rounded-xl bg-yellow p-2 text-center
 
-	display: flex
-	flex: 1 1 auto
-	flex-direction: column
-	align-items: center
-	justify-content: center
-
-	width: fit-content
-	min-width: 33%
+body
+	@apply bg-base p-10
 
-	margin-left: auto
-	margin-right: auto
-	margin-top: 2%
+footer
+	@apply text-xs flex items-center justify-center
 
-	border-radius: 3%
+.container
+	@apply bg-lavender
+	@apply flex flex-auto flex-col
+	@apply items-center justify-center
+	@apply w-fit mx-auto
+	@apply rounded-lg
 
 .content
-	display: inline-block
-	text-align: center
-
-	margin: 5px
-	padding: 5px
+	@apply inline-block text-center p-5
+	img
+		// this is dumb
+		@apply mx-auto
 
 .headerbar
-	background-color: $foreground-color
-
-	display: flex
-	flex-direction: column
-	align-items: center
-	justify-content: center
-
-	width: fit-content
-	height: 30px
-
-	margin-left: auto
-	margin-right: auto
-	margin-top: 2%
-
-	border-radius: 5px
-	padding: 10px
+	@apply flex flex-col
+	@apply items-center justify-center
+	@apply mx-auto rounded p-3
 
 #blogpost
-	min-width: 50%
+	@apply w-full items-center
 
 #commitText
-	width: fix-content
-
-	padding: 5px
+	@apply text-subtext1 p-2
 
 #indexHeader
-	background-color: $background-color
-	color: $subtext
-
-	border-radius: 5px
-	padding: 5px
+	@apply bg-base w-fit h-fit mx-auto rounded p-5 text-text
 
 #gifs
-	background-color: $background-color
-	display: inline-block
-	text-align: center
-
-	margin: 20px
-	margin-top: 0
-	padding: 20px
+	@apply bg-base
+	@apply hidden min-[1280px]:flex flex-col gap-2
+	@apply text-center items-center justify-center
+	@apply m-20 mt-0 mb-5 p-10
+	@apply rounded-lg drop-shadow-2xl
 
-	box-shadow: 7px 10px 1px $overlay
-	border-radius: 5px
+#gif
+	@apply flex gap-2
 
 #vidya
-	display: flex
-	justify-content: center
-	padding: 5px
-	margin: 5px
+	@apply flex justify-center p-5
diff --git a/src/index.md b/src/index.md
index 9f876b4..277fbe7 100644
--- a/src/index.md
+++ b/src/index.md
@@ -4,7 +4,9 @@ title: guzzle guzzle
 description: getchoo's website
 ---
 
-<h1 id="indexHeader">getchoo's website 🦕</h1>
+<script type="module" src="/js/chrisApp.js"></script>
+<h1 id="indexHeader"><b>getchoo's website 🦕</b></h1>
+<br \>
 this is under construction. i'm experimenting with lume
 
 ![construction](/imgs/gifs/obras.gif)