Commit at 4AM Coming right up
This commit is contained in:
parent
cb3759c183
commit
8c4229fb07
GPG Key ID:
08063D5407090BC2
|
|
@ -18,6 +18,7 @@
|
|||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
"@typescript-eslint/parser": "^5.45.0",
|
||||
"@unocss/preset-icons": "^0.48.4",
|
||||
"@unocss/preset-web-fonts": "^0.48.4",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import url('https://fonts.googleapis.co/css2?family=Open+Sans&display=swap');
|
||||
|
||||
:root {
|
||||
--purple-color: #7a00ec;
|
||||
--brighter-purple-color: #9d41f3;
|
||||
|
|
@ -42,7 +40,6 @@ html {
|
|||
.h1dance {
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
color: var(--brighter-purple-color);
|
||||
}
|
||||
|
||||
.bg {
|
||||
|
|
@ -53,7 +50,6 @@ body {
|
|||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
color: var(--brighter-purple-color);
|
||||
margin: 0px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -90,21 +86,15 @@ body {
|
|||
border-radius: 50%;
|
||||
transition: all 0.5s ease-in-out;
|
||||
margin-bottom: -20px;
|
||||
color: var(--purple-color);
|
||||
filter:hue-rotate(0deg);
|
||||
}
|
||||
|
||||
#profilepicture:hover {
|
||||
height: 125px;
|
||||
width: 125px;
|
||||
color: var(--glowish-yellow);
|
||||
animation: rainbow 1s steps(36) infinite;
|
||||
}
|
||||
|
||||
|
||||
.middle {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -141,55 +131,18 @@ img {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
body {
|
||||
font-size: calc(9px + 1vmin);
|
||||
background-image: url('/images/BG_FHD_darker_mb.png');
|
||||
}
|
||||
.pfp-holder {
|
||||
margin-top: -50%;
|
||||
margin-left: 0%;
|
||||
position: static;
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#backmob {
|
||||
object-fit: fill;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
animation: rainbow 20s steps(120) infinite;
|
||||
}
|
||||
|
||||
|
||||
.banner {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: #6e0000;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
animation: fadeInOut linear 5s infinite;
|
||||
}
|
||||
|
||||
.banner:hover {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
--primary: #151515;
|
||||
--secondary: #252525;
|
||||
--tertiary: #353535;
|
||||
--text: #ffffffde;
|
||||
--grey: #5454547a;
|
||||
--alt: #333;
|
||||
--alt-text: #ddd;
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<style>
|
||||
</style>
|
||||
|
||||
<main class="dark:bg-black bg-white">
|
||||
<main class="dark:bg-black bg-gray-300">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,24 @@
|
|||
<script>
|
||||
import data from '$lib/data.json';
|
||||
import { blur, scale } from 'svelte/transition';
|
||||
function LSDSim() {
|
||||
console.log("hovered");
|
||||
};
|
||||
import Navi from '$lib/navi.svelte';
|
||||
</script>
|
||||
|
||||
<body id="content">
|
||||
<Navi/>
|
||||
<body class="dark:bg-black bg-gray-300 font-sans" id="content">
|
||||
<div class="center">
|
||||
<img id="backdesk" src="/images/BG_FHD_darker.png" alt="" style="" in:blur="{{amount: 10, delay: 200, duration: 1000}}"/>
|
||||
<div class="middle">
|
||||
<div class="justify-center flex items-center h-screen">
|
||||
<div class="wrapper">
|
||||
<img src="{data.avatar}45198486?v=4" title="Why are you hovering over everything?" alt="" id="profilepicture" on:mouseenter={LSDSim} in:blur="{{amount: 10}}"/>
|
||||
<div class="text-violet-500"><h1>{data.name}</h1></div>
|
||||
<div class=""><p id="para" style="margin-top: -15px; color:#fff;">{@html data.description}</p></div>
|
||||
<div class="text-black dark:text-white"><h1>{data.name}</h1></div>
|
||||
<div class="text-black dark:text-white"><p id="para" style="margin-top: -15px;">{@html data.description}</p></div>
|
||||
<div>
|
||||
<hr class="text-white" style="width:60%;text-align:center;color:#fff;border-color: #fff"/>
|
||||
<hr class="text-black bg-black dark:bg-white dark:text-white" style="width:60%;text-align:center;"/>
|
||||
</div>
|
||||
<div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-yellow-500">
|
||||
<div><a class="text-white i-carbon-logo-github" href="{data.github}{data.gh} " title="Midou's GitHub" >G</a></div>
|
||||
<div><a class="text-white i-simple-icons-matrix" href="{data.matrix}{data.mtx}"title="Midou's Matrix">M</a></div>
|
||||
<div><a class="text-white i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>
|
||||
<div><a class="text-white i-ph-currency-circle-dollar-bold text-4xl" href="{data.github}sponsors/{data.donate}" title="Donate to Midou.">D</a></div>
|
||||
<div><a class="text-black dark:text-white i-carbon-logo-github" href="{data.github}{data.gh} " title="Midou's GitHub" >G</a></div>
|
||||
<div><a class="text-black dark:text-white i-simple-icons-matrix" href="{data.matrix}{data.mtx}"title="Midou's Matrix">M</a></div>
|
||||
<div><a class="text-black dark:text-white i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>
|
||||
<div><a class="text-black dark:text-white i-ph-currency-circle-dollar-bold text-4xl" href="{data.github}sponsors/{data.donate}" title="Donate to Midou.">D</a></div>
|
||||
</div>
|
||||
<hr style="width:10%; height: 100; border: solid 0.5px; color:rgb(73, 81, 88);border-color: rgb(73, 81, 88);"/>
|
||||
<div class="bio-and-projects">
|
||||
<a id="bplink" href="/about" title="Midou's Bio" style="color:rgb(216, 213, 15);">Bio</a> | <a id="plink" href="/projects" title="Midou's Projects" style="color:rgb(216, 213, 15);">Projects</a>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
<Navi/>
|
||||
<div class="bg-fixed " style="background-image: url($static/images/BG_FHD_darker_mb.png)">
|
||||
<div class="flex grid h-screen place-content-center content-center place-items-center gap-3 rounded-2xl m-10 bg-slate-900">
|
||||
<div class="i-zondicons-information-solid text-stone-400 text-4xl" ></div>
|
||||
<h1 class="text-stone-400 justify-center hover:text-stone" style="">h</h1>
|
||||
<div class="flex grid h-screen place-content-center content-center place-items-center gap-3 rounded-2xl mt-0 mx-3 outline outline-offset-1 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50">
|
||||
<div class="i-zondicons-information-solid text-stone-700 dark:text-stone-400 text-4xl" ></div>
|
||||
<h1 class="dark:text-stone-400 text-stone-700 justify-center hover:text-stone" style="">About</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,8 @@ import {
|
|||
presetTypography,
|
||||
transformerVariantGroup,
|
||||
transformerDirectives,
|
||||
presetWind
|
||||
presetWind,
|
||||
presetWebFonts
|
||||
} from "unocss";
|
||||
|
||||
import { extractorSvelte } from "unocss";
|
||||
|
|
@ -24,6 +25,14 @@ export default defineConfig({
|
|||
presetWind({
|
||||
dark: "class"
|
||||
/* use dark: "class" when adding manual JS*/
|
||||
}),
|
||||
presetWebFonts({
|
||||
provider: 'bunny',
|
||||
fonts: {
|
||||
sans: 'Outfit',
|
||||
mono: ['Fira Code'],
|
||||
|
||||
}
|
||||
})
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
|||
import type { UserConfig } from 'vite';
|
||||
import UnoCSS from 'unocss/vite';
|
||||
import presetIcons from '@unocss/preset-icons';
|
||||
import presetWebFonts from '@unocss/preset-web-fonts'
|
||||
|
||||
const config: UserConfig = {
|
||||
plugins: [sveltekit(), UnoCSS(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue