Styled everything and build the skeleton

cyperpunk.de/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Ryan L McIntyre
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

cyperpunk.de/astro.config.mjs

@@ -1,5 +1,16 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import remarkGithubAlerts from 'remark-github-alerts';
+import rehypeSlug from 'rehype-slug';
+import tailwindcss from '@tailwindcss/vite';
 
-// https://astro.build/config
+export default defineConfig({
-export default defineConfig({});
+  site: 'https://cyperpunk.de',
+  vite: {
+    plugins: [tailwindcss()]
+  },
+  markdown: {
+    remarkPlugins: [remarkGithubAlerts],
+    rehypePlugins: [rehypeSlug],
+  },
+});

cyperpunk.de/package.json

@@ -12,6 +12,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^6.4.0"
+    "@astrojs/rss": "^4.0.18",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.3.0",
+    "astro": "^6.4.0",
+    "rehype-slug": "^6.0.0",
+    "remark-github-alerts": "^0.1.1",
+    "tailwindcss": "^4.3.0"
   }
 }

cyperpunk.de/pnpm-lock.yaml

@@ -8,9 +8,27 @@ importers:
 
   .:
     dependencies:
+      '@astrojs/rss':
+        specifier: ^4.0.18
+        version: 4.0.18
+      '@tailwindcss/typography':
+        specifier: ^0.5.19
+        version: 0.5.19(tailwindcss@4.3.0)
+      '@tailwindcss/vite':
+        specifier: ^4.3.0
+        version: 4.3.0(vite@7.3.3(jiti@2.7.0)(lightningcss@1.32.0))
       astro:
         specifier: ^6.4.0
-        version: 6.4.0(rollup@4.60.4)
+        version: 6.4.0(jiti@2.7.0)(lightningcss@1.32.0)(rollup@4.60.4)
+      rehype-slug:
+        specifier: ^6.0.0
+        version: 6.0.0
+      remark-github-alerts:
+        specifier: ^0.1.1
+        version: 0.1.1(@types/mdast@4.0.4)(unified@11.0.5)
+      tailwindcss:
+        specifier: ^4.3.0
+        version: 4.3.0
 
 packages:
 
@@ -27,6 +45,9 @@ packages:
     resolution: {integrity: sha512-KTivpmnz6lDsC6o9H4+DNm2SrE/GHzw8cNAvEJwAvUT+eoaEnn/4NtbDNfRRaxaJHdp15gf+tfHAWiXR4wB3BA==}
     engines: {node: '>=22.12.0'}
 
+  '@astrojs/rss@4.0.18':
+    resolution: {integrity: sha512-wc5DwKlbTEdgVAWnHy8krFTeQ42t1v/DJqeq5HtulYK3FYHE4krtRGjoyhS3eXXgfdV6Raoz2RU3wrMTFAitRg==}
+
   '@astrojs/telemetry@3.3.2':
     resolution: {integrity: sha512-j8DNruA8ors99Al39RYZPJK4DC1bKkoNm93mAMuBhY9TCNC4R8n1q7ovFnJ5qhGh5Lsh7pa1gpQVpYpsJPeTHQ==}
     engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
