SadlyNotSappho
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add about, and attempt to add a top bar to root

This commit is contained in:
SadlyNotSappho 2023-05-19 13:07:11 -07:00
parent 0ff903c22d
commit 19fadfc11d
8 changed files with 176 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
about/assets/colors.css Normal file
View File

@ -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);
}
}

35
about/assets/index.css Normal file
View File

@ -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;
}

0
about/assets/index.js Normal file
View File

23
about/index.html Normal file
View File

@ -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>

13
root/src/App.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue' import HelloWorld from './components/HelloWorld.vue'
import TopBar from './components/TopBar.vue';
import Video from './components/Video.vue' import Video from './components/Video.vue'
// function alert() { // function alert() {
@ -8,17 +9,9 @@ import Video from './components/Video.vue'
</script> </script>
<template> <template>
<!-- <div class="navbar"> <TopBar />
<button @click="alert()">Home</button>
</div> -->
<header> <header>
<img <img alt="my pfp, made with @greyfeu's picrew" class="logo" src="./assets/pfp.png" width="150" height="150" />
alt="my pfp, made with @greyfeu's picrew"
class="logo"
src="./assets/pfp.png"
width="150"
height="150"
/>
<div class="wrapper"> <div class="wrapper">
<HelloWorld msg="SadlyNotSappho" /> <HelloWorld msg="SadlyNotSappho" />

56
root/src/assets/base.css
View File

@ -20,6 +20,8 @@
--vt-c-text-light-2: rgba(92, 95, 119, 0.66); /* Subtext1 (latte) */ --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-1: var(--vt-c-text-dark);
--vt-c-text-dark-2: rgba(186, 194, 222, 0.64); /* Subtext1 (mocha) */ --vt-c-text-dark-2: rgba(186, 194, 222, 0.64); /* Subtext1 (mocha) */
} }
/* semantic color variables for this project */ /* semantic color variables for this project */
@ -34,7 +36,32 @@
--color-heading: var(--vt-c-text-light-1); --color-heading: var(--vt-c-text-light-1);
--color-text: 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) { @media (prefers-color-scheme: dark) {
@ -48,6 +75,33 @@
--color-heading: var(--vt-c-text-dark-1); --color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2); --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;
} }
} }

5
root/src/assets/main.css
View File

@ -42,3 +42,8 @@ a,
padding: 0 2rem; padding: 0 2rem;
} }
} }
.top-bar {
background-color: green;
margin: 10%
}

5
root/src/components/TopBar.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div class="top-bar">
<a href="https://sadlynotsappho.dev/about" class="about-button">About</a>
</div>
</template>