various improvements

package.json

@@ -11,7 +11,8 @@
     "@sveltejs/adapter-static": "1.0.0-next.28",
     "@sveltejs/kit": "1.0.0-next.291",
     "mdsvex": "0.10.5",
-    "svelte": "3.46.4"
+    "svelte": "3.46.4",
+    "vite-plugin-windicss": "^1.8.6"
   },
   "type": "module",
   "dependencies": {

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 specifiers:
   '@sveltejs/adapter-static': 1.0.0-next.28
@@ -17,6 +17,7 @@ specifiers:
   remark-twemoji: 0.1.1
   svelte: 3.46.4
   twemoji: 13.1.0
+  vite-plugin-windicss: ^1.8.6
   xterm: 4.18.0
 
 dependencies:
@@ -26,7 +27,7 @@ dependencies:
   rehype-autolink-headings: 6.1.1
   rehype-katex-svelte: 1.0.3
   rehype-slug: 5.0.1
-  remark-extended-table: 1.0.0_8706e9bd6f57a2b1b62831c2c26b6465
+  remark-extended-table: 1.0.0_q4dotplpk6rldnrighbme23emu
   remark-gfm: 3.0.1
   remark-math: 2.0.1
   remark-parse: 10.0.1
@@ -39,9 +40,35 @@ devDependencies:
   '@sveltejs/kit': 1.0.0-next.291_svelte@3.46.4
   mdsvex: 0.10.5_svelte@3.46.4
   svelte: 3.46.4
+  vite-plugin-windicss: 1.8.6
 
 packages:
 
+  /@antfu/utils/0.5.2:
+    resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
+    dev: true
+
+  /@nodelib/fs.scandir/2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat/2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /@nodelib/fs.walk/1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.13.0
+    dev: true
+
   /@rollup/pluginutils/4.2.0:
     resolution: {integrity: sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==}
     engines: {node: '>= 8.0.0'}
@@ -132,6 +159,30 @@ packages:
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
 
+  /@windicss/config/1.8.6:
+    resolution: {integrity: sha512-WVS41qUJtd44g2iWzTAE8tpgk8gD0yAr1RwwaWi7FAECKm3LVNMLOoToum9R/QKFE2n64EUVJpIvSUNby8rlhg==}
+    dependencies:
+      debug: 4.3.4
+      jiti: 1.14.0
+      windicss: 3.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@windicss/plugin-utils/1.8.6:
+    resolution: {integrity: sha512-YY6EcUsgkosaQkIseFiIoHfU1H5boOAs/l74QWLI6ryNeHLMq2e04QVsFz+Rt+U8b8PRNxXPC8ADbxE05X7I7g==}
+    dependencies:
+      '@antfu/utils': 0.5.2
+      '@windicss/config': 1.8.6
+      debug: 4.3.4
+      fast-glob: 3.2.11
+      magic-string: 0.26.2
+      micromatch: 4.0.5
+      windicss: 3.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /assert/2.0.0:
     resolution: {integrity: sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==}
     dependencies:
@@ -158,6 +209,13 @@ packages:
     resolution: {integrity: sha1-aN/1++YMUes3cl6p4+0xDcwed24=}
     dev: false
 
+  /braces/3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+    dev: true
+
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
@@ -201,6 +259,18 @@ packages:
     dependencies:
       ms: 2.1.2
 
+  /debug/4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
   /decode-named-character-reference/1.0.1:
     resolution: {integrity: sha512-YV/0HQHreRwKb7uBopyIkLG17jG6Sv2qUchk9qSoVJ2f+flwRsPNBO0hAnjt6mTNYUT+vw9Gy2ihXg4sUWPi2w==}
     dependencies:
@@ -489,6 +559,30 @@ packages:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: false
 
+  /fast-glob/3.2.11:
+    resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
+  /fastq/1.13.0:
+    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
+    dependencies:
+      reusify: 1.0.4
+    dev: true
+
+  /fill-range/7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+
   /foreach/2.0.5:
     resolution: {integrity: sha1-C+4AUBiusmDQo6865ljdATbsG5k=}
     dev: false
@@ -533,6 +627,13 @@ packages:
     resolution: {integrity: sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==}
     dev: false
 
+  /glob-parent/5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
   /globalyzer/0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
     dev: true
@@ -687,6 +788,11 @@ packages:
       has-tostringtag: 1.0.0
     dev: false
 
+  /is-extglob/2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /is-generator-function/1.0.10:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
     engines: {node: '>= 0.4'}
@@ -694,6 +800,13 @@ packages:
       has-tostringtag: 1.0.0
     dev: false
 
+  /is-glob/4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
   /is-nan/1.3.2:
     resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
     engines: {node: '>= 0.4'}
@@ -714,6 +827,11 @@ packages:
       has-tostringtag: 1.0.0
     dev: false
 
+  /is-number/7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
   /is-plain-obj/4.0.0:
     resolution: {integrity: sha512-NXRbBtUdBioI73y/HmOhogw/U5msYPC9DAtGkJXeFcFWSFZw0mCUsPxk/snTuJHzNKA8kLBK4rH97RMB1BfCXw==}
     engines: {node: '>=12'}
@@ -762,6 +880,11 @@ packages:
       call-bind: 1.0.2
     dev: false
 
+  /jiti/1.14.0:
+    resolution: {integrity: sha512-4IwstlaKQc9vCTC+qUXLM1hajy2ImiL9KnLvVYiaHOtS/v3wRjhLlGl121AmgDgx/O43uKmxownJghS5XMya2A==}
+    hasBin: true
+    dev: true
+
   /jsonfile/4.0.0:
     resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=}
     optionalDependencies:
@@ -794,6 +917,10 @@ packages:
     resolution: {integrity: sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==}
     engines: {node: '>=6'}
 
+  /kolorist/1.5.1:
+    resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
+    dev: true
+
   /longest-streak/3.0.1:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: false
@@ -809,6 +936,13 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /magic-string/0.26.2:
+    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
+    engines: {node: '>=12'}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /markdown-table/3.0.2:
     resolution: {integrity: sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==}
     dev: false
@@ -963,6 +1097,11 @@ packages:
     resolution: {integrity: sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=}
     dev: false
 
+  /merge2/1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /micromark-core-commonmark/1.0.6:
     resolution: {integrity: sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==}
     dependencies:
@@ -1223,6 +1362,14 @@ packages:
       - supports-color
     dev: false
 
+  /micromatch/4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -1310,6 +1457,10 @@ packages:
       xtend: 4.0.2
     dev: false
 
+  /queue-microtask/1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    dev: true
+
   /rehype-autolink-headings/6.1.1:
     resolution: {integrity: sha512-NMYzZIsHM3sA14nC5rAFuUPIOfg+DFmf9EY1YMhaNlB7+3kK/ZlE6kqPfuxr1tsJ1XWkTrMtMoyHosU70d35mA==}
     dependencies:
@@ -1343,7 +1494,7 @@ packages:
       unist-util-visit: 4.1.0
     dev: false
 
-  /remark-extended-table/1.0.0_8706e9bd6f57a2b1b62831c2c26b6465:
+  /remark-extended-table/1.0.0_q4dotplpk6rldnrighbme23emu:
     resolution: {integrity: sha512-mlD0GU0qCOoGaTu9Ruddmdn0FOhuc6nnde0DmNJyO9+ADxbMni7YcXJUa3XZNWZ+Gm9a14I6olGx2mvYfRl6TQ==}
     peerDependencies:
       remark-gfm: ^3.0.0
@@ -1403,6 +1554,11 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
 
+  /reusify/1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
+
   /rollup/2.70.0:
     resolution: {integrity: sha512-iEzYw+syFxQ0X9RefVwhr8BA2TNJsTaX8L8dhyeyMECDbmiba+8UQzcu+xZdji0+JQ+s7kouQnw+9Oz5M19XKA==}
     engines: {node: '>=10.0.0'}
@@ -1411,6 +1567,12 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /run-parallel/1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: true
+
   /sade/1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -1482,6 +1644,13 @@ packages:
       globrex: 0.1.2
     dev: true
 
+  /to-regex-range/5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+
   /trough/2.1.0:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
     dev: false
@@ -1665,6 +1834,19 @@ packages:
       vfile-message: 3.1.2
     dev: false
 
+  /vite-plugin-windicss/1.8.6:
+    resolution: {integrity: sha512-D4G4qmumgklPiPrq/ZALqq8Mby6krskFVShbmb5c+0VCSsLUN96qyFRTwi81rNIHwFvlbpqflgh+BpUM/9VjQg==}
+    peerDependencies:
+      vite: ^2.0.1
+    dependencies:
+      '@windicss/plugin-utils': 1.8.6
+      debug: 4.3.4
+      kolorist: 1.5.1
+      windicss: 3.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite/2.8.6:
     resolution: {integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==}
     engines: {node: '>=12.2.0'}
@@ -1711,6 +1893,12 @@ packages:
       is-typed-array: 1.1.8
     dev: false
 
+  /windicss/3.5.6:
+    resolution: {integrity: sha512-P1mzPEjgFMZLX0ZqfFht4fhV/FX8DTG7ERG1fBLiWvd34pTLVReS5CVsewKn9PApSgXnVfPWwvq+qUsRwpnwFA==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: true
+
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}

src/lib/components/heroPost.svelte

@@ -1,5 +1,6 @@
 <script>
     import { DateTime } from "luxon";
+    import { scale } from "svelte/transition";
 
     export var bigThumbnail;
     // export var categories = [];