@@ -372,9 +393,25 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@nodable/entities@2.1.1':
+    resolution: {integrity: sha512-Pig3HxDIoMgjdEH8OCf/dkcTmLFjJRjWuq8jSnklu284/TKOPibSRERmOykiwmyXTtv61mP+44f3GMx0tLAyjg==}
+
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
@@ -556,6 +593,105 @@ packages:
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
+  '@tailwindcss/node@4.3.0':
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.0':
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
+  '@tailwindcss/vite@4.3.0':
+    resolution: {integrity: sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
   '@types/debug@4.1.13':
     resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
@@ -672,6 +808,11 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -729,6 +870,10 @@ packages:
     resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
     engines: {node: '>=4'}
 
+  enhanced-resolve@5.23.0:
+    resolution: {integrity: sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -767,6 +912,13 @@ packages:
   fast-wrap-ansi@0.2.2:
     resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
 
+  fast-xml-builder@1.2.0:
+    resolution: {integrity: sha512-00aAWieqff+ZJhsXA4g1g7M8k+7AYoMUUHF+/zFb5U6Uv/P0Vl4QZo84/IcufzYalLuEj9928bXN9PbbFzMF0Q==}
+
+  fast-xml-parser@5.8.0:
+    resolution: {integrity: sha512-6bIM7fsJxeo3uXv7OncQYsBAMPJ7V16Slahl/6M98C/i2q+vB1+4a0MtrvYwDFEUrwDSbAmeLDRXsOBwrL7yAg==}
+    hasBin: true
+
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -799,6 +951,9 @@ packages:
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   h3@1.15.11:
     resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
 
@@ -808,6 +963,9 @@ packages:
   hast-util-from-parse5@8.0.3:
     resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
 
+  hast-util-heading-rank@3.0.0:
+    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
+
   hast-util-is-element@3.0.0:
     resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
 
@@ -823,6 +981,9 @@ packages:
   hast-util-to-parse5@8.0.1:
     resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
 
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+
   hast-util-to-text@4.0.2:
     resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
 
@@ -867,6 +1028,10 @@ packages:
     resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
     engines: {node: '>=16'}
 
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
   js-yaml@4.1.1:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
@@ -874,6 +1039,80 @@ packages:
   jsonc-parser@3.3.1:
     resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -1087,6 +1326,10 @@ packages:
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
+  path-expression-matcher@1.5.0:
+    resolution: {integrity: sha512-cbrerZV+6rvdQrrD+iGMcZFEiiSrbv9Tfdkvnusy6y0x0GKBXREFg/Y65GhIfm0tnLntThhzCnfKwp1WRjeCyQ==}
+    engines: {node: '>=14.0.0'}
+
   piccolore@0.1.3:
     resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
 
@@ -1101,6 +1344,10 @@ packages:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss@8.5.15:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1134,6 +1381,9 @@ packages:
   rehype-raw@7.0.0:
     resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
 
+  rehype-slug@6.0.0:
+    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
+
   rehype-stringify@10.0.1:
     resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
@@ -1143,6 +1393,12 @@ packages:
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
+  remark-github-alerts@0.1.1:
+    resolution: {integrity: sha512-A0NLfeAuu76ymiGIoEoBcHmqlPcdLFq+FoCGiWlzu8vkyhscyDv+pAkMA9paGr+OHpzpFflZKnsqOCvMESG/Uw==}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
@@ -1210,11 +1466,21 @@ packages:
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
+  strnum@2.3.0:
+    resolution: {integrity: sha512-ums3KNd42PGyx5xaoVTO1mjU1bH3NpY4vsrVlnv9PNGqQj8wd7rJ6nEypLrJ7z5vxK5RP0yMLo6J/Gsm62DI5Q==}
+
   svgo@4.0.1:
     resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==}
     engines: {node: '>=16'}
     hasBin: true
 
+  tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
@@ -1343,6 +1609,9 @@ packages:
       uploadthing:
         optional: true
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -1407,6 +1676,10 @@ packages:
     resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
     engines: {node: '>=4'}
 
+  xml-naming@0.1.0:
+    resolution: {integrity: sha512-k8KO9hrMyNk6tUWqUfkTEZbezRRpONVOzUTnc97VnCvyj6Tf9lyUR9EDAIeiVLv56jsMcoXEwjW8Kv5yPY52lw==}
+    engines: {node: '>=16.0.0'}
+
   xxhash-wasm@1.1.0:
     resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
 
@@ -1465,6 +1738,12 @@ snapshots:
     dependencies:
       prismjs: 1.30.0
 
+  '@astrojs/rss@4.0.18':
+    dependencies:
+      fast-xml-parser: 5.8.0
+      piccolore: 0.1.3
+      zod: 4.4.3
+
   '@astrojs/telemetry@3.3.2':
     dependencies:
       ci-info: 4.4.0
@@ -1682,8 +1961,27 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@nodable/entities@2.1.1': {}
+
   '@oslojs/encoding@1.1.0': {}
 
   '@rollup/pluginutils@5.3.0(rollup@4.60.4)':
@@ -1809,6 +2107,79 @@ snapshots:
 
   '@shikijs/vscode-textmate@10.0.2': {}
 
+  '@tailwindcss/node@4.3.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.23.0
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.0
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+
+  '@tailwindcss/typography@0.5.19(tailwindcss@4.3.0)':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.3.0
+
+  '@tailwindcss/vite@4.3.0(vite@7.3.3(jiti@2.7.0)(lightningcss@1.32.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      tailwindcss: 4.3.0
+      vite: 7.3.3(jiti@2.7.0)(lightningcss@1.32.0)
+
   '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
@@ -1846,7 +2217,7 @@ snapshots:
 
   array-iterate@2.0.1: {}
 
-  astro@6.4.0(rollup@4.60.4):
+  astro@6.4.0(jiti@2.7.0)(lightningcss@1.32.0)(rollup@4.60.4):
     dependencies:
       '@astrojs/compiler': 4.0.0
       '@astrojs/internal-helpers': 0.10.0
@@ -1898,8 +2269,8 @@ snapshots:
       unist-util-visit: 5.1.0
       unstorage: 1.17.5
       vfile: 6.0.3
-      vite: 7.3.3
+      vite: 7.3.3(jiti@2.7.0)(lightningcss@1.32.0)
-      vitefu: 1.1.3(vite@7.3.3)
+      vitefu: 1.1.3(vite@7.3.3(jiti@2.7.0)(lightningcss@1.32.0))
       xxhash-wasm: 1.1.0
       yargs-parser: 22.0.0
       zod: 4.4.3
@@ -1995,6 +2366,8 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  cssesc@3.0.0: {}
+
   csso@5.0.5:
     dependencies:
       css-tree: 2.2.1
@@ -2013,8 +2386,7 @@ snapshots:
 
   destr@2.0.5: {}
 
-  detect-libc@2.1.2:
+  detect-libc@2.1.2: {}
-    optional: true
 
   devalue@5.8.1: {}
 
@@ -2044,6 +2416,11 @@ snapshots:
 
   dset@3.1.4: {}
 
+  enhanced-resolve@5.23.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
   entities@4.5.0: {}
 
   entities@6.0.1: {}
@@ -2097,6 +2474,19 @@ snapshots:
     dependencies:
       fast-string-width: 3.0.2
 
+  fast-xml-builder@1.2.0:
+    dependencies:
+      path-expression-matcher: 1.5.0
+      xml-naming: 0.1.0
+
+  fast-xml-parser@5.8.0:
+    dependencies:
+      '@nodable/entities': 2.1.1
+      fast-xml-builder: 1.2.0
+      path-expression-matcher: 1.5.0
+      strnum: 2.3.0
+      xml-naming: 0.1.0
+
   fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
       picomatch: 4.0.4
@@ -2120,6 +2510,8 @@ snapshots:
 
   github-slugger@2.0.0: {}
 
+  graceful-fs@4.2.11: {}
+
   h3@1.15.11:
     dependencies:
       cookie-es: 1.2.3
@@ -2152,6 +2544,10 @@ snapshots:
       vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
+  hast-util-heading-rank@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   hast-util-is-element@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -2200,6 +2596,10 @@ snapshots:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
+  hast-util-to-string@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+
   hast-util-to-text@4.0.2:
     dependencies:
       '@types/hast': 3.0.4
@@ -2241,12 +2641,63 @@ snapshots:
     dependencies:
       is-inside-container: 1.0.0
 
+  jiti@2.7.0: {}
+
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
 
   jsonc-parser@3.3.1: {}
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   longest-streak@3.1.0: {}
 
   lru-cache@11.5.0: {}
@@ -2644,6 +3095,8 @@ snapshots:
     dependencies:
       entities: 6.0.1
 
+  path-expression-matcher@1.5.0: {}
+
   piccolore@0.1.3: {}
 
   picocolors@1.1.1: {}
@@ -2652,6 +3105,11 @@ snapshots:
 
   picomatch@4.0.4: {}
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.5.15:
     dependencies:
       nanoid: 3.3.12
@@ -2688,6 +3146,14 @@ snapshots:
       hast-util-raw: 9.1.0
       vfile: 6.0.3
 
+  rehype-slug@6.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      github-slugger: 2.0.0
+      hast-util-heading-rank: 3.0.0
+      hast-util-to-string: 3.0.1
+      unist-util-visit: 5.1.0
+
   rehype-stringify@10.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -2712,6 +3178,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-github-alerts@0.1.1(@types/mdast@4.0.4)(unified@11.0.5):
+    dependencies:
+      '@types/mdast': 4.0.4
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -2860,6 +3332,8 @@ snapshots:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
 
+  strnum@2.3.0: {}
+
   svgo@4.0.1:
     dependencies:
       commander: 11.1.0
@@ -2870,6 +3344,10 @@ snapshots:
       picocolors: 1.1.1
       sax: 1.6.0
 
+  tailwindcss@4.3.0: {}
+
+  tapable@2.3.3: {}
+
   tiny-inflate@1.0.3: {}
 
   tinyclip@0.1.13: {}
@@ -2963,6 +3441,8 @@ snapshots:
       ofetch: 1.5.1
       ufo: 1.6.4
 
+  util-deprecate@1.0.2: {}
+
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -2978,7 +3458,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite@7.3.3:
+  vite@7.3.3(jiti@2.7.0)(lightningcss@1.32.0):
     dependencies:
       esbuild: 0.27.7
       fdir: 6.5.0(picomatch@4.0.4)
@@ -2988,15 +3468,19 @@ snapshots:
       tinyglobby: 0.2.16
     optionalDependencies:
       fsevents: 2.3.3
+      jiti: 2.7.0
+      lightningcss: 1.32.0
 
-  vitefu@1.1.3(vite@7.3.3):
+  vitefu@1.1.3(vite@7.3.3(jiti@2.7.0)(lightningcss@1.32.0)):
     optionalDependencies:
-      vite: 7.3.3
+      vite: 7.3.3(jiti@2.7.0)(lightningcss@1.32.0)
 
   web-namespaces@2.0.1: {}
 
   which-pm-runs@1.1.0: {}
 
+  xml-naming@0.1.0: {}
+
   xxhash-wasm@1.1.0: {}
 
   yargs-parser@22.0.0: {}

cyperpunk.de/src/components/Sidebar.astro

@@ -1,24 +1,61 @@
 ---
+const links = [
+  { label: "github", href: "https://github.com/DerGrumpf", icon: "/github.png" },
+  { label: "gitea", href: "https://git.cyperpunk.de", icon: "/git.png" },
+  { label: "instagram", href: "https://www.instagram.com/dergrumpf/", icon: "/instagram.png" },
+  { label: "matrix", href: "https://matrix.to/#/@dergrumpf:cyperpunk.de", icon: "/matrix.png" },
+  { label: "spotify", href: "https://open.spotify.com/user/fackthatshiet?si=d502739d787e497e", icon: "/spotify.png" },
+  { label: "rss",   href: "/rss.xml",                 icon: "/rss.png"   },
+];
 ---
+<div id="sidebar-inner" class="flex flex-col h-full px-4 py-6 gap-6 w-56 bg-ctp-mantle border-r border-ctp-surface">
 
-<div id="sidebar-inner">
+  <div id="profile" class="flex flex-col items-center gap-2 text-center">
-  <div id="profile">
+    <img src="/avatar.jpg" alt="Phil Keier" class="w-full rounded-full object-cover" />
-    <div id="avatar">CP</div>
+    <div id="profile-name" class="px-4">
-	<div id="profile-name">Phil Keier | DerGrumpf</div>
+      <div class="text-ctp-text text-xl font-bold">Phil Keier</div>
-	<div id="profile-tagline">Media Scientist, Programmer, Linux Enthutiast</div>
+      <div class="text-ctp-subtext text-lg text-sm">DerGrumpf</div>
+    </div>
+    <div id="profile-tagline" class="text-ctp-subtext text-xs leading-snug">
+      Media Scientist, Programmer, Linux Enthusiast
+    </div>
   </div>
 
-  <div id="sidebar-links">
+  <div id="sidebar-links" class="flex flex-wrap gap-2 justify-center">
-    <a href="https://git.cyperpunk.de">gitea</a>
+  {links.map((link) => (
-    <a href="/rss.xml">rss</a>
+    <a href={link.href} class="flex items-center gap-2 text-ctp-subtext hover:text-ctp-accent text-sm transition-colors">
+      <img src={link.icon} alt={link.label} class="w-8 h-8 icon-mono" />
+    </a>
+   ))}
   </div>
 
-  <div id="sidebar-topics">
+  <div id="sidebar-topics" class="flex flex-col gap-2">
-    <span class="section-label">topics</span>
+    <span class="section-label text-ctp-overlay text-xs uppercase tracking-widest">topics</span>
-    <div id="tags">
+    <div id="tags" class="flex flex-wrap gap-1">
-      <span class="tag">Blog</span>
+      <span class="tag text-xs px-2 py-0.5 rounded-full bg-ctp-surface text-ctp-subtext hover:text-ctp-accent hover:bg-ctp-overlay cursor-pointer transition-colors">Blog</span>
-      <span class="tag">Git Projects</span>
+      <span class="tag text-xs px-2 py-0.5 rounded-full bg-ctp-surface text-ctp-subtext hover:text-ctp-accent hover:bg-ctp-overlay cursor-pointer transition-colors">Git Projects</span>
-      <span class="tag">Matrix</span>
+      <span class="tag text-xs px-2 py-0.5 rounded-full bg-ctp-surface text-ctp-subtext hover:text-ctp-accent hover:bg-ctp-overlay cursor-pointer transition-colors">Matrix</span>
     </div>
   </div>
+
+  <div id="theme-switcher" class="flex gap-2 mt-auto pt-4 border-t border-ctp-surface justify-center">
+    <button data-flavor="mocha"     class="theme-dot w-4 h-4 rounded-full bg-[#cba6f7] hover:scale-125 transition-transform" title="Mocha"></button>
+    <button data-flavor="macchiato" class="theme-dot w-4 h-4 rounded-full bg-[#c6a0f6] hover:scale-125 transition-transform" title="Macchiato"></button>
+    <button data-flavor="frappe"    class="theme-dot w-4 h-4 rounded-full bg-[#ca9ee6] hover:scale-125 transition-transform" title="Frappé"></button>
+    <button data-flavor="latte"     class="theme-dot w-4 h-4 rounded-full bg-[#8839ef] hover:scale-125 transition-transform" title="Latte"></button>
+  </div>
+
 </div>
+
+<script>
+  const saved = localStorage.getItem('ctp-theme') ?? 'mocha';
+  document.documentElement.setAttribute('data-theme', saved);
+
+  document.querySelectorAll('.theme-dot').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const flavor = btn.getAttribute('data-flavor');
+      document.documentElement.setAttribute('data-theme', flavor);
+      localStorage.setItem('ctp-theme', flavor);
+    });
+  });
+</script>

