added a cool animation, to be improved

This commit is contained in:
Midou36O 2022-04-22 18:54:51 +00:00
parent b03e25b001
commit dfd20a965b
Signed by untrusted user: midou
GPG Key ID: 08063D5407090BC2
3 changed files with 1264 additions and 1306 deletions

View File

@ -26,6 +26,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@modular-css/svelte": "^28.1.0",
"@sveltejs/adapter-static": "next" "@sveltejs/adapter-static": "next"
} }
} }

View File

@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png"; import css from "../assets/animation.css";
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
</script> </script>
<header> <header>
<img src={ProjectSegfaultLogo} id="ProjectSegfaultLogoHeader" alt="Why is this not loading? Anyway, project segfault's logo." /> <img src={ProjectSegfaultLogo} id="ProjectSegfaultLogoHeader" alt="Why is this not loading? Anyway, project segfault's logo." />
<a href="/" style="color: #ce1717">Project</a> <a href="/" style="color: #00d4aa">Segfault</a> <a href="/" class="text-flicker-in-glow" style="color: #ce1717">Project <span style="color: #00d4aa">Segfault</span></a>
<section class="center"> <section class="center">
<a href="/instances" class="button">Instances</a> <a href="/instances" class="button">Instances</a>
@ -23,6 +23,8 @@
</header> </header>
<style> <style>
header { header {
background-color: #252525; background-color: #252525;
border: solid #252525; border: solid #252525;
@ -65,4 +67,11 @@
background-color: #4beacb; background-color: #4beacb;
box-shadow: 0 0.51em 0.51em 0.4em #00b591; box-shadow: 0 0.51em 0.51em 0.4em #00b591;
} }
.text-flicker-in-glow {
opacity:0;
}
.text-flicker-in-glow:hover {
-webkit-animation: text-flicker-in-glow 900ms both;
animation: text-flicker-in-glow 900ms both;
}
</style> </style>

2554
yarn.lock

File diff suppressed because it is too large Load Diff