From 39a5fb6e855e6a345937daa2d63667020b89b92d Mon Sep 17 00:00:00 2001
From: SadlyNotSappho <not giving you my email>
Date: Fri, 21 Apr 2023 12:48:12 -0700
Subject: [PATCH] catppuccin-ify the colors and change the icon's alt text

---
 index.html                    |  4 ++--
 src/App.vue                   |  2 +-
 src/assets/base.css           | 33 +++++++++++++++++----------------
 src/assets/main.css           | 15 ++++++++++++---
 src/components/HelloWorld.vue |  2 +-
 5 files changed, 33 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index a888544..d7206f1 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/src/assets/pfp.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>SadlyNotSappho</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 9202be1..e09c96a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import TheWelcome from './components/TheWelcome.vue'
 
 <template>
   <header>
-    <img alt="my pfp" class="logo" src="./assets/pfp.png" width="150" height="150" />
+    <img alt="my pfp, made with @greyfeu's picrew" class="logo" src="./assets/pfp.png" width="150" height="150" />
 
     <div class="wrapper">
       <HelloWorld msg="Welcome to my shitass website!" />
diff --git a/src/assets/base.css b/src/assets/base.css
index 71dc55a..3ac7bd8 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,24 +1,25 @@
-/* color palette from <https://github.com/vuejs/theme> */
+/* dark theme using catppuccin mocha, light using catppuccin latte - https://github.com/catppuccin/catppuccin */
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
+  --vt-c-white: #eff1f5; /* Base (latte) */
+  --vt-c-white-soft: #bcc0cc; /* Surface1 (latte) */
+  --vt-c-white-mute: #ccd0da; /* Surface0 (latte) */
 
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
+  --vt-c-black: #1e1e2e; /* Base (mocha) */
+  --vt-c-black-soft: #45475a; /* Surface1 (mocha) */
+  --vt-c-black-mute: #313244; /* Surface0 (mocha) */
 
-  --vt-c-indigo: #2c3e50;
+  --vt-c-text-light: #4c4f69; /* Text (latte) */
+  --vt-c-text-dark: #cdd6f4; /* Text (mocha) */
 
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); /* Overlay1 (mocha) */
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); /* Overlay1 (mocha) */
+  --vt-c-divider-dark-1: rgba(127, 132, 156, 0.65); /* Overlay1 (mocha) */
+  --vt-c-divider-dark-2: rgba(127, 132, 156, 0.48); /* Overlay1 (mocha) */
 
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-text-light-1: var(--vt-c-text-light);
+  --vt-c-text-light-2: rgba(92, 95, 119, 0.66); /* Subtext1 (latte) */
+  --vt-c-text-dark-1: var(--vt-c-text-dark);
+  --vt-c-text-dark-2: rgba(186, 194, 222, 0.64); /* Subtext1 (mocha) */
 }
 
 /* semantic color variables for this project */
diff --git a/src/assets/main.css b/src/assets/main.css
index e8667cd..88fddbe 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -9,12 +9,21 @@
 }
 
 a,
-.green {
+.pink {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
+  color: #ea76cb; /* Pink (latte) */
   transition: 0.4s;
 }
 
+@media (prefers-color-scheme: dark) {
+  a,
+  .pink {
+    text-decoration: none;
+    color: #f5c2e7; /* Pink (mocha) */
+    transition: 0.4s;
+  }
+}
+
 @media (hover: hover) {
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
@@ -32,4 +41,4 @@ a,
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index e8f531d..fbc3555 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
+    <h1 class="pink">{{ msg }}</h1>
     <h3>
       If you came here for the video - which I previously said this site redirects to, it's 
       <a href="https://www.youtube.com/watch?v=wURbb6Tm1QM" target="_blank" rel="noopener">right here</a>.
