fix: even more layotuing ahhh i hate css
This commit is contained in:
parent
0cec3060a1
commit
023be3d733
@ -73,7 +73,6 @@
|
||||
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
|
||||
</filter>
|
||||
|
||||
<filter id="squiggly-2">
|
||||
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
|
||||
@ -82,7 +81,6 @@
|
||||
<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" />
|
||||
@ -90,16 +88,18 @@
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="h-[96vh] lg:px-[4vw] 2xl:px-[8vw] lg:py-[4vh]"><slot /></div>
|
||||
<div class="md:h-[96vh] pb-[7vh] 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">
|
||||
<nav class="w-full max-h-[6vh] fixed bottom-0 z-10 bg-ralsei-black">
|
||||
<div
|
||||
class="
|
||||
max-w-full max-h-fit p-1 overflow-auto
|
||||
grid grid-flow-col grid-rows-1 gap-2 justify-start
|
||||
border-ralsei-white border-8
|
||||
bg-gradient-to-r to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30%
|
||||
"
|
||||
max-w-full max-h-fit p-1 overflow-auto
|
||||
grid grid-flow-col grid-rows-1 gap-2 justify-start
|
||||
border-ralsei-white border-8
|
||||
bg-gradient-to-r to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30%
|
||||
"
|
||||
style="border-style: ridge hidden hidden hidden;"
|
||||
>
|
||||
{#each menuItems as item}
|
||||
|
@ -2,7 +2,7 @@
|
||||
import Window from '../components/window.svelte';
|
||||
</script>
|
||||
|
||||
<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 md:flex-row gap-y-4 lg:gap-y-0 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">
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
</Window>
|
||||
</div>
|
||||
<div class="grow" />
|
||||
<div class="hidden md:block md:grow" />
|
||||
<Window title="contacts!" iconUri='/icons/contact.png'>
|
||||
<div class="prose prose-ralsei leading-6">
|
||||
<ul>
|
||||
|
@ -7,7 +7,6 @@
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col-reverse md:flex-row gap-2 md:gap-4">
|
||||
<div class="mb-[7vh] md:hidden" />
|
||||
<Window title="guestbook" iconUri="/icons/guestbook.png">
|
||||
<div class="flex flex-col gap-4 2xl:w-[60ch]">
|
||||
<p>
|
||||
@ -56,61 +55,59 @@
|
||||
</div>
|
||||
</Window>
|
||||
<div class="grow" />
|
||||
<div class="md:mb-[7vh]">
|
||||
<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">
|
||||
woops, looks like you are being ratelimited, try again in like half a minute :3
|
||||
</p>
|
||||
{:else if data.getError}
|
||||
<p class="text-error">got error trying to fetch entries, pls tell me about this</p>
|
||||
<details>
|
||||
<summary>error</summary>
|
||||
<p>{data.getError}</p>
|
||||
</details>
|
||||
{:else}
|
||||
{#each data.entries as [entry_id, entry] (entry_id)}
|
||||
{@const date = new Date(entry.timestamp * 1e3).toLocaleString()}
|
||||
<div class="entry entryflex">
|
||||
<div class="flex flex-row">
|
||||
<p class="place-self-start grow text-2xl font-monospace">
|
||||
#{entry_id}
|
||||
</p>
|
||||
<p class="justify-end self-center text-sm font-monospace">{date}</p>
|
||||
</div>
|
||||
<p class="text-lg text-wrap overflow-hidden text-ellipsis ml-0.5 max-w-[56ch]">
|
||||
{entry.content}
|
||||
</p>
|
||||
<p
|
||||
class="place-self-end text-sm font-monospace max-w-[16ch] md:max-w-[24ch] lg:max-w-[32ch] overflow-hidden text-ellipsis"
|
||||
title={entry.author}
|
||||
>
|
||||
--- posted by {entry.author}
|
||||
<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">
|
||||
woops, looks like you are being ratelimited, try again in like half a minute :3
|
||||
</p>
|
||||
{:else if data.getError}
|
||||
<p class="text-error">got error trying to fetch entries, pls tell me about this</p>
|
||||
<details>
|
||||
<summary>error</summary>
|
||||
<p>{data.getError}</p>
|
||||
</details>
|
||||
{:else}
|
||||
{#each data.entries as [entry_id, entry] (entry_id)}
|
||||
{@const date = new Date(entry.timestamp * 1e3).toLocaleString()}
|
||||
<div class="entry entryflex">
|
||||
<div class="flex flex-row">
|
||||
<p class="place-self-start grow text-2xl font-monospace">
|
||||
#{entry_id}
|
||||
</p>
|
||||
<p class="justify-end self-center text-sm font-monospace">{date}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<p>looks like there are no entries :(</p>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if hasPreviousPage || hasNextPage}
|
||||
<div class="flex flex-row w-full justify-center items-center font-monospace">
|
||||
{#if hasPreviousPage}
|
||||
<a href="/guestbook/?page={data.entries.length < 0 ? data.page - 1 : 1}"
|
||||
><< previous</a
|
||||
>
|
||||
{/if}
|
||||
{#if hasNextPage && hasPreviousPage}
|
||||
<div class="w-1/12" />
|
||||
{/if}
|
||||
{#if hasNextPage}
|
||||
<a href="/guestbook/?page={data.page + 1}">next >></a>
|
||||
{/if}
|
||||
<p class="text-lg text-wrap overflow-hidden text-ellipsis ml-0.5 max-w-[56ch]">
|
||||
{entry.content}
|
||||
</p>
|
||||
<p
|
||||
class="place-self-end text-sm font-monospace overflow-hidden text-ellipsis text-nowrap"
|
||||
title={entry.author}
|
||||
>
|
||||
--- posted by {entry.author}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Window>
|
||||
</div>
|
||||
{:else}
|
||||
<p>looks like there are no entries :(</p>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if hasPreviousPage || hasNextPage}
|
||||
<div class="flex flex-row w-full justify-center items-center font-monospace">
|
||||
{#if hasPreviousPage}
|
||||
<a href="/guestbook/?page={data.entries.length < 0 ? data.page - 1 : 1}"
|
||||
><< previous</a
|
||||
>
|
||||
{/if}
|
||||
{#if hasNextPage && hasPreviousPage}
|
||||
<div class="w-1/12" />
|
||||
{/if}
|
||||
{#if hasNextPage}
|
||||
<a href="/guestbook/?page={data.page + 1}">next >></a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Window>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
Loading…
Reference in New Issue
Block a user