vixalien.tngl.sh / dotio3
my website
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

move to tailwind

Angelo Verlain 1dde8202 7c8c0791

+551 -736
+13 -6
astro.config.mjs
··· 2 2 import { defineConfig } from "astro/config"; 3 3 import sitemap from "@astrojs/sitemap"; 4 4 5 + import tailwindcss from "@tailwindcss/vite"; 6 + 5 7 // https://astro.build/config 6 8 export default defineConfig({ 7 - site: "https://www.vixalien.com", 8 - integrations: [sitemap()], 9 - redirects: { 10 - "/posts": "/", 11 - "/feed": "/rss.xml", 9 + site: "https://www.vixalien.com", 10 + integrations: [sitemap()], 11 + 12 + redirects: { 13 + "/posts": "/", 14 + "/feed": "/rss.xml", 12 15 }, 13 - }); 16 + 17 + vite: { 18 + plugins: [tailwindcss()], 19 + }, 20 + });
+297 -2
deno.lock
··· 3 3 "specifiers": { 4 4 "npm:@astrojs/rss@^4.0.12": "4.0.12", 5 5 "npm:@astrojs/sitemap@^3.4.1": "3.4.1", 6 - "npm:astro@^5.9.3": "5.9.3_vite@6.3.5__picomatch@4.0.2_zod@3.25.64" 6 + "npm:@tailwindcss/vite@^4.1.11": "4.1.11_vite@6.3.5__picomatch@4.0.2", 7 + "npm:astro@^5.9.3": "5.9.3_vite@6.3.5__picomatch@4.0.2_zod@3.25.64", 8 + "npm:tailwindcss@^4.1.11": "4.1.11" 7 9 }, 8 10 "npm": { 11 + "@ampproject/remapping@2.3.0": { 12 + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", 13 + "dependencies": [ 14 + "@jridgewell/gen-mapping", 15 + "@jridgewell/trace-mapping" 16 + ] 17 + }, 9 18 "@astrojs/compiler@2.12.2": { 10 19 "integrity": "sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==" 11 20 }, ··· 99 108 "fontkit" 100 109 ] 101 110 }, 111 + "@emnapi/core@1.4.4": { 112 + "integrity": "sha512-A9CnAbC6ARNMKcIcrQwq6HeHCjpcBZ5wSx4U01WXCqEKlrzB9F9315WDNHkrs2xbx7YjjSxbUYxuN6EQzpcY2g==", 113 + "dependencies": [ 114 + "@emnapi/wasi-threads", 115 + "tslib" 116 + ] 117 + }, 102 118 "@emnapi/runtime@1.4.3": { 103 119 "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==", 120 + "dependencies": [ 121 + "tslib" 122 + ] 123 + }, 124 + "@emnapi/wasi-threads@1.0.3": { 125 + "integrity": "sha512-8K5IFFsQqF9wQNJptGbS6FNKgUTsSRYnTqNCG1vPP8jFdjSv18n2mQfJpkt2Oibo9iBEzcDnDxNwKTzC7svlJw==", 104 126 "dependencies": [ 105 127 "tslib" 106 128 ] ··· 351 373 "os": ["win32"], 352 374 "cpu": ["x64"] 353 375 }, 376 + "@isaacs/fs-minipass@4.0.1": { 377 + "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==", 378 + "dependencies": [ 379 + "minipass" 380 + ] 381 + }, 382 + "@jridgewell/gen-mapping@0.3.12": { 383 + "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==", 384 + "dependencies": [ 385 + "@jridgewell/sourcemap-codec", 386 + "@jridgewell/trace-mapping" 387 + ] 388 + }, 389 + "@jridgewell/resolve-uri@3.1.2": { 390 + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==" 391 + }, 354 392 "@jridgewell/sourcemap-codec@1.5.0": { 355 393 "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" 394 + }, 395 + "@jridgewell/trace-mapping@0.3.29": { 396 + "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==", 397 + "dependencies": [ 398 + "@jridgewell/resolve-uri", 399 + "@jridgewell/sourcemap-codec" 400 + ] 401 + }, 402 + "@napi-rs/wasm-runtime@0.2.12": { 403 + "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==", 404 + "dependencies": [ 405 + "@emnapi/core", 406 + "@emnapi/runtime", 407 + "@tybys/wasm-util@0.10.0" 408 + ] 356 409 }, 357 410 "@oslojs/encoding@1.1.0": { 358 411 "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==" ··· 517 570 "tslib" 518 571 ] 519 572 }, 573 + "@tailwindcss/node@4.1.11": { 574 + "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==", 575 + "dependencies": [ 576 + "@ampproject/remapping", 577 + "enhanced-resolve", 578 + "jiti", 579 + "lightningcss", 580 + "magic-string", 581 + "source-map-js", 582 + "tailwindcss" 583 + ] 584 + }, 585 + "@tailwindcss/oxide-android-arm64@4.1.11": { 586 + "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==", 587 + "os": ["android"], 588 + "cpu": ["arm64"] 589 + }, 590 + "@tailwindcss/oxide-darwin-arm64@4.1.11": { 591 + "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==", 592 + "os": ["darwin"], 593 + "cpu": ["arm64"] 594 + }, 595 + "@tailwindcss/oxide-darwin-x64@4.1.11": { 596 + "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==", 597 + "os": ["darwin"], 598 + "cpu": ["x64"] 599 + }, 600 + "@tailwindcss/oxide-freebsd-x64@4.1.11": { 601 + "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==", 602 + "os": ["freebsd"], 603 + "cpu": ["x64"] 604 + }, 605 + "@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11": { 606 + "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==", 607 + "os": ["linux"], 608 + "cpu": ["arm"] 609 + }, 610 + "@tailwindcss/oxide-linux-arm64-gnu@4.1.11": { 611 + "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==", 612 + "os": ["linux"], 613 + "cpu": ["arm64"] 614 + }, 615 + "@tailwindcss/oxide-linux-arm64-musl@4.1.11": { 616 + "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==", 617 + "os": ["linux"], 618 + "cpu": ["arm64"] 619 + }, 620 + "@tailwindcss/oxide-linux-x64-gnu@4.1.11": { 621 + "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==", 622 + "os": ["linux"], 623 + "cpu": ["x64"] 624 + }, 625 + "@tailwindcss/oxide-linux-x64-musl@4.1.11": { 626 + "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==", 627 + "os": ["linux"], 628 + "cpu": ["x64"] 629 + }, 630 + "@tailwindcss/oxide-wasm32-wasi@4.1.11": { 631 + "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==", 632 + "dependencies": [ 633 + "@emnapi/core", 634 + "@emnapi/runtime", 635 + "@emnapi/wasi-threads", 636 + "@napi-rs/wasm-runtime", 637 + "@tybys/wasm-util@0.9.0", 638 + "tslib" 639 + ], 640 + "cpu": ["wasm32"] 641 + }, 642 + "@tailwindcss/oxide-win32-arm64-msvc@4.1.11": { 643 + "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==", 644 + "os": ["win32"], 645 + "cpu": ["arm64"] 646 + }, 647 + "@tailwindcss/oxide-win32-x64-msvc@4.1.11": { 648 + "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==", 649 + "os": ["win32"], 650 + "cpu": ["x64"] 651 + }, 652 + "@tailwindcss/oxide@4.1.11": { 653 + "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==", 654 + "dependencies": [ 655 + "detect-libc", 656 + "tar" 657 + ], 658 + "optionalDependencies": [ 659 + "@tailwindcss/oxide-android-arm64", 660 + "@tailwindcss/oxide-darwin-arm64", 661 + "@tailwindcss/oxide-darwin-x64", 662 + "@tailwindcss/oxide-freebsd-x64", 663 + "@tailwindcss/oxide-linux-arm-gnueabihf", 664 + "@tailwindcss/oxide-linux-arm64-gnu", 665 + "@tailwindcss/oxide-linux-arm64-musl", 666 + "@tailwindcss/oxide-linux-x64-gnu", 667 + "@tailwindcss/oxide-linux-x64-musl", 668 + "@tailwindcss/oxide-wasm32-wasi", 669 + "@tailwindcss/oxide-win32-arm64-msvc", 670 + "@tailwindcss/oxide-win32-x64-msvc" 671 + ], 672 + "scripts": true 673 + }, 674 + "@tailwindcss/vite@4.1.11_vite@6.3.5__picomatch@4.0.2": { 675 + "integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==", 676 + "dependencies": [ 677 + "@tailwindcss/node", 678 + "@tailwindcss/oxide", 679 + "tailwindcss", 680 + "vite" 681 + ] 682 + }, 683 + "@tybys/wasm-util@0.10.0": { 684 + "integrity": "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==", 685 + "dependencies": [ 686 + "tslib" 687 + ] 688 + }, 689 + "@tybys/wasm-util@0.9.0": { 690 + "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==", 691 + "dependencies": [ 692 + "tslib" 693 + ] 694 + }, 520 695 "@types/debug@4.1.12": { 521 696 "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", 522 697 "dependencies": [ ··· 743 918 "readdirp" 744 919 ] 745 920 }, 921 + "chownr@3.0.0": { 922 + "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==" 923 + }, 746 924 "ci-info@4.2.0": { 747 925 "integrity": "sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==" 748 926 }, ··· 870 1048 "emoji-regex@8.0.0": { 871 1049 "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" 872 1050 }, 1051 + "enhanced-resolve@5.18.2": { 1052 + "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==", 1053 + "dependencies": [ 1054 + "graceful-fs", 1055 + "tapable" 1056 + ] 1057 + }, 873 1058 "entities@6.0.1": { 874 1059 "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==" 875 1060 }, ··· 980 1165 "github-slugger@2.0.0": { 981 1166 "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" 982 1167 }, 1168 + "graceful-fs@4.2.11": { 1169 + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" 1170 + }, 983 1171 "h3@1.15.3": { 984 1172 "integrity": "sha512-z6GknHqyX0h9aQaTx22VZDf6QyZn+0Nh+Ym8O/u0SGSkyF5cuTJYKlc8MkzW3Nzf9LE1ivcpmYC3FUGpywhuUQ==", 985 1173 "dependencies": [ ··· 1142 1330 "is-inside-container" 1143 1331 ] 1144 1332 }, 1333 + "jiti@2.4.2": { 1334 + "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==", 1335 + "bin": true 1336 + }, 1145 1337 "js-yaml@4.1.0": { 1146 1338 "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", 1147 1339 "dependencies": [ ··· 1155 1347 "kleur@4.1.5": { 1156 1348 "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==" 1157 1349 }, 1350 + "lightningcss-darwin-arm64@1.30.1": { 1351 + "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==", 1352 + "os": ["darwin"], 1353 + "cpu": ["arm64"] 1354 + }, 1355 + "lightningcss-darwin-x64@1.30.1": { 1356 + "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==", 1357 + "os": ["darwin"], 1358 + "cpu": ["x64"] 1359 + }, 1360 + "lightningcss-freebsd-x64@1.30.1": { 1361 + "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==", 1362 + "os": ["freebsd"], 1363 + "cpu": ["x64"] 1364 + }, 1365 + "lightningcss-linux-arm-gnueabihf@1.30.1": { 1366 + "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==", 1367 + "os": ["linux"], 1368 + "cpu": ["arm"] 1369 + }, 1370 + "lightningcss-linux-arm64-gnu@1.30.1": { 1371 + "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==", 1372 + "os": ["linux"], 1373 + "cpu": ["arm64"] 1374 + }, 1375 + "lightningcss-linux-arm64-musl@1.30.1": { 1376 + "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==", 1377 + "os": ["linux"], 1378 + "cpu": ["arm64"] 1379 + }, 1380 + "lightningcss-linux-x64-gnu@1.30.1": { 1381 + "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==", 1382 + "os": ["linux"], 1383 + "cpu": ["x64"] 1384 + }, 1385 + "lightningcss-linux-x64-musl@1.30.1": { 1386 + "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==", 1387 + "os": ["linux"], 1388 + "cpu": ["x64"] 1389 + }, 1390 + "lightningcss-win32-arm64-msvc@1.30.1": { 1391 + "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==", 1392 + "os": ["win32"], 1393 + "cpu": ["arm64"] 1394 + }, 1395 + "lightningcss-win32-x64-msvc@1.30.1": { 1396 + "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==", 1397 + "os": ["win32"], 1398 + "cpu": ["x64"] 1399 + }, 1400 + "lightningcss@1.30.1": { 1401 + "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==", 1402 + "dependencies": [ 1403 + "detect-libc" 1404 + ], 1405 + "optionalDependencies": [ 1406 + "lightningcss-darwin-arm64", 1407 + "lightningcss-darwin-x64", 1408 + "lightningcss-freebsd-x64", 1409 + "lightningcss-linux-arm-gnueabihf", 1410 + "lightningcss-linux-arm64-gnu", 1411 + "lightningcss-linux-arm64-musl", 1412 + "lightningcss-linux-x64-gnu", 1413 + "lightningcss-linux-x64-musl", 1414 + "lightningcss-win32-arm64-msvc", 1415 + "lightningcss-win32-x64-msvc" 1416 + ] 1417 + }, 1158 1418 "longest-streak@3.1.0": { 1159 1419 "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==" 1160 1420 }, ··· 1556 1816 "micromark-util-types" 1557 1817 ] 1558 1818 }, 1819 + "minipass@7.1.2": { 1820 + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==" 1821 + }, 1822 + "minizlib@3.0.2": { 1823 + "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==", 1824 + "dependencies": [ 1825 + "minipass" 1826 + ] 1827 + }, 1828 + "mkdirp@3.0.1": { 1829 + "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==", 1830 + "bin": true 1831 + }, 1559 1832 "mrmime@2.0.1": { 1560 1833 "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==" 1561 1834 }, ··· 1970 2243 "strnum@2.1.1": { 1971 2244 "integrity": "sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==" 1972 2245 }, 2246 + "tailwindcss@4.1.11": { 2247 + "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==" 2248 + }, 2249 + "tapable@2.2.2": { 2250 + "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==" 2251 + }, 2252 + "tar@7.4.3": { 2253 + "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==", 2254 + "dependencies": [ 2255 + "@isaacs/fs-minipass", 2256 + "chownr", 2257 + "minipass", 2258 + "minizlib", 2259 + "mkdirp", 2260 + "yallist" 2261 + ] 2262 + }, 1973 2263 "tiny-inflate@1.0.3": { 1974 2264 "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==" 1975 2265 }, ··· 2202 2492 "xxhash-wasm@1.1.0": { 2203 2493 "integrity": "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==" 2204 2494 }, 2495 + "yallist@5.0.0": { 2496 + "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==" 2497 + }, 2205 2498 "yargs-parser@21.1.1": { 2206 2499 "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==" 2207 2500 }, ··· 2242 2535 "dependencies": [ 2243 2536 "npm:@astrojs/rss@^4.0.12", 2244 2537 "npm:@astrojs/sitemap@^3.4.1", 2245 - "npm:astro@^5.9.3" 2538 + "npm:@tailwindcss/vite@^4.1.11", 2539 + "npm:astro@^5.9.3", 2540 + "npm:tailwindcss@^4.1.11" 2246 2541 ] 2247 2542 } 2248 2543 }
+3 -1
package.json
··· 11 11 "dependencies": { 12 12 "@astrojs/rss": "^4.0.12", 13 13 "@astrojs/sitemap": "^3.4.1", 14 - "astro": "^5.9.3" 14 + "@tailwindcss/vite": "^4.1.11", 15 + "astro": "^5.9.3", 16 + "tailwindcss": "^4.1.11" 15 17 } 16 18 }
+10 -2
src/components/ContactLinks.astro
··· 35 35 links.map((link) => { 36 36 return ( 37 37 <li> 38 - <a href={link.url} class="link-with-icon" rel={link.rel}> 38 + <a 39 + href={link.url} 40 + class="inline-flex gap-1 items-center align-text-top" 41 + rel={link.rel} 42 + > 39 43 <IconSelector link={link.url} /> 40 44 <span>{link.title}</span> 41 45 </a> ··· 44 48 }) 45 49 } 46 50 <li> 47 - <a href="/rss.xml" title="Atom Feed" class="link-with-icon"> 51 + <a 52 + href="/rss.xml" 53 + title="Atom Feed" 54 + class="inline-flex gap-1 items-center align-text-top" 55 + > 48 56 <IconRssFeed /> 49 57 <span>RSS</span> 50 58 </a>
+7 -4
src/components/Header.astro
··· 1 1 --- 2 2 export interface Props { 3 - title?: string; 3 + title?: string; 4 + href?: string; 4 5 } 6 + 7 + const { title = "Home", href = "/" } = Astro.props; 5 8 --- 6 9 7 10 <header> 8 - <nav> 9 - <a href="/">&larr; {Astro.props.title || "Home"}</a> 10 - </nav> 11 + <nav> 12 + <a href={href}>&larr; {title}</a> 13 + </nav> 11 14 </header>
-28
src/components/ImageContainer.astro
··· 1 - --- 2 - export interface Props { 3 - image: string; 4 - invert: boolean; 5 - } 6 - 7 - const { invert, image } = Astro.props; 8 - --- 9 - 10 - <div class={`image-container` + (invert ? " invert" : "")}> 11 - <div class="inner-container container"> 12 - <div class="top"> 13 - <slot name="top" /> 14 - </div> 15 - <picture> 16 - <img src={image} aria-hidden alt="Banner Image for post" /> 17 - </picture> 18 - <div class="bottom" id="main"> 19 - <slot name="bottom" /> 20 - <div class="stack"> 21 - <p> 22 - <a href="#main" class="read-link">&darr; Read</a> 23 - </p> 24 - <hr /> 25 - </div> 26 - </div> 27 - </div> 28 - </div>
+2 -2
src/components/Intro.astro
··· 13 13 const { title, created, author, dateFormat } = Astro.props; 14 14 --- 15 15 16 - <div class="intro"> 16 + <div class="mt-12 mb-5"> 17 17 { 18 18 created ? ( 19 19 <> ··· 25 25 </> 26 26 ) : null 27 27 } 28 - <h1>{title}</h1> 28 + <h1 class="text-4xl font-bold">{title}</h1> 29 29 </div>
+3
src/components/MainContainer.astro
··· 1 + <main class="max-w-2xl mx-auto px-5 py-8"> 2 + <slot /> 3 + </main>
+25 -91
src/components/PostsIndex.astro
··· 37 37 return ( 38 38 <> 39 39 <h3>{year}</h3> 40 - {posts.map( 41 - ({ 42 - id, 43 - data: { 44 - title, 45 - description: snippet, 46 - publish_date, 47 - hero_image, 48 - // tags, 49 - }, 50 - }) => ( 51 - <a class="post" href={`/blog/${id}`}> 52 - {hero_image ? ( 53 - <img class="post-image" src={hero_image} alt={title} /> 54 - ) : null} 55 - <h3 class="post-title"> 56 - <span>{title}</span> <span class="post-arrow">&rarr;</span> 57 - </h3> 58 - <br /> 59 - <small class="intro-meta"> 60 - {/* {author && <span>{author || ""} at </span>} */} 61 - <PrettyDate date={publish_date ?? new Date()} /> 62 - </small> 63 - <br /> 64 - <span>{snippet}</span> 65 - <br /> 66 - {/* <Tags tags={tags} /> */} 67 - </a> 68 - ), 69 - )} 40 + <ul> 41 + {posts.map( 42 + ({ 43 + id, 44 + data: { 45 + title, 46 + description: snippet, 47 + publish_date, 48 + hero_image, 49 + // tags, 50 + }, 51 + }) => ( 52 + <li> 53 + <div class="flex gap-2 items-center"> 54 + <a href={`/blog/${id}`} class="leading-tight inline-block"> 55 + {title} 56 + </a> 57 + <div class="border-b border-dashed self-center flex-1" /> 58 + <PrettyDate date={publish_date ?? new Date()} /> 59 + </div> 60 + <p>{snippet}</p> 61 + </li> 62 + ), 63 + )} 64 + </ul> 70 65 </> 71 66 ); 72 67 }) 73 68 } 74 69 </div> 75 - 76 - <style> 77 - .post { 78 - --padding: 12px; 79 - --link: var(--fg); 80 - --link-bg: #abd5ff; 81 - --link-bg-hover: #7ebfff; 82 - 83 - background-color: var(--link-bg); 84 - border-radius: 12px; 85 - padding: var(--padding); 86 - margin-inline: calc(-1 * var(--padding)); 87 - display: block; 88 - margin-bottom: 2em; 89 - border-bottom: none; 90 - transition: 0.3s background-color; 91 - } 92 - 93 - @media screen and (prefers-color-scheme: dark) { 94 - .post { 95 - --link-bg: #153e68; 96 - --link-bg-hover: #2c6fb8; 97 - --fg: white; 98 - } 99 - } 100 - 101 - .post:hover { 102 - background-color: var(--link-bg-hover); 103 - } 104 - 105 - .post-arrow { 106 - display: inline-block; 107 - transition: 0.3s translate; 108 - } 109 - 110 - .post:hover .post-arrow, 111 - .post:focus .post-arrow { 112 - translate: 10px; 113 - } 114 - 115 - .post .post-title { 116 - font-size: 1.1em; 117 - font-weight: 900; 118 - border-bottom-width: 2px; 119 - margin: 0; 120 - color: inherit; 121 - } 122 - 123 - .post a.post-image { 124 - border-bottom: none; 125 - } 126 - 127 - .post .post-image { 128 - width: 100%; 129 - aspect-ratio: 16/9; 130 - overflow: hidden; 131 - object-fit: cover; 132 - border-radius: 6px; 133 - margin-bottom: 0.5em; 134 - } 135 - </style>
+9 -79
src/components/ProjectsIndex.astro
··· 13 13 type Project = CollectionEntry<"portfolio">; 14 14 --- 15 15 16 - <div class="projects"> 16 + <div class="grid lg:grid-cols-2 lg:-mx-20 gap-4 mb-5"> 17 17 { 18 18 projects.map( 19 - ({ 20 - id, 21 - data: { 22 - title, 23 - description, 24 - hero_image, 25 - bg_color, 26 - link 27 - }, 28 - }) => ( 19 + ({ data: { title, description, hero_image, bg_color, link } }) => ( 29 20 <a 30 - class="project" 21 + class="border-0 rounded-lg hover:saturate-50 transition text-bg flex flex-col items-center" 31 22 href={link} 32 23 style={bg_color ? { "background-color": bg_color } : null} 33 24 target="_blank" ··· 35 26 {hero_image ? ( 36 27 <img class="project-image" src={hero_image} alt={title} /> 37 28 ) : null} 38 - <h3 class="project-title"> 39 - <span>{title}</span> <span class="project-arrow">&rarr;</span> 40 - </h3> 41 - <span>{description}</span> 42 - <br /> 29 + <div class="p-4 pt-0 flex flex-col items-center"> 30 + <h3 class="text-inherit mb-1"> 31 + <span>{title}</span> 32 + </h3> 33 + <span>{description}</span> 34 + </div> 43 35 </a> 44 36 ), 45 37 ) 46 38 } 47 39 </div> 48 - 49 - <style> 50 - .project { 51 - --padding: 12px; 52 - --link: var(--fg); 53 - --link-bg: #abd5ff; 54 - --link-bg-hover: #7ebfff; 55 - 56 - background-color: var(--link-bg); 57 - border-radius: 12px; 58 - padding: var(--padding); 59 - margin-inline: calc(-1 * var(--padding)); 60 - margin-bottom: 2em; 61 - border-bottom: none; 62 - transition: 0.3s background-color; 63 - text-align: center; 64 - min-height: 200px; 65 - display: flex; 66 - flex-direction: column; 67 - justify-content: center; 68 - gap: 1rem; 69 - } 70 - 71 - @media screen and (prefers-color-scheme: dark) { 72 - .project { 73 - --link-bg: #153e68; 74 - --link-bg-hover: #2c6fb8; 75 - --fg: white; 76 - } 77 - } 78 - 79 - .project:hover { 80 - background-color: var(--link-bg-hover); 81 - } 82 - 83 - .project-arrow { 84 - display: inline-block; 85 - transition: 0.3s translate; 86 - } 87 - 88 - .project:hover .project-arrow, 89 - .project:focus .project-arrow { 90 - translate: 10px; 91 - } 92 - 93 - .project .project-title { 94 - font-size: 1.25em; 95 - font-weight: 900; 96 - border-bottom-width: 2px; 97 - margin: 0; 98 - color: inherit; 99 - } 100 - 101 - .project a.project-image { 102 - border-bottom: none; 103 - } 104 - 105 - .project .project-image { 106 - width: 100%; 107 - border-radius: 6px; 108 - } 109 - </style>
+21 -33
src/layouts/BlogPost.astro
··· 3 3 4 4 import BaseHead from "../components/BaseHead.astro"; 5 5 import Header from "../components/Header.astro"; 6 - import ImageContainer from "../components/ImageContainer.astro"; 7 6 import PostInfo from "../components/PostInfo.astro"; 8 7 import { AUTHOR, PUBLISH_YEAR, SITE_TITLE } from "../consts"; 8 + import MainContainer from "../components/MainContainer.astro"; 9 9 10 10 type Props = CollectionEntry<"blog">["data"]; 11 11 ··· 18 18 <meta name="fediverse:creator" content="@vixalientoots@mas.to" /> 19 19 </head> 20 20 21 - <body class="overflow-yes"> 22 - { 23 - hero_image && ( 24 - <ImageContainer image={hero_image} invert={false}> 25 - <Fragment slot="top"> 26 - <Header title={SITE_TITLE} /> 27 - </Fragment> 28 - <Fragment slot="bottom"> 29 - <PostInfo 30 - title={title} 31 - description={description} 32 - publish_date={publish_date} 33 - tags={tags} 34 - /> 35 - </Fragment> 36 - </ImageContainer> 37 - ) 38 - } 39 - <main class="container"> 21 + <body> 22 + <MainContainer> 23 + <Header title="vixalien´s blog" href="/blog" /> 24 + <PostInfo 25 + title={title} 26 + description={description} 27 + publish_date={publish_date} 28 + tags={tags} 29 + /> 40 30 { 41 - !hero_image && ( 42 - <> 43 - <Header title={SITE_TITLE} /> 44 - <PostInfo 45 - title={title} 46 - description={description} 47 - publish_date={publish_date} 48 - tags={tags} 49 - /> 50 - <hr /> 51 - <br /> 52 - </> 31 + hero_image ? ( 32 + <img 33 + class="rounded-lg" 34 + src={hero_image} 35 + alt="Banner Image for post" 36 + /> 37 + ) : ( 38 + <hr /> 53 39 ) 54 40 } 41 + <br /> 55 42 <article> 56 43 <slot /> 57 44 </article> 45 + <br /> 58 46 <hr /> 59 47 <br /> 60 48 <span> ··· 70 58 ) 71 59 } 72 60 </span> 73 - </main> 61 + </MainContainer> 74 62 </body> 75 63 </html>
+3 -2
src/pages/404.astro
··· 3 3 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts"; 4 4 import Intro from "../components/Intro.astro"; 5 5 import Header from "../components/Header.astro"; 6 + import MainContainer from "../components/MainContainer.astro"; 6 7 --- 7 8 8 9 <!doctype html> ··· 14 15 /> 15 16 </head> 16 17 <body> 17 - <main class="container"> 18 + <MainContainer> 18 19 <Header title={SITE_TITLE} /> 19 20 <Intro title="404 - page not found" /> 20 21 <p>You're lost, but aren't we all? :)</p> 21 - </main> 22 + </MainContainer> 22 23 </body> 23 24 </html>
+26 -25
src/pages/blog.astro
··· 5 5 import PostsIndex from "../components/PostsIndex.astro"; 6 6 import ContactLinks from "../components/ContactLinks.astro"; 7 7 import Header from "../components/Header.astro"; 8 + import MainContainer from "../components/MainContainer.astro"; 8 9 --- 9 10 10 11 <!doctype html> 11 12 <html lang="en"> 12 - <head> 13 - <BaseHead title={`vixalien´s blog`} description={SITE_DESCRIPTION} /> 14 - </head> 15 - <body> 16 - <main class="container"> 17 - <Header title={SITE_TITLE} /> 18 - <Intro title={`vixalien´s blog`} /> 19 - <p> An archive of all my blog posts. </p> 20 - <h2>Posts</h2> 21 - <PostsIndex /> 13 + <head> 14 + <BaseHead title={`vixalien´s blog`} description={SITE_DESCRIPTION} /> 15 + </head> 16 + <body> 17 + <MainContainer> 18 + <Header title={SITE_TITLE} /> 19 + <Intro title={`vixalien´s blog`} /> 20 + <p>An archive of all my blog posts.</p> 21 + <h2>Posts</h2> 22 + <PostsIndex /> 22 23 23 - <footer> 24 - <a class="top" href="#top">↑ Scroll to Top</a> 25 - { 26 - ( 27 - <div> 28 - <br /> 29 - <span> 30 - &copy; {AUTHOR} {PUBLISH_YEAR} 31 - </span> 32 - </div> 33 - ) 34 - } 35 - </footer> 36 - </main> 37 - </body> 24 + <footer> 25 + <a class="top" href="#top">↑ Scroll to Top</a> 26 + { 27 + ( 28 + <div> 29 + <br /> 30 + <span> 31 + &copy; {AUTHOR} {PUBLISH_YEAR} 32 + </span> 33 + </div> 34 + ) 35 + } 36 + </footer> 37 + </MainContainer> 38 + </body> 38 39 </html>
+51 -72
src/pages/index.astro
··· 3 3 import { SITE_TITLE, SITE_DESCRIPTION, AUTHOR } from "../consts"; 4 4 import Intro from "../components/Intro.astro"; 5 5 import ContactLinks from "../components/ContactLinks.astro"; 6 + import MainContainer from "../components/MainContainer.astro"; 6 7 --- 7 8 8 9 <!doctype html> 9 10 <html lang="en"> 10 - <head> 11 - <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> 12 - </head> 13 - <body> 14 - <main class="container"> 15 - <header> 16 - <nav> 17 - <a href="/blog">blog</a> 18 - <a href="/portfolio">portfolio</a> 19 - <a href="https://memories.vixalien.com" target="_blank">memories &#8599;</a> 20 - </nav> 21 - </header> 22 - <Intro title={SITE_TITLE} /> 23 - <p> 24 - Hello! I'm Angelo Verlain, but you can call me <i>vixalien</i>. I am a 25 - web and GTK developer and this is my website, a collection of projects 26 - and writings. 27 - </p> 28 - <p> 29 - You'll mostly find me working on open-source projects, particularly 30 - involved with the GNOME Project, Alpine Linux and others. 31 - </p> 32 - <p> 33 - You can read about what I do by reading a few of my regular <a 34 - href="/blog">blog posts</a 35 - >, or see a list of projects I've worked on in the past by visiting my <a 36 - href="/portfolio">portfolio</a 37 - >. 38 - </p> 39 - <p> 40 - Also keep an eye on <a href="https://karabo.io">Karabo</a>, which is an 41 - upcoming start-up I'm working on to help improve organisational 42 - procedures in the region. 43 - </p> 44 - <h2 id="contact">Contact & Links</h2> 45 - <ContactLinks /> 46 - <footer> 47 - &copy; {AUTHOR} 48 - {new Date().getFullYear()} 49 - </footer> 50 - </main> 51 - </body> 11 + <head> 12 + <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> 13 + </head> 14 + <body> 15 + <MainContainer> 16 + <header> 17 + <nav> 18 + <ul 19 + class="flex-row list-none pl-0 gap-8 *:*:text-fg *:*:hover:text-link *:*:border-b" 20 + > 21 + <li><a href="/blog">blog</a></li> 22 + <li><a href="/portfolio">portfolio</a></li> 23 + <li> 24 + <a href="https://memories.vixalien.com" target="_blank" 25 + >memories &#8599;</a 26 + > 27 + </li> 28 + </ul> 29 + </nav> 30 + </header> 31 + <Intro title={SITE_TITLE} /> 32 + <p> 33 + Hello! I'm Angelo Verlain, but you can call me <i>vixalien</i>. I am a 34 + web and GTK developer and this is my website, a collection of projects 35 + and writings. 36 + </p> 37 + <p> 38 + You'll mostly find me working on open-source projects, particularly 39 + involved with the GNOME Project, Alpine Linux and others. 40 + </p> 41 + <p> 42 + You can read about what I do by reading a few of my regular <a 43 + href="/blog">blog posts</a 44 + >, or see a list of projects I've worked on in the past by visiting my <a 45 + href="/portfolio">portfolio</a 46 + >. 47 + </p> 48 + <p> 49 + Also keep an eye on <a href="https://karabo.io">Karabo</a>, which is an 50 + upcoming start-up I'm working on to help improve organisational 51 + procedures in the region. 52 + </p> 53 + <h2 id="contact">Contact & Links</h2> 54 + <ContactLinks /> 55 + <footer> 56 + &copy; {AUTHOR} 57 + {new Date().getFullYear()} 58 + </footer> 59 + </MainContainer> 60 + </body> 52 61 </html> 53 - 54 - <style> 55 - .heading { 56 - display: flex; 57 - justify-content: space-between; 58 - align-items: center; 59 - } 60 - 61 - nav { 62 - padding: 0; 63 - display: flex; 64 - gap: 2rem; 65 - list-style-type: none; 66 - margin: 0; 67 - } 68 - 69 - /* nav ul li { 70 - margin: 0; 71 - line-height: 1; 72 - } */ 73 - 74 - nav a { 75 - border-bottom: 1px solid; 76 - display: inline-block; 77 - } 78 - 79 - nav a:hover { 80 - color: var(--heading-fg); 81 - } 82 - </style>
+3 -2
src/pages/portfolio.astro
··· 4 4 import Intro from "../components/Intro.astro"; 5 5 import Header from "../components/Header.astro"; 6 6 import ProjectsIndex from "../components/ProjectsIndex.astro"; 7 + import MainContainer from "../components/MainContainer.astro"; 7 8 --- 8 9 9 10 <!doctype html> ··· 12 13 <BaseHead title={`vixalien´s portfolio`} description={SITE_DESCRIPTION} /> 13 14 </head> 14 15 <body> 15 - <main class="container"> 16 + <MainContainer> 16 17 <Header title={SITE_TITLE} /> 17 18 <Intro title={`vixalien´s portfolio`} /> 18 19 <p>Personal projects I've worked on in the past.</p> ··· 36 37 ) 37 38 } 38 39 </footer> 39 - </main> 40 + </MainContainer> 40 41 </body> 41 42 </html>
+78 -387
src/styles/global.css
··· 1 - html { 2 - --secondary: #666; 3 - --fg: #333; 4 - --bg: #fff; 5 - --heading-fg: #000; 6 - --link: #0169ec; 7 - color-scheme: light dark; 8 - } 1 + @import "tailwindcss"; 9 2 10 - @media (prefers-color-scheme: dark) { 11 - html { 12 - --secondary: #8e8e8e; 13 - --fg: #a0a0a0; 14 - --bg: #030f1b; 15 - --heading-fg: #fff; 16 - --link: #5a99ff; 17 - } 18 - } 3 + @theme { 4 + --font-sans: "Atkinson Hyperlegible"; 19 5 20 - ol, ul, menu { 21 - list-style: initial; 6 + --color-fg: #333; 7 + --color-bg: #fff; 8 + --color-heading: #000; 9 + --color-link: #0169ec; 22 10 } 23 11 24 - :root { 25 - /* Paddings */ 26 - --padding-top: 30px; 27 - --padding-bottom: 30px; 28 - --padding-right: 20px; 29 - --padding-left: 20px; 30 - --max-width: 620px; 31 - /* Box shadow */ 32 - --box-shadow: 0 0 0px 3px #bac7d4; 33 - } 12 + @layer base { 13 + html { 14 + @apply scroll-smooth; 15 + } 34 16 35 - *, 36 - *::before, 37 - *::after { 38 - box-sizing: border-box; 39 - } 17 + body { 18 + @apply text-fg; 19 + } 40 20 41 - html { 42 - font-family: 43 - system-ui, 44 - /* macOS 10.11-10.12 */ -apple-system, 45 - /* Windows 6+ */ "Segoe UI", 46 - /* Android 4+ */ "Roboto", 47 - /* Ubuntu 10.10+ */ "Ubuntu", 48 - /* Gnome 3+ */ "Cantarell", 49 - /* KDE Plasma 5+ */ "Noto Sans", 50 - /* fallback */ sans-serif, 51 - /* macOS emoji */ "Apple Color Emoji", 52 - /* Windows emoji */ "Segoe UI Emoji", 53 - /* Windows emoji */ "Segoe UI Symbol", 54 - /* Linux emoji */ "Noto Color Emoji"; 55 - } 21 + a { 22 + @apply text-link border-b hover:text-fg; 23 + } 56 24 57 - html, 58 - body { 59 - padding: 0; 60 - margin: 0; 61 - color: var(--fg); 62 - background-color: var(--bg); 63 - scroll-behavior: smooth; 64 - } 25 + p, 26 + ol, 27 + ul, 28 + dl, 29 + table { 30 + @apply mb-6; 31 + } 65 32 66 - h1, 67 - h2, 68 - h3, 69 - h4, 70 - h5 { 71 - margin: 0 0 1rem 0; 72 - font-weight: 600; 73 - color: var(--heading-fg); 74 - } 33 + h1, 34 + h2, 35 + h3, 36 + h4, 37 + h5, 38 + h6 { 39 + @apply text-heading font-bold mb-4; 40 + } 75 41 76 - p, 77 - ol, 78 - ul, 79 - dl, 80 - table { 81 - margin: 0 0 1.5rem 0; 82 - line-height: 1.5; 83 - } 42 + h1 { 43 + @apply text-4xl; 44 + } 84 45 85 - ul { 86 - list-style: "– "; 87 - } 46 + h2 { 47 + @apply text-3xl; 48 + } 88 49 89 - li { 90 - margin-bottom: 5px; 91 - } 92 - 93 - hr { 94 - margin: 0; 95 - border: 0; 96 - border-top: 1px solid var(--secondary); 97 - } 98 - 99 - a { 100 - color: var(--link); 101 - text-decoration: none; 102 - border-bottom: 1px inset transparent; 103 - } 104 - 105 - a:hover, 106 - a:focus, 107 - a:active { 108 - border-bottom-color: currentColor; 109 - } 110 - 111 - .overflow-yes .block-code, 112 - .overflow-yes pre.not-code, 113 - .overflow-yes article img { 114 - display: block; 115 - margin: 30px 0; 116 - width: fit-content; 117 - margin-left: 50%; 118 - transform: translateX(-50%); 119 - min-width: 100%; 120 - max-width: calc(100vw - calc(var(--padding-right) + var(--padding-left))); 121 - } 50 + h3 { 51 + @apply text-2xl; 52 + } 122 53 123 - .container { 124 - max-width: var(--max-width); 125 - padding: 30px 20px; 126 - width: 100%; 127 - margin: auto; 128 - } 54 + h4 { 55 + @apply text-xl; 56 + } 129 57 130 - .footer { 131 - margin-top: 30px; 132 - } 133 - 134 - .footer hr { 135 - padding-bottom: 20px; 136 - } 58 + h5 { 59 + @apply text-lg; 60 + } 137 61 138 - .footer a.top { 139 - color: inherit; 140 - display: inline-block; 141 - margin: 10px 0; 142 - } 62 + ul { 63 + @apply list-["–__"] pl-10 flex flex-col gap-2; 64 + } 143 65 144 - header a { 145 - color: inherit; 146 - border-bottom-style: none; 147 - } 66 + ol { 67 + @apply list-decimal pl-10 flex flex-col gap-2; 68 + } 148 69 149 - header a:hover { 150 - border-bottom-style: solid; 151 - } 70 + pre { 71 + @apply bg-transparent! my-4; 72 + } 152 73 153 - article img { 154 - max-width: 100%; 155 - margin: auto; 156 - display: flex; 157 - border-radius: 6px; 158 - box-sizing: content-box; 159 - } 74 + code { 75 + @apply text-sm rounded; 76 + } 160 77 161 - /* .overflow-yes article img { 162 - max-width: unset; 163 - } */ 78 + code:not(pre code) { 79 + @apply px-1 border; 80 + } 164 81 165 - .block-image .text { 166 - text-align: center; 167 - margin-top: 10px; 168 - color: var(--secondary); 169 - } 82 + pre code { 83 + @apply block p-2 bg-[#0a1826] text-[#b2b6bb]; 84 + } 170 85 171 - .block-image .text a { 172 - color: inherit; 86 + blockquote { 87 + @apply my-12 py-3 border-y-4 border-double *:mb-0; 88 + } 173 89 } 174 90 175 - .block-image .text a:hover, 176 - .block-image .text a:focus { 177 - color: var(--link); 91 + @font-face { 92 + font-family: "Atkinson Hyperlegible"; 93 + src: url("/fonts/atkinson-regular.woff") format("woff"); 94 + font-weight: 400; 95 + font-style: normal; 178 96 } 179 97 180 - .intro { 181 - margin: 50px 0 20px; 182 - } 183 - 184 - .intro h1 { 185 - margin-bottom: 0; 186 - } 187 - 188 - .tags a { 189 - color: inherit; 190 - } 191 - 192 - .link-with-icon { 193 - display: inline-flex; 194 - gap: 4px; 195 - align-items: center; 196 - vertical-align: text-top; 197 - } 198 - 199 - .intro-meta { 200 - font-weight: bold; 201 - } 202 - 203 - a.tags { 204 - border-bottom-style: dotted; 205 - border-bottom-color: inherit; 206 - } 207 - 208 - a.tags:focus, 209 - a.tags:hover, 210 - a.tags:focus { 211 - border-bottom-style: solid; 212 - font-weight: bold; 213 - } 214 - 215 - h1 { 216 - /* font-size: 2.8em; */ 217 - font-weight: 800; 218 - letter-spacing: -1px; 219 - } 220 - 221 - a:has(code) { 222 - border: none; 223 - } 224 - a:has(code):is(:hover, :focus, :active) code { 225 - background-color: var(--link); 226 - color: var(--bg); 227 - border-color: var(--link); 228 - } 229 - 230 - table { 231 - border-collapse: collapse; 232 - min-width: 100%; 233 - font-size: 0.85rem; 234 - } 235 - 236 - th, 237 - td { 238 - padding: 0.5rem; 239 - text-align: start; 240 - } 241 - 242 - th { 243 - border-color: var(--heading-fg); 244 - color: var(--heading-fg); 245 - } 246 - 247 - th, 248 - tr:not(:last-of-type) td { 249 - border-bottom: 1px solid; 250 - } 251 - 252 - .image-container { 253 - --background-color: rgba(0, 0, 0, 0.33); 254 - --text: #fff; 255 - display: flex; 256 - flex-direction: column; 257 - overflow: hidden; 258 - } 259 - 260 - .image-container .inner-container { 261 - padding: 20px 20px 0; 262 - } 263 - 264 - .image-container .intro { 265 - margin-top: 20px; 266 - } 267 - 268 - .image-container, 269 - .inner-container { 270 - z-index: 0; 271 - } 272 - 273 - .image-container.invert { 274 - --background-color: rgba(255, 255, 255, 0.13); 275 - /* a very weird firefox bug */ 276 - --text: #001; 277 - } 278 - 279 - @media screen and (max-width: 600px) { 280 - .image-container .stack .read-link { 281 - display: none; 282 - } 283 - 284 - .image-container img { 285 - margin-top: 50px; 286 - width: 100%; 287 - border-radius: 6px; 288 - } 289 - } 290 - 291 - @media screen and (min-width: 600px) { 292 - .image-container .stack hr { 293 - display: none; 294 - } 295 - 296 - .image-container { 297 - position: relative; 298 - height: 100vh; 299 - } 300 - 301 - .image-container .inner-container { 302 - padding-bottom: 0; 303 - display: flex; 304 - flex-direction: column; 305 - height: 100%; 306 - justify-content: space-between; 307 - } 308 - 309 - .image-container img { 310 - position: absolute; 311 - left: 0; 312 - top: 0; 313 - z-index: -2; 314 - height: 100vh; 315 - width: 100vw; 316 - object-fit: cover; 317 - margin: 0; 318 - } 319 - 320 - .image-container .top > header > nav > a { 321 - color: var(--text); 322 - font-size: xx-large; 323 - font-weight: 900; 324 - border-bottom-width: 3px; 325 - box-shadow: 0 0 100px 100px var(--background-color); 326 - background-color: var(--background-color); 327 - } 328 - 329 - .image-container .bottom { 330 - color: var(--text); 331 - box-shadow: 0 0 100px 100px var(--background-color); 332 - background-color: var(--background-color); 333 - } 334 - 335 - .image-container .read-link { 336 - color: inherit; 337 - border-bottom-width: 2px; 338 - font-weight: bold; 339 - } 340 - 341 - .image-container h1 { 342 - color: inherit; 343 - } 344 - } 345 - 346 - code, 347 - kbd, 348 - samp, 349 - pre { 350 - font-family: 351 - /* macOS 10.10+ */ "Menlo", 352 - /* Windows 6+ */ "Consolas", 353 - /* Android 4+ */ "Roboto Mono", 354 - /* Ubuntu 10.10+ */ "Ubuntu Monospace", 355 - /* KDE Plasma 5+ */ "Noto Mono", 356 - /* KDE Plasma 4+ */ "Oxygen Mono", 357 - /* Linux/OpenOffice fallback */ "Liberation Mono", 358 - /* fallback */ monospace, 359 - /* macOS emoji */ "Apple Color Emoji", 360 - /* Windows emoji */ "Segoe UI Emoji", 361 - /* Windows emoji */ "Segoe UI Symbol", 362 - /* Linux emoji */ "Noto Color Emoji"; 363 - } 364 - 365 - blockquote { 366 - margin: 3em 0; 367 - padding: 10px 0; 368 - border-width: 4px 0; 369 - border-style: double; 370 - } 371 - 372 - blockquote p { 373 - margin: 0; 374 - } 375 - 376 - code { 377 - padding: 0 5px; 378 - font-size: 0.9em; 379 - border: 1px solid; 380 - border-radius: 5px; 381 - line-height: 1; 382 - } 383 - 384 - pre:not(.not-code) code { 385 - display: block; 386 - padding: 10px; 387 - color: #b2b6bb; 388 - background-color: #0a1826; 389 - border: 0; 390 - line-height: 1.5; 391 - } 392 - 393 - code, 394 - pre { 395 - text-align: left; 396 - white-space: pre; 397 - word-spacing: normal; 398 - word-break: normal; 399 - word-wrap: normal; 400 - -moz-tab-size: 2; 401 - -o-tab-size: 2; 402 - tab-size: 2; 403 - -webkit-hyphens: none; 404 - -moz-hyphens: none; 405 - -ms-hyphens: none; 406 - hyphens: none; 407 - overflow: auto; 408 - } 409 - 410 - pre { 411 - background-color: transparent !important; 98 + @font-face { 99 + font-family: "Atkinson Hyperlegible"; 100 + src: url("/fonts/atkinson-bold.woff") format("woff"); 101 + font-weight: 700; 102 + font-style: normal; 412 103 }