src/lib/components/navbar.svelte

@@ -9,7 +9,7 @@
     }
 </script>
 
-<div class="bar" class:dark={$darkmode}>
+<div class="bar fixed top-0 left-0 z-99 w-100vw max-w-1920px mx-auto mb-30px backdrop-blur" class:dark={$darkmode}>
 	<Bar>
 		<a href="/"><h3>Daniel Bulant</h3></a>
 		<Split />
@@ -19,6 +19,8 @@
 	</Bar>
 </div>
 
+<div class="h-19"></div>
+
 <style>
 	@media (max-width: 570px) {
 		.bar .big {
@@ -27,14 +29,6 @@
 	}
     
 	.bar {
-		position: -webkit-sticky; /* Safari */
-		position: sticky;
-		top: 0;
-		left: 0;
-		z-index: 99;
-		/*width: calc(100vw - 15px);*/
-		max-width: 1920px;
-		margin: 0 auto 30px auto;
 		background: rgba(255,255,255, 0.2);
 		backdrop-filter: blur(10px);
 	}
@@ -52,7 +46,7 @@
 		}
 	}
 	.dark.bar {
-		background: rgba(28, 28, 33, 0.2);
+		background: rgba(28, 28, 33, 0.8);
 	}
 	.bar h3 {
 		font-size: 18px;

src/lib/components/pageTransition.svelte

@@ -7,13 +7,8 @@
     <div
         in:fly={{ x: -5, duration: 500, delay: 500 }}
         out:fly={{ x: 5, duration: 500 }}
+        class="absolute bg-inherit w-full"
     >
         <slot />
     </div>
-{/key}
+{/key}
-
-<style>
-    div {
-        position: absolute;
-    }
-</style>

src/lib/components/project.svelte

@@ -64,25 +64,18 @@
         width: 100%;
         border-radius: 10px;
         position: relative;
+        overflow: hidden;
     }
     .project:hover .desc {
         opacity: 1;
         user-select: auto;
     }
+    .project:hover img {
+        filter: blur(35px);
+    }
     .desc {
-        position: absolute;
+        @apply absolute top-0 left-0 w-full h-full rounded-10px opacity-0 select-none flex flex-col py-10px px-15px;
-        top: 0;
-        left: 0;
         transition: background-color .3s, opacity .3s;
-        width: calc(100% - 30px);
-        height: calc(100% - 27px);
-        border-radius: 10px;
-        opacity: 0;
-        user-select: none;
-        backdrop-filter: blur(35px);
-        display: flex;
-        flex-direction: column;
-        padding: 10px 15px;
         background-color: rgba(0,0,0,0.2);
         color: rgb(214, 214, 214);
     }
@@ -102,12 +95,13 @@
         height: auto;
         border-radius: 10px;
         transition: filter .3s;
