This commit is contained in:
Shav Kinderlehrer 2023-12-01 02:13:13 -05:00
parent 82d59d4e1f
commit a5d5425d87
4 changed files with 132 additions and 0 deletions

View File

@ -4,6 +4,7 @@
"bear", "bear",
"cave-buddy", "cave-buddy",
"liv", "liv",
"nis"
]; ];
</script> </script>

View File

@ -0,0 +1,131 @@
<script lang="ts">
import { blur } from "svelte/transition";
import CountDownTimer from "$lib/elem/CountDownTimer.svelte";
let generated = false;
function generate() {
generated = true;
}
</script>
<main>
<h1>Nis</h1>
<div id="pre-message">
<p>
Now, I wasn't sure exactly what to do here. I knew it should be Taylor
Swift themed, but that felt a little <i>too</i> basic.
</p>
<p>
So instead, I have harnessed my immense programming and artistic skills to
make an entire <b>1989</b> cover for you..
</p>
</div>
<h2>Behold</h2>
<div class="album-image">
<h3>Taylor's Version</h3>
<img src="/nis/1989_taylor_version.png" alt="1989 Taylor's Version." />
</div>
{#if !generated}
<div id="button-holder">
<button on:click={generate}><i>NIS</i>IFI</button>
<p class="n"><i>click me!</i></p>
</div>
{/if}
{#if generated}
<div class="album-image" transition:blur={{ duration: 5000 }}>
<h3>Nis's Version</h3>
<img src="/nis/1989_nis_version.png" alt="1989 Taylor's Version." />
</div>
{/if}
{#if generated}
<p>I'd say Nis's Version is pretty good. Maybe even better.</p>
<hr style="width: 50%;" />
{/if}
<div id="message">
<p>
Jokes aside, I really am proud to be your brother. Every year we grow
closer and I cherish every moment of that. Here's to a zillion more years
of me begging you to make me cookies and you begging me to watch Doctor
Who with you.
</p>
</div>
<CountDownTimer birthday="Dec 1" />
</main>
<style>
@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,400;0,700;1,400;1,700&display=swap");
main {
text-align: center;
font-family: "Zilla Slab", serif;
}
p:not(.n) {
max-width: 33em;
margin: 0 auto;
}
.album-image {
background: #38323b;
padding: 1em;
margin: 1em;
border-radius: 10px;
text-align: center;
}
.album-image img {
width: 100%;
border-radius: 10px;
}
.album-image h3 {
margin: 0;
margin-bottom: 0.5em;
color: #bdb8bf;
}
#button-holder {
display: flex;
justify-content: center;
align-items: center;
}
#button-holder p {
padding: 3px;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
button {
width: 40%;
border-radius: 5px;
font-size: 2em;
border: 2px solid #5993a8;
background: #18556b;
color: white;
cursor: pointer;
}
#message {
margin: 2em;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 MiB