update look of the page

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.12",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/crypto-js": "^4.1.1",
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",

pnpm-lock.yaml

@@ -4,6 +4,9 @@ dependencies:
   '@fontsource/jetbrains-mono':
     specifier: ^4.5.12
     version: 4.5.12
+  '@tailwindcss/typography':
+    specifier: ^0.5.9
+    version: 0.5.9(tailwindcss@3.2.7)
   '@types/crypto-js':
     specifier: ^4.1.1
     version: 4.1.1
@@ -302,6 +305,18 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /@tailwindcss/typography@0.5.9(tailwindcss@3.2.7):
+    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.2.7(postcss@8.4.21)
+    dev: false
+
   /@types/crypto-js@4.1.1:
     resolution: {integrity: sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==}
     dev: false
@@ -412,18 +427,15 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
 
   /acorn-walk@7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn@7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn@8.8.2:
     resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
@@ -458,11 +470,9 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -570,7 +580,6 @@ packages:
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -611,7 +620,6 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /caniuse-lite@1.0.30001466:
     resolution: {integrity: sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w==}
@@ -637,7 +645,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
@@ -674,7 +681,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype@3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
@@ -748,7 +754,6 @@ packages:
 
   /defined@1.0.1:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
-    dev: true
 
   /detective@5.2.1:
     resolution: {integrity: sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==}
@@ -758,11 +763,9 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.1
       minimist: 1.2.8
-    dev: true
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -773,7 +776,6 @@ packages:
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -1261,7 +1263,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind@1.1.1:
@@ -1497,7 +1498,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object@1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -1699,7 +1699,6 @@ packages:
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -1708,6 +1707,14 @@ packages:
       p-locate: 5.0.0
     dev: false
 
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: false
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: false
@@ -1817,7 +1824,6 @@ packages:
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -1832,7 +1838,6 @@ packages:
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect@1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -1976,7 +1981,6 @@ packages:
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /postcss-import@14.1.0(postcss@8.4.21):
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
@@ -1988,7 +1992,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
-    dev: true
 
   /postcss-js@4.0.1(postcss@8.4.21):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -1998,7 +2001,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.21
-    dev: true
 
   /postcss-load-config@3.1.4(postcss@8.4.21):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -2015,7 +2017,6 @@ packages:
       lilconfig: 2.1.0
       postcss: 8.4.21
       yaml: 1.10.2
-    dev: true
 
   /postcss-nested@6.0.0(postcss@8.4.21):
     resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
@@ -2025,7 +2026,14 @@ packages:
     dependencies:
       postcss: 8.4.21
       postcss-selector-parser: 6.0.11
-    dev: true
+
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
 
   /postcss-selector-parser@6.0.11:
     resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
@@ -2033,11 +2041,9 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss@8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
@@ -2055,7 +2061,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -2081,7 +2086,6 @@ packages:
   /quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
@@ -2108,14 +2112,12 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
@@ -2359,7 +2361,6 @@ packages:
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -2464,7 +2465,6 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
@@ -2517,7 +2517,6 @@ packages:
   /xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
-    dev: true
 
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
@@ -2526,7 +2525,6 @@ packages:
   /yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}

src/app/globals.css

@@ -1,9 +1,15 @@
-@import 'node_modules/@fontsource/jetbrains-mono/index.css';
+@import "node_modules/@fontsource/jetbrains-mono/index.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-a {
+@layer base {
+  a {
     @apply underline;
+  }
+
+  a:hover {
+    @apply saturate-50;
+  }
 }

src/app/page.tsx

@@ -60,21 +60,21 @@ export default function Home() {
   ];
 
   return (
-    <div className="max-w-screen-md p-4 mx-auto mt-4 prose prose-zinc prose-invert">
+    <div className="max-w-screen-md mx-auto prose mt-big p-small prose-zinc prose-invert">
-      <header className="flex flex-col items-center justify-around px-4">
+      <header className="flex flex-col items-center justify-around px-base">
         <div>
           <motion.div
             animate={{
               left: 0,
               right: 0,
             }}
-            className="flex flex-col max-w-[100vw] absolute h-16 my-28 z-10 shadow-2xl"
+            className="absolute z-10 flex flex-col h-16 shadow-2xl max-w-vw my-28"
           >
-            <div className="grow bg-[#55CDFC] z-0"></div>
+            <div className="z-0 grow bg-trans-blue"></div>
-            <div className="grow bg-[#F7A8B8] z-0"></div>
+            <div className="z-0 grow bg-trans-pink"></div>
             <div className="z-0 bg-white grow"></div>
-            <div className="grow bg-[#F7A8B8] z-0"></div>
+            <div className="z-0 grow bg-trans-pink"></div>
-            <div className="grow bg-[#55CDFC] z-0"></div>
+            <div className="z-0 grow bg-trans-blue"></div>
           </motion.div>
           <div className="relative z-20 mx-auto w-72">
             <Image
@@ -85,8 +85,8 @@ export default function Home() {
             />
           </div>
         </div>
-        <div className="flex flex-col items-center w-full my-4 gap-y-4">
+        <div className="flex flex-col items-center w-full my-base gap-small mt-big">
-          <h1 className="flex mb-0 text-4xl select-none gap-x-2">
+          <h1 className="flex text-3xl select-none mb-none gap-small">
             <span className="my-auto">
               <a
                 href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
@@ -97,8 +97,8 @@ export default function Home() {
               </a>
             </span>
             <div className="flex flex-col text-center">
-              <span>Nikola Kubiczek</span>
+              <span className=''>Nikola Kubiczek</span>
-              <span className="text-sm font-semibold text-zinc-500">
+              <span className="text-xs font-semibold text-zinc-500">
                 (she/her)
               </span>
             </div>
@@ -113,24 +113,24 @@ export default function Home() {
             </span>
           </h1>
           <b className="font-jetbrains">
-            <p className="flex flex-col items-center my-0 font-light text-lime-50">
+            <p className="flex flex-col items-center font-light my-none text-lime-50">
-              <span>me<span className='mx-1'>@</span>yaemiku.dev</span>
+              <span>me<span className='mx-xs'>@</span>yaemiku.dev</span>
               <a href="public.asc" target="_blank">
                 pgp key
               </a>
-              <span className="mt-2 text-xs">click on the emojis !!</span>
+              <span className="text-xs mt-small">click on the emojis !!</span>
             </p>
           </b>
         </div>
       </header>
       <main className="flex flex-col items-center justify-around px-4">
-        <figure className="flex flex-col max-w-screen-sm my-6 gap-y-6">
+        <figure className="flex flex-col max-w-screen-sm my-big gap-big">
-          <blockquote className="text-2xl text-center bg-clip-text text-transparent bg-gradient-to-br from-[#55CDFC] via-[#F7A8B8] to-[#FFFFFF]">
+          <blockquote className="text-2xl text-center text-transparent bg-clip-text bg-gradient-to-br from-trans-blue via-trans-pink to-white">
             Why be serious when you can just be silly ???
           </blockquote>
 
-          <div className="grid gap-4 text-sm md:grid-cols-2 font-jetbrains">
+          <div className="grid text-sm gap-base md:grid-cols-2 font-jetbrains">
-            <div className="text-center transition transform-gpu ease-in-out col-span-full p-2 rounded-md border border-zinc-500 bg-gradient-to-r from-[#D60270] via-[#9B4F96] to-[#0038A8]">
+            <div className="text-center transition ease-in-out border rounded-md transform-gpu col-span-full p-small border-zinc-700 bg-gradient-to-r from-bi-red via-bi-violet to-bi-blue">
               <h1 className="font-semibold">My blog !!</h1>
               <a href="https://blog.yaemiku.dev" target="_blank">
                 https://blog.yaemiku.dev
@@ -139,7 +139,7 @@ export default function Home() {
             {items.map(({ name, class_, link, git, full, desc }, i) => (
               <div
                 className={`${git ? 'flex' : ''
-                  } transition transform-gpu ease-in-out p-2 rounded-md ${!!full ? 'col-span-full' : ''
+                  } transition transform-gpu ease-in-out p-small rounded-md ${!!full ? 'col-span-full' : ''
                   } border border-zinc-700 bg-zinc-800 ${class_}`}
                 key={i}
               >
@@ -174,7 +174,7 @@ export default function Home() {
               style={{ backgroundColor: `#${RGB}` }}
               onClick={() => setCOTD(!COTD)}
               title='How does it work?'
-              className="flex flex-col items-center col-span-full p-2 rounded-md border border-zinc-700 hover:border-[#7f7f84] cursor-pointer"
+              className="flex flex-col items-center col-span-full p-small rounded-md border border-zinc-700 hover:border-[#7f7f84] cursor-pointer"
             >
               <motion.a className="font-semibold">Color of the day!</motion.a>
               <motion.div
@@ -185,7 +185,7 @@ export default function Home() {
                   closed: { opacity: 0, display: "none" }
                 }}
               >
-                <div className='flex flex-col items-center gap-2'>
+                <div className='flex flex-col items-center gap-small'>
                   <span>Take the current date:</span>
                   <span className='font-semibold'>{day}.{month}.{year}</span>
                   <span>Apply MD5:</span>
@@ -211,14 +211,14 @@ export default function Home() {
           <Image
             src={blahaj}
             alt="blahaj"
-            className="mx-auto mt-6 rounded-md"
+            className="mx-auto rounded-md mt-big"
           />
-          <figcaption className="mt-[-1.25rem] text-xs text-center text-zinc-400">
+          <figcaption className="mt-[-1.25em] text-xs text-center text-zinc-400">
             u/markyminkk on r/BLAHAJ
           </figcaption>
         </figure>
       </main>
-      <footer className="my-2 text-center">
+      <footer className="text-center my-small">
         <em>
           <a href="https://gitlab.com/yaemiku" target="_blank">
             yaemiku
@@ -248,7 +248,7 @@ export default function Home() {
             picrew
           </a>
         </em>
-        <figure className="max-w-screen-md my-6 select-none">
+        <figure className="max-w-screen-md select-none my-big">
           <blockquote className="text-xs text-justify text-zinc-400">
             Oh, wretched memory that compels us to remember the paths we took to
             arrive at the present state of affairs! Further: as I lay awake but
@@ -265,7 +265,7 @@ export default function Home() {
             hold back. I was halfway down the path of my life when I found
             myself in a dark forest.
           </blockquote>
-          <figcaption className="mt-2 text-xs text-right text-zinc-700">
+          <figcaption className="text-xs text-right mt-small text-zinc-700">
             ——— Witold Gombrowicz, Ferdydurke
           </figcaption>
         </figure>

tailwind.config.js

@@ -1,14 +1,37 @@
 module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: 'class',
+  darkMode: "class",
   theme: {
     extend: {
-      fontFamily: {
-        jetbrains: ['JetBrains Mono', 'sans-serif'],
-      },
       backgroundImage: {
-        'gothic-pattern': "linear-gradient(to right, rgba(24, 24, 27, 0.8) 0 100%), url('/pattern.png')"
+        "gothic-pattern":
-      }
+          "linear-gradient(to right, rgba(24, 24, 27, 0.8) 0 100%), url('/pattern.png')",
+      },
+      colors: {
+        'trans-blue': '#55cdfc',
+        'trans-pink': '#f7a8b8',
+        'bi-red': '#d60270',
+        'bi-violet': '#9b4f96',
+        'bi-blue': '#0038a8'
+      },
+      fontFamily: {
+        jetbrains: ["JetBrains Mono", "sans-serif"],
+      },
+      maxWidth: {
+        'vw': '100vw'
+      },
+      spacing: {
+        none: '0',
+        xs: '0.25em',
+        sm: '0.5em',
+        small: '0.5em',
+        md: '0.75em',
+        lg: '1em',
+        base: '1em',
+        big: '1.5em',
+        xl: '1.25em',
+      },
+      
     },
   },
   plugins: [],