catppuccin-ify the colors and change the icon's alt text
This commit is contained in:
parent
8abd1bde4f
commit
39a5fb6e85
|
@ -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>
|
||||
|
|
|
@ -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!" />
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>.
|
||||
|
|
Loading…
Reference in New Issue