add about, and attempt to add a top bar to root
This commit is contained in:
SadlyNotSappho
parent
0ff903c22d
commit
19fadfc11d
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,4 +41,9 @@ a,
|
|||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background-color: green;
|
||||
margin: 10%
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="top-bar">
|
||||
<a href="https://sadlynotsappho.dev/about" class="about-button">About</a>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue