start re-writing root with plain html

about/assets/colors.css

@@ -1,50 +1,59 @@
-/* dark theme using catppuccin mocha, light using catppuccin latte - https://github.com/catppuccin/catppuccin */
   :root {
-    --vt-c-white: #eff1f5; /* Base (latte) */
+    --cat-rosewater: #dc8a78;
-    --vt-c-white-soft: #bcc0cc; /* Surface1 (latte) */
+    --cat-flamingo: #dd7878;
-    --vt-c-white-mute: #ccd0da; /* Surface0 (latte) */
+    --cat-pink: #ea76cb;
-  
+    --cat-mauve: #8839ef;
-    --vt-c-black: #1e1e2e; /* Base (mocha) */
+    --cat-red: #d20f39;
-    --vt-c-black-soft: #45475a; /* Surface1 (mocha) */
+    --cat-maroon: #e64553;
-    --vt-c-black-mute: #313244; /* Surface0 (mocha) */
+    --cat-peach: #fe640b;
-  
+    --cat-yellow: #df8e1d;
-    --vt-c-text-light: #4c4f69; /* Text (latte) */
+    --cat-green: #40a02b;
-    --vt-c-text-dark: #cdd6f4; /* Text (mocha) */
+    --cat-teal: #179299;
-  
+    --cat-sky: #04a5e5;
-    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); /* Overlay1 (mocha) */
+    --cat-sapphire: #209fb5;
-    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); /* Overlay1 (mocha) */
+    --cat-blue: #1e66f5;
-    --vt-c-divider-dark-1: rgba(127, 132, 156, 0.65); /* Overlay1 (mocha) */
+    --cat-lavender: #7287fd;
-    --vt-c-divider-dark-2: rgba(127, 132, 156, 0.48); /* Overlay1 (mocha) */
+    --cat-text: #4c4f69;
-  
+    --cat-subtext1: #5c5f77;
-    --vt-c-text-light-1: var(--vt-c-text-light);
+    --cat-subtext0: #6c6f85;
-    --vt-c-text-light-2: rgba(92, 95, 119, 0.66); /* Subtext1 (latte) */
+    --cat-overlay2: #7c7f93;
-    --vt-c-text-dark-1: var(--vt-c-text-dark);
+    --cat-overlay1: #8c8fa1;
-    --vt-c-text-dark-2: rgba(186, 194, 222, 0.64); /* Subtext1 (mocha) */
+    --cat-overlay0: #9ca0b0;
-}
+    --cat-surface2: #acb0be;
-  
+    --cat-surface1: #bcc0cc;
-  /* semantic color variables for this project */
+    --cat-surface0: #ccd0da;
-:root {
+    --cat-base: #eff1f5;
-    --color-background: var(--vt-c-white);
+    --cat-mantle: #e6e9ef;
-    --color-background-soft: var(--vt-c-white-soft);
+    --cat-crust: #dce0e8;
-    --color-background-mute: var(--vt-c-white-mute);
-  
-    --color-border: var(--vt-c-divider-light-2);
-    --color-border-hover: var(--vt-c-divider-light-1);
-  
-    --color-heading: var(--vt-c-text-light-1);
-    --color-text: var(--vt-c-text-light-1);
   }
 
   @media (prefers-color-scheme: dark) {
     :root {
-      --color-background: var(--vt-c-black);
+      --cat-rosewater: #f5e0dc;
-      --color-background-soft: var(--vt-c-black-soft);
+      --cat-flamingo: #f2cdcd;
-      --color-background-mute: var(--vt-c-black-mute);
+      --cat-pink: #f5c2e7;
-  
+      --cat-mauve: #cba6f7;
-      --color-border: var(--vt-c-divider-dark-2);
+      --cat-red: #f38ba8;
-      --color-border-hover: var(--vt-c-divider-dark-1);
+      --cat-maroon: #eba0ac;
-  
+      --cat-peach: #fab387;
-      --color-heading: var(--vt-c-text-dark-1);
+      --cat-yellow: #f9e2af;
-      --color-text: var(--vt-c-text-dark-2);
+      --cat-green: #a6e3a1;
+      --cat-teal: #94e2d5;
+      --cat-sky: #89dceb;
+      --cat-sapphire: #74c7ec;
+      --cat-blue: #89b4fa;
+      --cat-lavender: #b4befe;
+      --cat-text: #cdd6f4;
+      --cat-subtext1: #bac2de;
+      --cat-subtext0: #a6adc8;
+      --cat-overlay2: #9399b2;
+      --cat-overlay1: #7f849c;
+      --cat-overlay0: #6c7086;
+      --cat-surface2: #585b70;
+      --cat-surface1: #45475a;
+      --cat-surface0: #313244;
+      --cat-base: #1e1e2e;
+      --cat-mantle: #181825;
+      --cat-crust: #11111b;
     }
   }

