feat: add new content, improve layout and styling
This commit is contained in:
parent
4f81608303
commit
49949739aa
SSH Key Fingerprint:
SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
@ -15,7 +15,7 @@
|
||||
{ href: '', name: 'home', iconUri: '/icons/home.png' },
|
||||
{ href: 'entries', name: 'entries', iconUri: '/icons/entries.png' },
|
||||
{ href: 'guestbook', name: 'guestbook', iconUri: '/icons/guestbook.png' },
|
||||
{ href: 'about', name: 'about', iconUri: '/icons/about.png' },
|
||||
{ href: 'about', name: 'about', iconUri: '/icons/about.png' }
|
||||
];
|
||||
|
||||
const routeComponents = data.route.split('/');
|
||||
@ -63,9 +63,36 @@
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="lg:mx-[4vw] 2xl:mx-[8vw] lg:my-[4vh]"><slot /></div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="hidden">
|
||||
<defs>
|
||||
<filter id="squiggly-0">
|
||||
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
|
||||
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
|
||||
</filter>
|
||||
<filter id="squiggly-1">
|
||||
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
|
||||
</filter>
|
||||
|
||||
<nav class="w-full z-10 fixed bottom-0 bg-ralsei-black">
|
||||
<filter id="squiggly-2">
|
||||
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
|
||||
</filter>
|
||||
<filter id="squiggly-3">
|
||||
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
|
||||
</filter>
|
||||
|
||||
<filter id="squiggly-4">
|
||||
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="h-[96vh] lg:px-[4vw] 2xl:px-[8vw] lg:py-[4vh]"><slot /></div>
|
||||
|
||||
<nav class="w-full max-h-[4vh] z-10 fixed bottom-0 bg-ralsei-black">
|
||||
<div
|
||||
class="
|
||||
max-w-full max-h-fit p-1 overflow-auto
|
||||
|
||||
@ -2,10 +2,11 @@
|
||||
import Window from '../components/window.svelte';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-none gap-y-4 lg:gap-y-0 flex-wrap md:flex-nowrap">
|
||||
<div class="flex flex-none gap-y-4 lg:gap-y-0 flex-wrap md:flex-nowrap md:h-full">
|
||||
<div class="flex flex-col gap-y-2 lg:gap-y-0">
|
||||
<Window title="readme?" iconUri='/icons/question.png'>
|
||||
<div class="prose prose-ralsei prose-img:m-0 leading-6">
|
||||
<p>hi there <img class="inline h-6" src="/wavey.gif" alt="wavey" title="hi :33" /></p>
|
||||
<p>hi there <img class="inline h-6 animate-squiggle" src="/wavey.gif" alt="wavey" title="hi :33" /></p>
|
||||
<p>
|
||||
i'm dusk! and this is my personal spot where i plan to put everything that i do on (<i>if i don't forget to...</i>)
|
||||
</p>
|
||||
@ -14,6 +15,14 @@
|
||||
</div>
|
||||
</Window>
|
||||
<div class="grow"/>
|
||||
<Window title="latest stuff">
|
||||
<div class="prose prose-ralsei prose-img:m-0 leading-6">
|
||||
<p>worked on a game for a jam!! check it out at <a href="https://manonox.itch.io/fish-well">it's itch.io page</a>!</p>
|
||||
<img src="https://img.itch.zone/aW1hZ2UvMjkxNjQzOC8xNzQ2MDY2Mi5wbmc=/original/%2BIb5Vf.png" alt="fish well gameplay screenshot">
|
||||
</div>
|
||||
</Window>
|
||||
</div>
|
||||
<div class="grow" />
|
||||
<Window title="contacts!" iconUri='/icons/contact.png'>
|
||||
<div class="prose prose-ralsei leading-6">
|
||||
<ul>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
<div class="flex flex-col-reverse md:flex-row gap-2 md:gap-4">
|
||||
<div class="mb-[7vh] md:hidden" />
|
||||
<Window title="guestbook">
|
||||
<Window title="guestbook" iconUri="/icons/guestbook.png">
|
||||
<div class="flex flex-col gap-4 2xl:w-[60ch]">
|
||||
<p>
|
||||
hia, here is the guestbook if you wanna post anything :)
|
||||
@ -52,7 +52,7 @@
|
||||
type="submit"
|
||||
value={platform}
|
||||
formaction="?/post_{platform}"
|
||||
class="text-lg text-ralsei-green-light leading-5 motion-safe:hover:animate-bounce w-fit p-0.5"
|
||||
class="text-lg text-ralsei-green-light leading-5 hover:underline motion-safe:hover:animate-squiggle w-fit p-0.5"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
@ -70,7 +70,7 @@
|
||||
</div>
|
||||
</Window>
|
||||
<div class="grow" />
|
||||
<Window title="entries">
|
||||
<Window title="entries" iconUri="/icons/entries.png">
|
||||
<div class="flex flex-col gap-2 md:gap-4 2xl:w-[60ch]">
|
||||
{#if data.getRatelimited}
|
||||
<p class="text-error">
|
||||
|
||||
@ -27,8 +27,13 @@
|
||||
content: '>>>> ';
|
||||
}
|
||||
|
||||
.prose a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
@apply animate-pulse-fast;
|
||||
@apply motion-safe:animate-squiggle;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
@ -83,6 +88,28 @@
|
||||
font-display: swap;
|
||||
src: url('/fonts/comici.woff2') format('woff2');
|
||||
}
|
||||
|
||||
.animate-squiggle {
|
||||
animation: squigglevision 0.3s infinite;
|
||||
}
|
||||
|
||||
@keyframes squigglevision {
|
||||
0% {
|
||||
filter: url("#squiggly-0");
|
||||
}
|
||||
25% {
|
||||
filter: url("#squiggly-1");
|
||||
}
|
||||
50% {
|
||||
filter: url("#squiggly-2");
|
||||
}
|
||||
75% {
|
||||
filter: url("#squiggly-3");
|
||||
}
|
||||
100% {
|
||||
filter: url("#squiggly-4");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user