mirror of
https://codeberg.org/sofiaritz/website.git
synced 2023-09-06 01:24:41 +00:00
Only show skeletons on special dates
This commit is contained in:
parent
cc2df74d62
commit
717ad4ad3e
BIN
public/assets/skeletons/christmas.gif
Normal file
BIN
public/assets/skeletons/christmas.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 564 KiB |
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
@ -9,12 +9,12 @@
|
||||||
import Links from "./lib/routes/Links.svelte";
|
import Links from "./lib/routes/Links.svelte";
|
||||||
import FirstPost from "./lib/posts/FirstPost.svelte";
|
import FirstPost from "./lib/posts/FirstPost.svelte";
|
||||||
import NotFound from "./lib/routes/NotFound.svelte";
|
import NotFound from "./lib/routes/NotFound.svelte";
|
||||||
|
import Skeletons from "./lib/Skeletons.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Router>
|
<Router>
|
||||||
<h1>sofi web</h1>
|
<h1>sofi web</h1>
|
||||||
<img class="left-skeleton" alt="Esqueleto" src="/assets/skeleton.gif" />
|
<Skeletons/>
|
||||||
<img class="right-skeleton" alt="Esqueleto" src="/assets/skeleton.gif" />
|
|
||||||
<div>
|
<div>
|
||||||
<nav>
|
<nav>
|
||||||
<Navbar/>
|
<Navbar/>
|
||||||
|
@ -63,25 +63,4 @@
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
|
||||||
width: 200px;
|
|
||||||
position: fixed;
|
|
||||||
bottom: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-skeleton {
|
|
||||||
left: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-skeleton {
|
|
||||||
right: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
|
||||||
img {
|
|
||||||
width: 70px;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
48
src/lib/Skeletons.svelte
Normal file
48
src/lib/Skeletons.svelte
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
<script>
|
||||||
|
let _date = new Date()
|
||||||
|
|
||||||
|
const two_digits = (input) => {
|
||||||
|
if (input < 10) {
|
||||||
|
return `0${input}`
|
||||||
|
} else {
|
||||||
|
return `${input}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let date = `${two_digits(_date.getUTCDay() + 1)}-${two_digits(_date.getUTCMonth() + 1)}-${two_digits(_date.getUTCFullYear())}`
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if date.startsWith("23-12")}
|
||||||
|
<img class="left" alt="Esqueleto" src="/assets/skeletons/christmas.gif" />
|
||||||
|
<img class="right flip" alt="Esqueleto" src="/assets/skeletons/christmas.gif" />
|
||||||
|
{:else if date.startsWith("31-10")}
|
||||||
|
<img class="left" alt="Esqueleto" src="/assets/skeletons/default.gif" />
|
||||||
|
<img class="right" alt="Esqueleto" src="/assets/skeletons/default.gif" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
img {
|
||||||
|
width: 200px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
right: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1000px) {
|
||||||
|
img {
|
||||||
|
width: 70px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in a new issue