gazesys/website
gazesys/website
1
0
Fork 1
Code Actions Releases 1 Activity

fix: improve layouting

Browse Source
This commit is contained in:
dusk 2024-08-23 19:15:25 +03:00
parent c951c74fde
commit d4136e8394
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
4 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/window.svelte
View File

@ -6,7 +6,7 @@
<div
class="
flex flex-col
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-fit h-fit
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-full md:w-fit h-fit
border-ralsei-white border-ridge border-8 border-t-[12px]
bg-ralsei-black
"

2
src/routes/entries/+page.svelte
View File

@ -7,7 +7,7 @@
let posts: PostData[] = data.posts as PostData[];
</script>
<div class="flex flex-wrap gap-y-4 lg:mx-3 lg:my-4">
<div class="flex flex-col lg:flex-row gap-y-4 lg:mx-3 lg:my-4">
{#each posts as post, index}
{@const x = index % 2 === 0 ? 'lg:ml-16' : 'lg:ml-36'}
{@const y = index % 2 === 0 ? 'lg:mt-6' : 'lg:mt-10'}

2
src/routes/entries/_layout.svelte
View File

@ -11,7 +11,7 @@
<meta property="og:type" content="article" />
</svelte:head>
<div class="lg:mb-[8vh]">
<div class="mb-[8vh]">
<Window {title} iconUri='/icons/entry.png'>
<div class="prose prose-ralsei max-w-[80ch]">
<slot/>

98
src/routes/guestbook/+page.svelte
View File

@ -6,10 +6,10 @@
const hasNextPage = data.hasNext;
</script>
<div class="flex flex-row flex-wrap">
<div class="fixed">
<div class="flex flex-col md:flex-row gap-2 md:gap-4">
<div>
<Window title="guestbook">
<div class="flex flex-col gap-4 w-[60ch]">
<div class="flex flex-col gap-4 2xl:w-[60ch]">
<p>hia, here is the guestbook if you wanna post anything :)</p>
<p>just be a good human bean pretty please</p>
<form method="post">
@ -56,52 +56,54 @@
</Window>
</div>
<div class="grow" />
<Window title="entries">
<div class="flex flex-col gap-4 w-[60ch] max-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">
<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 ml-0.5">{entry.content}</p>
<p class="place-self-end text-sm font-monospace">--- posted by {entry.author}</p>
</div>
<div class="mb-[7vh] 2xl:mb-0">
<Window title="entries">
<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}
<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}"
>&lt;&lt; previous</a
>
{/if}
{#if hasNextPage && hasPreviousPage}
<div class="w-1/12" />
{/if}
{#if hasNextPage}
<a href="/guestbook/?page={data.page + 1}">next &gt;&gt;</a>
{/if}
</div>
{/if}
</div>
</Window>
{#each data.entries as [entry_id, entry] (entry_id)}
{@const date = new Date(entry.timestamp * 1e3).toLocaleString()}
<div class="entry">
<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 ml-0.5">{entry.content}</p>
<p class="place-self-end text-sm font-monospace">--- posted by {entry.author}</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}"
>&lt;&lt; previous</a
>
{/if}
{#if hasNextPage && hasPreviousPage}
<div class="w-1/12" />
{/if}
{#if hasNextPage}
<a href="/guestbook/?page={data.page + 1}">next &gt;&gt;</a>
{/if}
</div>
{/if}
</div>
</Window>
</div>
</div>
<style lang="postcss">