animations and new Nav and footer (stolen from segfault)
This commit is contained in:
parent
d3b5a2577e
commit
cb3759c183
GPG Key ID:
08063D5407090BC2
|
|
@ -25,6 +25,7 @@
|
|||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^3.0.1",
|
||||
"svelte-dark-mode": "^2.1.0",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^4.9.3",
|
||||
"unocss": "^0.48.4",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#backdesk {
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
|
|
@ -46,7 +50,6 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
|
|
@ -108,17 +111,16 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--glowish-yellow);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(72, 115, 243);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.middle-bottom {
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
<script>
|
||||
import "uno.css";
|
||||
import "$lib/style.css";
|
||||
import Foote from "$lib/foote.svelte";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<main class="dark:bg-black bg-white">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<Foote/>
|
||||
|
|
@ -3,22 +3,21 @@
|
|||
import { blur, scale } from 'svelte/transition';
|
||||
function LSDSim() {
|
||||
console.log("hovered");
|
||||
document.getElementById("back").style.filter = "animation: fadeIn";
|
||||
};
|
||||
</script>
|
||||
|
||||
<body id="content">
|
||||
<div class="center">
|
||||
<img id="backdesk" src="/images/BG_FHD_darker.png" alt="" style="" transition:blur="{{amount: 10, delay: 200, duration: 1000}}"/>
|
||||
<img id="backdesk" src="/images/BG_FHD_darker.png" alt="" style="" in:blur="{{amount: 10, delay: 200, duration: 1000}}"/>
|
||||
<div class="middle">
|
||||
<div class="wrapper">
|
||||
<img src="{data.avatar}45198486?v=4" title="Why are you hovering over everything?" alt="" id="profilepicture" on:mouseenter={LSDSim} transition:blur="{{amount: 10}}"/>
|
||||
<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>
|
||||
<hr class="text-white" style="width:60%;text-align:center;color:#fff;border-color: #fff"/>
|
||||
</div>
|
||||
<div class="justify-center flex flex-row items-center gap-3 text-3xl">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import {blur} from 'svelte/transition';
|
||||
import Navi from '$lib/navi.svelte';
|
||||
</script>
|
||||
|
||||
|
||||
<Navi/>
|
||||
<div class="bg-fixed " style="background-image: url($static/images/BG_FHD_darker_mb.png)">
|
||||
<div class="flex place-content-center place-items-center gap-3 rounded-2xl m-4 bg-slate-900">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1 +1,5 @@
|
|||
<script>
|
||||
import Navi from '$lib/navi.svelte';
|
||||
</script>
|
||||
<Navi/>
|
||||
<p>When the page is sus</p>
|
||||
|
|
@ -23,6 +23,7 @@ export default defineConfig({
|
|||
}),
|
||||
presetWind({
|
||||
dark: "class"
|
||||
/* use dark: "class" when adding manual JS*/
|
||||
})
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -4,17 +4,8 @@ import UnoCSS from 'unocss/vite';
|
|||
import presetIcons from '@unocss/preset-icons';
|
||||
|
||||
const config: UserConfig = {
|
||||
plugins: [sveltekit(), UnoCSS(
|
||||
{
|
||||
shortcuts: {
|
||||
// Shortcuts go here: Format: " class : "unocss" "
|
||||
sm: "640px"
|
||||
},
|
||||
rules : [
|
||||
['m-1', {margin : '0.25 em' }],
|
||||
]
|
||||
}
|
||||
),
|
||||
plugins: [sveltekit(), UnoCSS(),
|
||||
/* Self note: Don't add a config between the (), it just overrides the external config. */
|
||||
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue