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"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>SadlyNotSappho</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

2
src/App.vue
View File

@ -5,7 +5,7 @@ import TheWelcome from './components/TheWelcome.vue'
<template> <template>
<header> <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"> <div class="wrapper">
<HelloWorld msg="Welcome to my shitass website!" /> <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 { :root {
--vt-c-white: #ffffff; --vt-c-white: #eff1f5; /* Base (latte) */
--vt-c-white-soft: #f8f8f8; --vt-c-white-soft: #bcc0cc; /* Surface1 (latte) */
--vt-c-white-mute: #f2f2f2; --vt-c-white-mute: #ccd0da; /* Surface0 (latte) */
--vt-c-black: #181818; --vt-c-black: #1e1e2e; /* Base (mocha) */
--vt-c-black-soft: #222222; --vt-c-black-soft: #45475a; /* Surface1 (mocha) */
--vt-c-black-mute: #282828; --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-1: rgba(60, 60, 60, 0.29); /* Overlay1 (mocha) */
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12); --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); /* Overlay1 (mocha) */
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); --vt-c-divider-dark-1: rgba(127, 132, 156, 0.65); /* Overlay1 (mocha) */
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); --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-1: var(--vt-c-text-light);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66); --vt-c-text-light-2: rgba(92, 95, 119, 0.66); /* Subtext1 (latte) */
--vt-c-text-dark-1: var(--vt-c-white); --vt-c-text-dark-1: var(--vt-c-text-dark);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64); --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 */

15
src/assets/main.css
View File

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

2
src/components/HelloWorld.vue
View File

@ -6,7 +6,7 @@ defineProps<{
<template> <template>
<div class="greetings"> <div class="greetings">
<h1 class="green">{{ msg }}</h1> <h1 class="pink">{{ msg }}</h1>
<h3> <h3>
If you came here for the video - which I previously said this site redirects to, it's 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>. <a href="https://www.youtube.com/watch?v=wURbb6Tm1QM" target="_blank" rel="noopener">right here</a>.