CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

make bullet points on rule page collapsable (#26)

Browse Source
This commit is contained in:
bytedream 2024-09-10 16:11:20 +02:00
parent 4206797862
commit 231b75c47e
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/rules/+page.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { rulesLong } from '$lib/rules';
import {rulesLong, rulesShort} from '$lib/rules';
</script>
<svelte:head>
@ -7,14 +7,26 @@
</svelte:head>
<h1 class="text-3xl lg:text-5xl mb-4">CraftAttack 6 Regelwerk</h1>
<p>{rulesLong.header}</p>
<ol class="p-[revert] list-decimal my-6">
{#each rulesLong.sections as section}
<li class="mb-2">
{section.content}
</li>
{/each}
</ol>
<p>
{rulesLong.footer}
</p>
<div class="collapse collapse-arrow">
<input type="checkbox" autocomplete="off" checked />
<div class="collapse-title">
<p>0. Vorwort</p>
</div>
<div class="collapse-content">
<p>{rulesShort.header}</p>
<p class="mt-1 text-[.75rem]">{rulesShort.footer}</p>
</div>
<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
</div>
{#each rulesShort.sections as section, i}
<div class="collapse collapse-arrow">
<input type="checkbox" autocomplete="off" />
<div class="collapse-title">
<p>{i + 1}. {section.title}</p>
</div>
<div class="collapse-content">
<p>{section.content}</p>
</div>
</div>
<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
{/each}