forked from ProjectSegfault/website
added a cool animation, to be improved
This commit is contained in:
parent
b03e25b001
commit
dfd20a965b
@ -26,6 +26,7 @@
|
|||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@modular-css/svelte": "^28.1.0",
|
||||||
"@sveltejs/adapter-static": "next"
|
"@sveltejs/adapter-static": "next"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import css from "../assets/animation.css";
|
||||||
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
|
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>
|
||||||
|
Loading…
Reference in New Issue
Block a user