From 6be5249510046e5a37362292fcd676670784d81e Mon Sep 17 00:00:00 2001
From: Daniel Svitan <selfsigned-ash@proton.me>
Date: Sat, 17 Jan 2026 16:11:50 +0100
Subject: [PATCH] :lipstick: Adds Mocha Catppuccin Tailwind theme

---
 app/components/ArrowLink.vue                |  2 +-
 app/layouts/default.vue                     |  4 ++++
 app/pages/index.vue                         | 12 ++++++------
 public/icons/arrow-up-right-from-square.svg |  2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/ArrowLink.vue b/app/components/ArrowLink.vue
index 5574d7e..8d1463d 100644
--- a/app/components/ArrowLink.vue
+++ b/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>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 4570b12..fe089b3 100644
--- a/app/layouts/default.vue
+++ b/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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index cc2444d..679e2b8 100644
--- a/app/pages/index.vue
+++ b/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>
 
diff --git a/public/icons/arrow-up-right-from-square.svg b/public/icons/arrow-up-right-from-square.svg
index f8ec425..4ab29f6 100644
--- a/public/icons/arrow-up-right-from-square.svg
+++ b/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>