+        filter: blur(0px) grayscale(0);
     }
     img.grayscale {
         filter: grayscale(100%);
     }
     h3 {
-        font-weight: 400;
+        @apply font-normal text-xl;
     }
     .bottom {
         color: gray;

src/lib/layouts/post.svelte

@@ -119,6 +119,18 @@
     }
     :global(body .post-layout details summary) {
         user-select: none;
+    }
+    :global(body .post-layout h2) {
+        @apply text-3xl font-bold my-0.8em;
+    }
+    :global(body .post-layout h3) {
+        @apply text-2xl font-bold my-0.6em;
+    }
+    :global(body .post-layout h4) {
+        @apply text-xl font-bold my-0.4em;
+    }
+    :global(body .post-layout p) {
+        @apply my-1em;
     }
 	main {
         margin: 0 auto;
@@ -126,6 +138,7 @@
         padding: 0 20px 20px;
 	}
     h1 {
+        @apply text-4xl font-bold;
         padding: 0 0 15px;
     }
     span {

src/lib/stores/transitions.js

@@ -1,6 +0,0 @@
-import { crossfade } from "svelte/transition";
-
-
-export const [heaventakerSendTransition, heaventakerReceiveTransition] = crossfade({
-    duration: 700
-});

src/routes/__layout.svelte

@@ -5,12 +5,15 @@
 <script>
     import Navbar from "$lib/components/navbar.svelte";
     import PageTransition from "$lib/components/pageTransition.svelte";
+    import "virtual:windi.css";
+    import { browser } from "$app/env";
+    if (browser) import("virtual:windi-devtools");
     export let url;
 </script>
 
 <Navbar />
 
-<div style="overflow-x: hidden;">
+<div class="overflow-x-hidden w-100vw">
     <PageTransition {url}>
         <slot />
     </PageTransition>

src/routes/index.svelte

@@ -16,12 +16,10 @@
 	import Button from "$lib/components/button.svelte";
 	import Contact from "$lib/components/contact.svelte";
 	import Hero from "$lib/components/hero.svelte";
-	import Navbar from "$lib/components/navbar.svelte";
 	import Posts from "$lib/components/posts.svelte";
 	import Project from "$lib/components/project.svelte";
 	import TechnologyDetails from "$lib/components/technologyDetails.svelte";
 	import darkmode from "$lib/stores/darkmode";
-import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/stores/transitions";
 
 	var technologySelected = null;
 	var technologyHover = false;
@@ -51,7 +49,7 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
 
 <main class:dark={$darkmode}>
 	<Hero {appTypeHover}>
-		<h1>I'm a young developer making <u on:mouseenter={() => appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites</u>,
+		<h1 class="font-bold">I'm a young developer making <u on:mouseenter={() => appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites</u>,
 			<u on:mouseenter={() => appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications</u> and
 			<u on:mouseenter={() => appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots</u>.</h1>
 		<!-- <h3>To be used later</h3> -->
@@ -81,9 +79,6 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
                 name="Heaventaker"
                 clickable
                 target="_self"
-                crossfadesend={heaventakerSendTransition}
-                crossfadereceive={heaventakerReceiveTransition}
-                crossfadekey="heaventaker"
 			>
 				<b>Heaventaker</b> - Helltaker fan game
 				<svelte:fragment slot="desc">
@@ -155,11 +150,11 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
 		</div>
 	</div>
 	<div class="center">
-		In addition, this website is open-source and available on <img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" style="height: 1em; width: 1em;" alt=""> <a href="https://github.com/danbulant/design" style="color: rgb(255, 102, 128)">GitHub</a>
+		In addition, this website is open-source and available on <img class="white inline" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" style="height: 1em; width: 1em;" alt=""> <a href="https://github.com/danbulant/design" style="color: rgb(255, 102, 128)">GitHub</a>
 	</div>
 	<div class="also relative">
 		<TechnologyDetails bind:selected={technologySelected} />
-		<h2 class="text-center">I also worked with the following:</h2>
+		<h2 class="text-center font-semibold text-2xl">I also worked with the following:</h2>
 		<noscript class="text-center text-white">Clicking won't work if javascript is not enabled.</noscript>
 		<span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>{typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.</span>
 		<div class="split" class:text-gray={technologyHover} on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
@@ -202,7 +197,7 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
 				</li>
 				<li on:click={() => technologySelected = "discord"}>
 					<img src="/tech/discord.png" alt="" draggable={false}>
-					Discord
+					Discord bots
 				</li>
 			</ul>
 			<ul>

src/routes/posts/index.svelte

@@ -88,9 +88,7 @@
         padding: 0 20px;
     }
     .tags {
-        display: flex;
+        @apply flex flex-wrap gap-2 mt-2 mb-3;
-        flex-wrap: wrap;
-        gap: 0.5rem;
     }
     .dark .tag {
         background: rgb(77, 77, 77);
@@ -109,8 +107,7 @@
         background: rgb(0, 162, 255);
     }
     h1 {
-        margin: 0;
+        @apply m-0 mb-1 p-0 font-bold text-3xl;
-        padding: 0;
     }
     hr {
         height: 1px;

src/routes/posts/quick-comparison-of-s3/index.md

@@ -116,8 +116,6 @@ Base plan is 5$/month.
 
 ## Storj.io
 
-***4$/TB/month***
-
 | Category | Free | Paid |
 | -------- | ---- | ---- |
 | Storage | 150GB | $4/TB/month |

src/routes/projects/heaventaker.svelte

@@ -1,13 +1,15 @@
-<script>
+<div>
-import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/stores/transitions";
+    <img
-</script>
+        class="banner"
-
+        src="/screenshots/heaventaker.webp" alt="">
-<img class="banner" in:heaventakerReceiveTransition={{ key: "heaventaker" }} out:heaventakerSendTransition={{ key: "heaventaker" }} src="/screenshots/heaventaker.webp" alt="">
 
+    <h1 class="text-center">Heaventaker</h1>
+</div>
+    
 <style>
     .banner {
         width: 100vw;
-        height: auto;
+        height: calc(100vw * 0.5625);
         object-fit: cover;
     }
 </style>

svelte.config.js

@@ -7,6 +7,7 @@ import remarkTwemoji from 'remark-twemoji';
 import remarkGfm from 'remark-gfm';
 import remarkExtendedTable from 'remark-extended-table';
 import rehypeKatexSvelte from "rehype-katex-svelte";
+import WindiCSS from 'vite-plugin-windicss';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -15,7 +16,10 @@ const config = {
 			precompress: true
 		}),
 		vite: {
-			clearScreen: false
+			clearScreen: false,
+            plugins: [
+                WindiCSS()
+            ]
 		}
 	},
 	extensions: ['.svelte', '.md'],