about/assets/index.css

@@ -3,13 +3,13 @@
 * {
     /* shamelessly stolen from whatever vue generated */
     /* min-height: 100vh; */
-    color: var(--color-text);
+    color: var(--cat-text);
-    background: var(--color-background);
+    background: var(--cat-base);
     transition: color 0.5s, background-color 0.5s;
-    line-height: 1.6;
+    /* line-height: 1.6; */
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
         Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    font-size: 15px;
+    /* font-size: 15px; */
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -17,19 +17,20 @@
 
 .top-bar {
     text-align: center;
-    width: 20%;
+    /* width: 20%; */
     margin: auto;
 }
 
-.barbutton {
+.barbutton, .barbutton-disabled {
     text-decoration: none;
-    color: var(--color-text);
+    color: var(--cat-text);
-    background-color: var(--color-background-soft);
+    background-color: var(--cat-surface1);
     border-radius: 10px;
     display: inline-block;
-    width: 22.5%;
+    width: 80px;
 }
 
 .barbutton:hover {
-    background-color: purple;
+    background-color: var(--cat-pink);
+    color: var(--cat-mantle)
 }

about/index.html

@@ -12,12 +12,12 @@
 <body>
     <div class="top-bar">
         <a href="https://sadlynotsappho.dev" class="barbutton"> Home </a>
-        <a href="https://sadlynotsappho.dev/about" class="barbutton"> About </a>
+        <a class="barbutton-disabled"> About </a>
         <a href="https://sadlynotsappho.dev/socials" class="barbutton"> Socials </a>
         <a href="https://git.sadlynotsappho.dev/SadlyNotSappho" class="barbutton"> Git </a>
     </div>
     <div class="main">
-        hi i'm skye
+        
     </div>
 </body>
 </html>

root-vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/src/assets/pfp.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SadlyNotSappho</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

root-vue/src/App.vue

@@ -9,7 +9,7 @@ import Video from './components/Video.vue'
 </script>
 
 <template>
-  <TopBar />
+  <!-- <TopBar /> -->
   <header>
     <img alt="my pfp, made with @greyfeu's picrew" class="logo" src="./assets/pfp.png" width="150" height="150" />
 

root/assets/colors.css

@@ -0,0 +1,60 @@
+  /* semantic color variables for this project */
+  :root {
+    --cat-rosewater: #dc8a78;
+    --cat-flamingo: #dd7878;
+    --cat-pink: #ea76cb;
+    --cat-mauve: #8839ef;
+    --cat-red: #d20f39;
+    --cat-maroon: #e64553;
+    --cat-peach: #fe640b;
+    --cat-yellow: #df8e1d;
+    --cat-green: #40a02b;
+    --cat-teal: #179299;
+    --cat-sky: #04a5e5;
+    --cat-sapphire: #209fb5;
+    --cat-blue: #1e66f5;
+    --cat-lavender: #7287fd;
+    --cat-text: #4c4f69;
+    --cat-subtext1: #5c5f77;
+    --cat-subtext0: #6c6f85;
+    --cat-overlay2: #7c7f93;
+    --cat-overlay1: #8c8fa1;
+    --cat-overlay0: #9ca0b0;
+    --cat-surface2: #acb0be;
+    --cat-surface1: #bcc0cc;
+    --cat-surface0: #ccd0da;
+    --cat-base: #eff1f5;
+    --cat-mantle: #e6e9ef;
+    --cat-crust: #dce0e8;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --cat-rosewater: #f5e0dc;
+      --cat-flamingo: #f2cdcd;
+      --cat-pink: #f5c2e7;
+      --cat-mauve: #cba6f7;
+      --cat-red: #f38ba8;
+      --cat-maroon: #eba0ac;
+      --cat-peach: #fab387;
+      --cat-yellow: #f9e2af;
+      --cat-green: #a6e3a1;
+      --cat-teal: #94e2d5;
+      --cat-sky: #89dceb;
+      --cat-sapphire: #74c7ec;
+      --cat-blue: #89b4fa;
+      --cat-lavender: #b4befe;
+      --cat-text: #cdd6f4;
+      --cat-subtext1: #bac2de;
+      --cat-subtext0: #a6adc8;
+      --cat-overlay2: #9399b2;
+      --cat-overlay1: #7f849c;
+      --cat-overlay0: #6c7086;
+      --cat-surface2: #585b70;
+      --cat-surface1: #45475a;
+      --cat-surface0: #313244;
+      --cat-base: #1e1e2e;
+      --cat-mantle: #181825;
+      --cat-crust: #11111b;
+    }
+  }

root/assets/index.css

@@ -0,0 +1,54 @@
+@import url("./colors.css");
+
+* {
+    /* shamelessly stolen from whatever vue generated */
+    /* min-height: 100vh; */
+    color: var(--cat-text);
+    background: var(--cat-base);
+    transition: color 0.5s, background-color 0.5s;
+    /* line-height: 1.6; */
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+        Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    /* font-size: 15px; */
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.top-bar {
+    text-align: center;
+    /* width: 20%; */
+    margin: auto;
+}
+
+.barbutton, .barbutton-disabled {
+    text-decoration: none;
+    color: var(--cat-text);
+    background-color: var(--cat-surface1);
+    border-radius: 10px;
+    display: inline-block;
+    width: 80px;
+}
+
+.barbutton:hover {
+    background-color: var(--cat-pink);
+    color: var(--cat-mantle)
+}
+
+.logo {
+    border-radius: 50%;
+}
+
+.main {
+    margin-left: 3%;
+    margin-right: 3%;
+}
+.hometext {
+    display: inline-block;
+    width: 33%;
+    margin-left: 2%;
+}
+#ivplayer {
+    /* margin-top: 10%; */
+    display: inline-block;
+}

root/index.html

@@ -1,13 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/src/assets/pfp.png">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SadlyNotSappho</title>
+    <link rel="stylesheet" href="assets/index.css">
 </head>
+
 <body>
-    <div id="app"></div>
+    <div class="top-bar">
-    <script type="module" src="/src/main.ts"></script>
+        <a class="barbutton-disabled"> Home </a>
+        <a href="https://sadlynotsappho.dev/about" class="barbutton"> About </a>
+        <a href="https://sadlynotsappho.dev/socials" class="barbutton"> Socials </a>
+        <a href="https://git.sadlynotsappho.dev/SadlyNotSappho" class="barbutton"> Git </a>
+    </div>
+    <div class="main">
+        <img alt="my pfp, made with @greyfeu's picrew" class="logo" src="./assets/pfp.png" width="150" height="150" />
+        <div class="hometext">
+            <h1 class="pink">SadlyNotSappho</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" class="link">over
+                    on
+                    YouTube</a>, or, of course, you can just watch it embedded here (using
+                <a href="https://tube.catvibers.me" target="_blank" rel="noopener" class="link">an Invidious instance
+                    hosted on
+                    catvibers.me</a> instead
+                of YouTube)
+            </h3>
+        </div>
+        <iframe id="ivplayer" width="640" height="360" src="https://tube.catvibers.me/embed/wURbb6Tm1QM"
+            style="border: none"></iframe>
+    </div>
+
+
 </body>
+
 </html>