cyperpunk.de/src/components/Topbar.astro

@@ -1,21 +1,19 @@
 ---
 const navItems = [
-  { label: "home", href: "/" },
+  { label: "Home",    href: "/" },
-  { label: "writing", href: "/writing" },
+  { label: "About",   href: "/about" },
-  { label: "talks", href: "/talks" },
-  { label: "about", href: "/about" },
 ];
 
 const currentPath = Astro.url.pathname;
 ---
 
-<div id="topbar-inner">
+<div id="topbar-inner" class="flex items-center justify-between px-6 h-12 bg-ctp-mantle border-b border-ctp-surface">
-  <span id="logo">cyper-site</span>
+  <span id="logo" class="text-ctp-accent font-semibold text-sm tracking-wide">Cyperpunk.de</span>
-  <nav>
+  <nav class="flex gap-6">
     {navItems.map((item) => (
 	  <a
         href={item.href}
-        class={currentPath === item.href ? "active" : ""}
+        class={`text-sm transition-colors ${currentPath === item.href ? "text-ctp-accent" : "text-ctp-subtext hover:text-ctp-text"}`}
       >
         {item.label}
       </a>

cyperpunk.de/src/content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const posts = defineCollection({
+  loader: glob({ pattern: '**/*.md', base: './src/content/posts' }),
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+	published: z.boolean().default(false),
+  }),
+});
+
+export const collections = { posts };

cyperpunk.de/src/content/posts/test.md

@@ -0,0 +1,107 @@
+---
+title: Markdown Test
+date: 2026-06-07
+published: true
+---
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+This is a normal paragraph with **bold text**, *italic text*, and `inline code`. You can also combine **_bold and italic_**.
+
+---
+
+> This is a blockquote. It can span multiple lines and is great for quoting someone or highlighting something important.
+
+---
+
+## Links and Images
+
+[Visit Gitea](https://git.cyperpunk.de)
+![Image](http://localhost:4321/avatar.jpg)
+
+---
+
+## Lists
+
+Unordered:
+
+- Item one
+- Item two
+  - Nested item
+  - Another nested item
+- Item three
+
+Ordered:
+
+1. First
+2. Second
+3. Third
+
+ToDo 
+- [ ] Task 1
+- [x] Task 2
+
+---
+
+## Code
+
+Inline: `pnpm dev`
+
+Block:
+
+```bash
+pnpm add @astrojs/rss
+pnpm dev
+pnpm build
+```
+
+```ts
+const posts = await getCollection('posts');
+posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+```
+
+---
+
+## Table
+
+| Name       | Role              | OS    |
+|------------|-------------------|-------|
+| DerGrumpf  | Media Scientist   | NixOS |
+| Phil       | Programmer        | Linux |
+
+---
+
+## Horizontal Rule
+
+Above this line is a horizontal rule.
+
+---
+
+~~Strikethrough text~~ is also supported.
+
+
+> [!NOTE]
+> This is a note.
+> >Test 
+
+> [!WARNING]
+> This is a warning.
+
+> [!TIP]
+> This is a tip.
+
+> [!IMPORTANT]
+> This is important.
+
+> [!CAUTION]
+> This is a caution.

cyperpunk.de/src/layouts/Base.astro

@@ -1,11 +1,13 @@
 ---
+import '../styles/global.css';
+
 interface Props {
   title: string;
 }
 const { title } = Astro.props;
 ---
 
-<html lang="en">
+<html lang="en" data-theme="mocha">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,16 +15,17 @@ const { title } = Astro.props;
     <link rel="icon" href="/favicon.svg" />
   </head>
   <body>
-    <nav id="topbar">
+    <nav id="topbar" class="fixed top-0 left-0 right-0 z-10">
 		<slot name="topbar" />
     </nav>
-    <div id="wrapper">
+
-      <main id="content">
+    <div id="wrapper" class="flex pt-12 min-h-screen">
-        <slot />
+		  <aside id="sidebar" class="fixed top-12 left-0 h-[calc(100vh-3rem)] w-56 shrink-0">
-      </main>
-      <aside id="sidebar">
 			<slot name="sidebar" />
 		  </aside>
+		  <main id="content" class="ml-56 flex-1 p-6">
+			<slot />
+		  </main>
 		</div>
   </body>
 </html>

cyperpunk.de/src/pages/index.astro

@@ -2,11 +2,20 @@
 import Base from "../layouts/Base.astro";
 import Topbar from "../components/Topbar.astro";
 import Sidebar from "../components/Sidebar.astro";
+import { getCollection } from 'astro:content';
+
+const posts = await getCollection('posts', ({ data }) => data.published === true);
+posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
 <Base title="home">
   <Topbar slot="topbar" />
   <Sidebar slot="sidebar" />
 
-  <h1>hello world</h1>
+  {posts.map((post) => (
+    <div class="p-4 mb-3 rounded-lg bg-ctp-surface">
+      <a href={`/posts/${post.id}`} class="text-ctp-accent">{post.data.title}</a>
+      <p class="text-ctp-subtext text-xs">{post.data.date.toDateString()}</p>
+    </div>
+  ))}
 </Base>

cyperpunk.de/src/pages/posts/[id].astro

@@ -0,0 +1,95 @@
+---
+import Base from '../../layouts/Base.astro';
+import Topbar from '../../components/Topbar.astro';
+import Sidebar from '../../components/Sidebar.astro';
+import { getCollection, render } from 'astro:content';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('posts');
+  return posts.map((post) => ({ params: { id: post.id }, props: { post } }));
+}
+
+const { post } = Astro.props;
+const { Content, headings } = await render(post);
+---
+
+<Base title={post.data.title}>
+  <Topbar slot="topbar" />
+  <Sidebar slot="sidebar" />
+
+  <article class="prose max-w-none">
+    <Content />
+  </article>
+
+  <div id="toc-container" class="fixed top-16 right-4 z-50">
+  <button id="toc-open" class="bg-ctp-surface text-ctp-accent p-2 rounded-lg hover:bg-ctp-overlay transition-colors" style="font-family: 'NerdFontsSymbols Nerd Font'" title="Table of contents">
+    
+  </button>
+  <div id="toc-box" class="hidden absolute right-0 top-10 bg-ctp-mantle border border-ctp-surface rounded-lg p-4 flex-col gap-1 w-56">
+    <span class="text-xs uppercase tracking-widest text-ctp-subtext mb-2">Table of Contents</span>
+    {headings.map((h) => (
+	<a 
+    href={'#' + h.slug}
+    class="text-sm transition-colors hover:text-ctp-accent"
+    style={`
+      padding-left: ${(h.depth - 1) * 0.75}rem;
+      color: ${h.depth === 1 ? 'var(--ctp-red)' : 
+               h.depth === 2 ? 'var(--ctp-peach)' : 
+               h.depth === 3 ? 'var(--ctp-yellow)' : 
+               h.depth === 4 ? 'var(--ctp-green)' : 
+               h.depth === 5 ? 'var(--ctp-blue)' : 
+               'var(--ctp-mauve)'};
+    `}
+     >
+     {h.text}
+     </a>
+    ))}
+    </div>
+  </div>
+
+  <script>
+    const open = document.getElementById('toc-open');
+    const toggle = document.getElementById('toc-toggle');
+    const box = document.getElementById('toc-box');
+
+    open?.addEventListener('click', () => {
+      box?.classList.toggle('hidden');
+      box?.classList.toggle('flex');
+    });
+
+    toggle?.addEventListener('click', () => {
+      box?.classList.add('hidden');
+      box?.classList.remove('flex');
+    });
+
+    document.addEventListener('click', (e) => {
+      if (!document.getElementById('toc-container')?.contains(e.target as Node)) {
+        box?.classList.add('hidden');
+        box?.classList.remove('flex');
+      }
+    });
+  </script>
+
+  <script>
+    document.querySelectorAll('article pre').forEach((pre) => {
+      const wrapper = document.createElement('div');
+      wrapper.style.position = 'relative';
+      wrapper.style.display = 'block';
+      pre.parentNode?.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+
+      const button = document.createElement('button');
+      button.textContent = '󰆏';
+      button.style.fontFamily = 'NerdFontsSymbols Nerd Font';
+      button.classList.add('copy-button');
+      wrapper.appendChild(button);
+
+      button.addEventListener('click', () => {
+        const code = pre.querySelector('code')?.innerText ?? '';
+        navigator.clipboard.writeText(code);
+        button.textContent = '󰄬';
+        setTimeout(() => button.textContent = '󰆏', 2000);
+      });
+    });
+  </script>
+</Base>

cyperpunk.de/src/pages/rss.xml.ts

@@ -0,0 +1,16 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+
+export async function GET(context) {
+  const posts = await getCollection('posts', ({ data }) => data.published === true);
+  return rss({
+    title: 'cyperpunk.de',
+    description: 'RSS Feed - DerGrumpf',
+    site: context.site,
+    items: posts.map((post) => ({
+      title: post.data.title,
+      pubDate: post.data.date,
+      link: `/posts/${post.id}`,
+    })),
+  });
+}

cyperpunk.de/src/styles/global.css

@@ -0,0 +1,530 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@font-face {
+  font-family: "NerdFontsSymbols Nerd Font";
+  src: url("/fonts/SymbolsNerdFont-Regular.ttf") format("truetype");
+}
+
+@theme {
+  /* base */
+  --color-ctp-base:       var(--ctp-base);
+  --color-ctp-mantle:     var(--ctp-mantle);
+  --color-ctp-crust:      var(--ctp-crust);
+  /* text */
+  --color-ctp-text:       var(--ctp-text);
+  --color-ctp-subtext1:   var(--ctp-subtext1);
+  --color-ctp-subtext0:   var(--ctp-subtext0);
+  --color-ctp-subtext:    var(--ctp-subtext);
+  /* surface */
+  --color-ctp-surface2:   var(--ctp-surface2);
+  --color-ctp-surface1:   var(--ctp-surface1);
+  --color-ctp-surface0:   var(--ctp-surface0);
+  --color-ctp-surface:    var(--ctp-surface);
+  /* overlay */
+  --color-ctp-overlay2:   var(--ctp-overlay2);
+  --color-ctp-overlay1:   var(--ctp-overlay1);
+  --color-ctp-overlay0:   var(--ctp-overlay0);
+  --color-ctp-overlay:    var(--ctp-overlay);
+  /* colors */
+  --color-ctp-rosewater:  var(--ctp-rosewater);
+  --color-ctp-flamingo:   var(--ctp-flamingo);
+  --color-ctp-pink:       var(--ctp-pink);
+  --color-ctp-mauve:      var(--ctp-mauve);
+  --color-ctp-red:        var(--ctp-red);
+  --color-ctp-maroon:     var(--ctp-maroon);
+  --color-ctp-peach:      var(--ctp-peach);
+  --color-ctp-yellow:     var(--ctp-yellow);
+  --color-ctp-green:      var(--ctp-green);
+  --color-ctp-teal:       var(--ctp-teal);
+  --color-ctp-sky:        var(--ctp-sky);
+  --color-ctp-sapphire:   var(--ctp-sapphire);
+  --color-ctp-blue:       var(--ctp-blue);
+  --color-ctp-lavender:   var(--ctp-lavender);
+  /* semantic */
+  --color-ctp-accent:     var(--ctp-accent);
+}
+
+[data-theme="mocha"] {
+  /* base */
+  --ctp-base:     #1e1e2e;
+  --ctp-mantle:   #181825;
+  --ctp-crust:    #11111b;
+  /* text */
+  --ctp-text:     #cdd6f4;
+  --ctp-subtext1: #bac2de;
+  --ctp-subtext0: #a6adc8;
+  /* surface */
+  --ctp-surface2: #585b70;
+  --ctp-surface1: #45475a;
+  --ctp-surface0: #313244;
+  /* overlay */
+  --ctp-overlay2: #7f849c;
+  --ctp-overlay1: #6c7086;
+  --ctp-overlay0: #6c7086;
+  /* colors */
+  --ctp-rosewater: #f5e0dc;
+  --ctp-flamingo:  #f2cdcd;
+  --ctp-pink:      #f38ba8;
+  --ctp-mauve:     #cba6f7;
+  --ctp-red:       #f38ba8;
+  --ctp-maroon:    #eba0ac;
+  --ctp-peach:     #fab387;
+  --ctp-yellow:    #f9e2af;
+  --ctp-green:     #a6e3a1;
+  --ctp-teal:      #94e2d5;
+  --ctp-sky:       #89dceb;
+  --ctp-sapphire:  #74c7ec;
+  --ctp-blue:      #89b4fa;
+  --ctp-lavender:  #b4befe;
+  /* semantic */
+  --ctp-subtext:  var(--ctp-subtext0);
+  --ctp-surface:  var(--ctp-surface0);
+  --ctp-overlay:  var(--ctp-overlay1);
+  --ctp-accent:   var(--ctp-mauve);
+}
+
+[data-theme="macchiato"] {
+  /* base */
+  --ctp-base:     #24273a;
+  --ctp-mantle:   #1e2030;
+  --ctp-crust:    #181926;
+  /* text */
+  --ctp-text:     #cad3f5;
+  --ctp-subtext1: #b8c0e0;
+  --ctp-subtext0: #a5adcb;
+  /* surface */
+  --ctp-surface2: #5b6078;
+  --ctp-surface1: #494d64;
+  --ctp-surface0: #363a4f;
+  /* overlay */
+  --ctp-overlay2: #939ab7;
+  --ctp-overlay1: #8087a2;
+  --ctp-overlay0: #6e738d;
+  /* colors */
+  --ctp-rosewater: #f4dbd6;
+  --ctp-flamingo:  #f0c6c6;
+  --ctp-pink:      #f5bde6;
+  --ctp-mauve:     #c6a0f6;
+  --ctp-red:       #ed8796;
+  --ctp-maroon:    #ee99a0;
+  --ctp-peach:     #f5a97f;
+  --ctp-yellow:    #eed49f;
+  --ctp-green:     #a6da95;
+  --ctp-teal:      #8bd5ca;
+  --ctp-sky:       #91d7e3;
+  --ctp-sapphire:  #7dc4e4;
+  --ctp-blue:      #8aadf4;
+  --ctp-lavender:  #b7bdf8;
+  /* semantic */
+  --ctp-subtext:  var(--ctp-subtext0);
+  --ctp-surface:  var(--ctp-surface0);
+  --ctp-overlay:  var(--ctp-overlay1);
+  --ctp-accent:   var(--ctp-mauve);
+}
+
+[data-theme="frappe"] {
+  /* base */
+  --ctp-base:     #303446;
+  --ctp-mantle:   #292c3c;
+  --ctp-crust:    #232634;
+  /* text */
+  --ctp-text:     #c6d0f5;
+  --ctp-subtext1: #b5bfe2;
+  --ctp-subtext0: #a5adce;
+  /* surface */
+  --ctp-surface2: #626880;
+  --ctp-surface1: #51576d;
+  --ctp-surface0: #414559;
+  /* overlay */
+  --ctp-overlay2: #949cbb;
+  --ctp-overlay1: #838ba7;
+  --ctp-overlay0: #737994;
+  /* colors */
+  --ctp-rosewater: #f2d5cf;
+  --ctp-flamingo:  #eebebe;
+  --ctp-pink:      #f4b8e4;
+  --ctp-mauve:     #ca9ee6;
+  --ctp-red:       #e78284;
+  --ctp-maroon:    #ea999c;
+  --ctp-peach:     #ef9f76;
+  --ctp-yellow:    #e5c890;
+  --ctp-green:     #a6d189;
+  --ctp-teal:      #81c8be;
+  --ctp-sky:       #99d1db;
+  --ctp-sapphire:  #85c1dc;
+  --ctp-blue:      #8caaee;
+  --ctp-lavender:  #babbf1;
+  /* semantic */
+  --ctp-subtext:  var(--ctp-subtext0);
+  --ctp-surface:  var(--ctp-surface0);
+  --ctp-overlay:  var(--ctp-overlay1);
+  --ctp-accent:   var(--ctp-mauve);
+}
+
+[data-theme="latte"] {
+  /* base */
+  --ctp-base:     #eff1f5;
+  --ctp-mantle:   #e6e9ef;
+  --ctp-crust:    #dce0e8;
+  /* text */
+  --ctp-text:     #4c4f69;
+  --ctp-subtext1: #5c5f77;
+  --ctp-subtext0: #6c6f85;
+  /* surface */
+  --ctp-surface2: #acb0be;
+  --ctp-surface1: #bcc0cc;
+  --ctp-surface0: #ccd0da;
+  /* overlay */
+  --ctp-overlay2: #7c7f93;
+  --ctp-overlay1: #8c8fa1;
+  --ctp-overlay0: #9ca0b0;
+  /* colors */
+  --ctp-rosewater: #dc8a78;
+  --ctp-flamingo:  #dd7878;
+  --ctp-pink:      #ea76cb;
+  --ctp-mauve:     #8839ef;
+  --ctp-red:       #d20f39;
+  --ctp-maroon:    #e64553;
+  --ctp-peach:     #fe640b;
+  --ctp-yellow:    #df8e1d;
+  --ctp-green:     #40a02b;
+  --ctp-teal:      #179299;
+  --ctp-sky:       #04a5e5;
+  --ctp-sapphire:  #209fb5;
+  --ctp-blue:      #1e66f5;
+  --ctp-lavender:  #7287fd;
+  /* semantic */
+  --ctp-subtext:  var(--ctp-subtext0);
+  --ctp-surface:  var(--ctp-surface0);
+  --ctp-overlay:  var(--ctp-overlay1);
+  --ctp-accent:   var(--ctp-mauve);
+}
+
+[data-theme="latte"] .icon-mono {
+  filter: none;
+}
+
+.icon-mono {
+  filter: invert(1);
+}
+
+body {
+  background-color: var(--ctp-base);
+  color: var(--ctp-text);
+}
+
+
+/* Markdown */
+article {
+  --tw-prose-body: var(--ctp-text);
+  --tw-prose-headings: var(--ctp-text);
+  --tw-prose-links: var(--ctp-accent);
+  --tw-prose-bold: var(--ctp-text);
+  --tw-prose-code: var(--ctp-accent);
+  --tw-prose-quotes: var(--ctp-subtext);
+  --tw-prose-counters: var(--ctp-subtext);
+  --tw-prose-bullets: var(--ctp-subtext);
+  --tw-prose-hr: var(--ctp-surface);
+}
+
+
+/* Headings */
+article h1 {
+  background-color: color-mix(in srgb, var(--ctp-red) 30%, transparent);
+  color: var(--ctp-text);
+  padding: 0.25rem 0.75rem;
+  text-align: center;
+  border-radius: 0.5rem;
+}
+
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+  text-align: left;
+  margin-left: 1rem;
+  scroll-margin-top: 4rem;
+}
+
+article h2 { color: var(--ctp-peach); }
+article h3 { color: var(--ctp-yellow); }
+article h4 { color: var(--ctp-green); }
+article h5 { color: var(--ctp-blue); }
+article h6 { color: var(--ctp-mauve); }
+
+article h2::after {
+  content: "";
+  display: block;
+  height: 1px;
+  margin-top: 0.25rem;
+  background: linear-gradient(
+    to right,
+    var(--ctp-red),
+    var(--ctp-peach),
+    var(--ctp-yellow),
+    var(--ctp-green),
+    var(--ctp-teal),
+    var(--ctp-blue),
+    var(--ctp-mauve)
+  );
+}
+
+/* Links */
+article a {
+  color: var(--ctp-accent);
+}
+
+article a:visited {
+  color: var(--ctp-red);
+}
+
+article a:hover {
+  color: var(--ctp-peach);
+}
+
+/* Horizontal Line */
+article hr {
+  border: none;
+  height: 2px;
+  background: linear-gradient(
+    to right,
+    var(--ctp-red),
+    var(--ctp-peach),
+    var(--ctp-yellow),
+    var(--ctp-green),
+    var(--ctp-teal),
+    var(--ctp-blue),
+    var(--ctp-mauve)
+  );
+}
+
+
+/* Code Block*/
+article pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+article code {
+  background-color: var(--ctp-surface);
+  color: var(--ctp-accent);
+  padding: 0.1rem 0.3rem;
+  border-radius: 4px;
+}
+
+article code::before,
+article code::after {
+  content: none;
+}
+
+article pre {
+  padding-top: 0.75rem;
+}
+
+.copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background-color: var(--ctp-surface);
+  color: var(--ctp-subtext);
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.4rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  z-index: 1;
+  opacity: 0.5;
+}
+
+.copy-button:hover {
+  opacity: 1;
+  color: var(--ctp-accent);
+  background-color: var(--ctp-overlay);
+}
+
+article blockquote {
+  border-left: 3px solid var(--ctp-accent);
+  color: var(--ctp-subtext);
+}
+
+/* Table */ 
+article table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+article th {
+  background-color: var(--ctp-surface);
+  color: var(--ctp-accent);
+  text-align: left;
+  padding: 0.5rem 1rem;
+}
+
+article td {
+  padding: 0.5rem 1rem;
+  color: var(--ctp-text);
+  border-bottom: 1px solid var(--ctp-surface);
+}
+
+article tr:nth-child(even) {
+  background-color: var(--ctp-mantle);
+}
+
+article tr:hover {
+  background-color: var(--ctp-surface);
+}
+
+/* Lists */ 
+article ul {
+  list-style: none;
+  padding-left: 1rem;
+}
+
+article ul li::before {
+  content: "󰧞 ";
+  font-family: "NerdFontsSymbols Nerd Font";
+  color: var(--ctp-accent);
+}
+
+article ol {
+  padding-left: 1.5rem;
+}
+
+article ol li::marker {
+  color: var(--ctp-accent);
+}
+
+article li {
+  color: var(--ctp-text);
+  margin-bottom: 0.25rem;
+}
+
+article li:has(input[type="checkbox"]:checked) {
+  color: var(--ctp-subtext);
+  text-decoration: line-through;
+  text-decoration-color: var(--ctp-accent);
+}
+
+article li:has(input[type="checkbox"]:checked) input[type="checkbox"] {
+  text-decoration: none;
+  position: relative;
+  z-index: 1;
+}
+
+/* Blockquote */
+article blockquote {
+  border-left: none;
+  padding-left: 1rem;
+  position: relative;
+  color: var(--ctp-subtext);
+}
+
+article blockquote::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: linear-gradient(
+    to bottom,
+    var(--ctp-red),
+    var(--ctp-peach),
+    var(--ctp-yellow),
+    var(--ctp-green),
+    var(--ctp-teal),
+    var(--ctp-blue),
+    var(--ctp-mauve)
+  );
+}
+
+/* Callout Boxes */
+.markdown-alert {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+
+.markdown-alert {
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+
+.markdown-alert-title {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+
+.markdown-alert-note {
+  background-color: color-mix(in srgb, var(--ctp-blue) 20%, transparent);
+  border-left: 3px solid var(--ctp-blue);
+}
+
+.markdown-alert-note .markdown-alert-title {
+  color: var(--ctp-blue);
+}
+
+.markdown-alert-note .markdown-alert-title::before {
+  content: "󰋽 ";
+  font-family: "NerdFontsSymbols Nerd Font";
+}
+
+.markdown-alert-tip {
+  background-color: color-mix(in srgb, var(--ctp-green) 20%, transparent);
+  border-left: 3px solid var(--ctp-green);
+}
+
+.markdown-alert-tip .markdown-alert-title {
+  color: var(--ctp-green);
+}
+
+.markdown-alert-tip .markdown-alert-title::before {
+  content: "󰌶 ";
+  font-family: "NerdFontsSymbols Nerd Font";
+}
+
+.markdown-alert-warning {
+  background-color: color-mix(in srgb, var(--ctp-yellow) 20%, transparent);
+  border-left: 3px solid var(--ctp-yellow);
+}
+
+.markdown-alert-warning .markdown-alert-title {
+  color: var(--ctp-yellow);
+}
+
+.markdown-alert-warning .markdown-alert-title::before {
+  content: "󰀦 ";
+  font-family: "NerdFontsSymbols Nerd Font";
+}
+
+.markdown-alert-important {
+  background-color: color-mix(in srgb, var(--ctp-mauve) 20%, transparent);
+  border-left: 3px solid var(--ctp-mauve);
+}
+
+.markdown-alert-important .markdown-alert-title {
+  color: var(--ctp-mauve);
+}
+
+.markdown-alert-important .markdown-alert-title::before {
+  content: "󰅺 ";
+  font-family: "NerdFontsSymbols Nerd Font";
+}
+
+.markdown-alert-caution {
+  background-color: color-mix(in srgb, var(--ctp-red) 20%, transparent);
+  border-left: 3px solid var(--ctp-red);
+}
+
+.markdown-alert-caution .markdown-alert-title {
+  color: var(--ctp-red);
+}
+
+.markdown-alert-caution .markdown-alert-title::before {
+  content: "󱧼 ";
+  font-family: "NerdFontsSymbols Nerd Font";
+}