start re-writing root with plain html

This commit is contained in:
SadlyNotSappho 2023-05-23 15:58:23 -07:00
parent 19fadfc11d
commit 9be8cabb41
30 changed files with 234 additions and 69 deletions

View File

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

View File

@ -3,13 +3,13 @@
* {
/* shamelessly stolen from whatever vue generated */
/* min-height: 100vh; */
color: var(--color-text);
background: var(--color-background);
color: var(--cat-text);
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);
background-color: var(--color-background-soft);
color: var(--cat-text);
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)
}

View File

View File

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

View File

13
root-vue/index.html Executable file
View File

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

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

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

View File

Before

Width:  |  Height:  |  Size: 276 B

After

Width:  |  Height:  |  Size: 276 B

View File

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

View File

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

View File

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

60
root/assets/colors.css Normal file
View File

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

54
root/assets/index.css Normal file
View File

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

BIN
root/assets/pfp.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

44
root/index.html Executable file → Normal file
View File

@ -1,13 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
<link rel="stylesheet" href="assets/index.css">
</head>
<body>
<div class="top-bar">
<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>