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

catppuccin-ify the colors and change the icon's alt text

This commit is contained in:
SadlyNotSappho 2023-04-21 12:48:12 -07:00
parent 8abd1bde4f
commit 39a5fb6e85
5 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/src/assets/pfp.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<title>SadlyNotSappho</title>
</head>
<body>
<div id="app"></div>

2
src/App.vue
View File

@ -5,7 +5,7 @@ import TheWelcome from './components/TheWelcome.vue'
<template>
<header>
<img alt="my pfp" 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="Welcome to my shitass website!" />

33
src/assets/base.css
View File

@ -1,24 +1,25 @@
/* color palette from <https://github.com/vuejs/theme> */
/* dark theme using catppuccin mocha, light using catppuccin latte - https://github.com/catppuccin/catppuccin */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-white: #eff1f5; /* Base (latte) */
--vt-c-white-soft: #bcc0cc; /* Surface1 (latte) */
--vt-c-white-mute: #ccd0da; /* Surface0 (latte) */
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-black: #1e1e2e; /* Base (mocha) */
--vt-c-black-soft: #45475a; /* Surface1 (mocha) */
--vt-c-black-mute: #313244; /* Surface0 (mocha) */
--vt-c-indigo: #2c3e50;
--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);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--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-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
--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 */

15
src/assets/main.css
View File

@ -9,12 +9,21 @@
}
a,
.green {
.pink {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
color: #ea76cb; /* Pink (latte) */
transition: 0.4s;
}
@media (prefers-color-scheme: dark) {
a,
.pink {
text-decoration: none;
color: #f5c2e7; /* Pink (mocha) */
transition: 0.4s;
}
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
@ -32,4 +41,4 @@ a,
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}
}

2
src/components/HelloWorld.vue
View File

@ -6,7 +6,7 @@ defineProps<{
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h1 class="pink">{{ msg }}</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">right here</a>.