💄 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: 1px solid var(--catppuccin-color-text);
-    border-radius: 0.5rem;
+    border-radius: 1rem;
 }
 </style>
 

public/icons/arrow-up-right-from-square.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="64" height="64"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>