From 19fadfc11d70953c297c7b73d97198c0d0248a33 Mon Sep 17 00:00:00 2001
From: SadlyNotSappho <you dont get this>
Date: Fri, 19 May 2023 13:07:11 -0700
Subject: [PATCH] add about, and attempt to add a top bar to root

---
 about/assets/colors.css        | 50 ++++++++++++++++++++++++++++++
 about/assets/index.css         | 35 +++++++++++++++++++++
 about/assets/index.js          |  0
 about/index.html               | 23 ++++++++++++++
 root/src/App.vue               | 13 ++------
 root/src/assets/base.css       | 56 +++++++++++++++++++++++++++++++++-
 root/src/assets/main.css       |  5 +++
 root/src/components/TopBar.vue |  5 +++
 8 files changed, 176 insertions(+), 11 deletions(-)
 create mode 100644 about/assets/colors.css
 create mode 100644 about/assets/index.css
 create mode 100644 about/assets/index.js
 create mode 100644 about/index.html
 create mode 100644 root/src/components/TopBar.vue

diff --git a/about/assets/colors.css b/about/assets/colors.css
new file mode 100644
index 0000000..8bbebde
--- /dev/null
+++ b/about/assets/colors.css
@@ -0,0 +1,50 @@
+/* dark theme using catppuccin mocha, light using catppuccin latte - https://github.com/catppuccin/catppuccin */
+:root {
+    --vt-c-white: #eff1f5; /* Base (latte) */
+    --vt-c-white-soft: #bcc0cc; /* Surface1 (latte) */
+    --vt-c-white-mute: #ccd0da; /* Surface0 (latte) */
+  
+    --vt-c-black: #1e1e2e; /* Base (mocha) */
+    --vt-c-black-soft: #45475a; /* Surface1 (mocha) */
+    --vt-c-black-mute: #313244; /* Surface0 (mocha) */
+  
+    --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); /* 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-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 */
+:root {
+    --color-background: var(--vt-c-white);
+    --color-background-soft: var(--vt-c-white-soft);
+    --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);
+      --color-background-soft: var(--vt-c-black-soft);
+      --color-background-mute: var(--vt-c-black-mute);
+  
+      --color-border: var(--vt-c-divider-dark-2);
+      --color-border-hover: var(--vt-c-divider-dark-1);
+  
+      --color-heading: var(--vt-c-text-dark-1);
+      --color-text: var(--vt-c-text-dark-2);
+    }
+}
\ No newline at end of file
diff --git a/about/assets/index.css b/about/assets/index.css
new file mode 100644
index 0000000..961c7d0
--- /dev/null
+++ b/about/assets/index.css
@@ -0,0 +1,35 @@
+@import url("./colors.css");
+
+* {
+    /* shamelessly stolen from whatever vue generated */
+    /* min-height: 100vh; */
+    color: var(--color-text);
+    background: var(--color-background);
+    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 {
+    text-decoration: none;
+    color: var(--color-text);
+    background-color: var(--color-background-soft);
+    border-radius: 10px;
+    display: inline-block;
+    width: 22.5%;
+}
+
+.barbutton:hover {
+    background-color: purple;
+}
\ No newline at end of file
diff --git a/about/assets/index.js b/about/assets/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/about/index.html b/about/index.html
new file mode 100644
index 0000000..3775c8c
--- /dev/null
+++ b/about/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About SadlyNotSappho</title>
+    <link rel="stylesheet" href="assets/index.css">
+</head>
+
+<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 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>
\ No newline at end of file
diff --git a/root/src/App.vue b/root/src/App.vue
index ff1006f..7a10b3d 100755
--- a/root/src/App.vue
+++ b/root/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
+import TopBar from './components/TopBar.vue';
 import Video from './components/Video.vue'
 
 // function alert() {
@@ -8,17 +9,9 @@ import Video from './components/Video.vue'
 </script>
 
 <template>
-  <!-- <div class="navbar">
-    <button @click="alert()">Home</button>
-  </div> -->
+  <TopBar />
   <header>
-    <img
-      alt="my pfp, made with @greyfeu's picrew"
-      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="SadlyNotSappho" />
diff --git a/root/src/assets/base.css b/root/src/assets/base.css
index 3ac7bd8..9ec9667 100755
--- a/root/src/assets/base.css
+++ b/root/src/assets/base.css
@@ -20,6 +20,8 @@
   --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 */
@@ -34,7 +36,32 @@
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
 
-  --section-gap: 160px;
+  --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) {
@@ -48,6 +75,33 @@
 
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
+
+    --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;
   }
 }
 
diff --git a/root/src/assets/main.css b/root/src/assets/main.css
index 88fddbe..580b65d 100755
--- a/root/src/assets/main.css
+++ b/root/src/assets/main.css
@@ -41,4 +41,9 @@ a,
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
+}
+
+.top-bar {
+  background-color: green;
+  margin: 10%
 }
\ No newline at end of file
diff --git a/root/src/components/TopBar.vue b/root/src/components/TopBar.vue
new file mode 100644
index 0000000..cfda800
--- /dev/null
+++ b/root/src/components/TopBar.vue
@@ -0,0 +1,5 @@
+<template>
+    <div class="top-bar">
+        <a href="https://sadlynotsappho.dev/about" class="about-button">About</a>
+    </div>
+</template>
\ No newline at end of file