💄 Adds Mocha Catppuccin Tailwind theme

app/components/ArrowLink.vue

@@ -3,7 +3,7 @@
         <img
             :src="props.icon ?? '/icons/arrow-up-right-from-square.svg'"
             alt="Arrow going to the top right from the center of a square, representing a link"
-            class="w-4 h-4"
+            class="w-4 h-4 fill-ctp-text"
         />
     </NuxtLink>
 </template>

app/layouts/default.vue

@@ -8,6 +8,7 @@ body {
     margin: 0;
     width: 100%;
     height: 100%;
+    overflow-x: hidden;
 }
 </style>
 
@@ -24,5 +25,8 @@ useHead({
         { name: "description", content: "Daniel Svitan's portfolio" },
         { name: "keywords", content: "Daniel Svitan portfolio CV" },
     ],
+    bodyAttrs: {
+        class: "mocha bg-ctp-base text-ctp-text",
+    },
 });
 </script>

app/pages/index.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="w-screen h-full flex items-center justify-start flex-col font-mono bg-ctp-base">
+    <div class="w-screen h-full flex items-center justify-start flex-col font-mono bg-ctp-base text-ctp-text mocha">
         <div class="w-1 h-10 shrink-10" />
 
         <div
-            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-black border-1 p-3 shrink-0 overflow-auto relative"
+            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-ctp-text border-1 p-3 shrink-0 overflow-auto relative"
         >
             <div class="absolute top-2 right-2 flex gap-x-2">
                 <button
@@ -20,7 +20,7 @@
             <p class="mr-16">{{ $t("main.note.accessibility") }}</p>
             <div class="h-4" />
 
-            <h1 class="text-xl text-ctp-primary">
+            <h1 class="text-xl">
                 {{ $t("main.intro.0") }}
                 <span class="font-bold">{{ $t("main.intro.1") }}</span> ({{
                     $t("main.intro.2")
@@ -438,7 +438,7 @@ th {
 
 tr,
 thead {
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid var(--catppuccin-color-text);
 }
 
 tr:last-of-type {
@@ -447,8 +447,8 @@ tr:last-of-type {
 
 .hashtag {
     padding: 0 0.25rem;
-    background-color: #e8e8e8;
-    border-radius: 0.5rem;
+    border: 1px solid var(--catppuccin-color-text);
+    border-radius: 1rem;
 }
 </style>