make bullet points on rule page collapsable (#26)

This commit is contained in:
bytedream 2024-09-10 16:11:20 +02:00
parent 4206797862
commit 231b75c47e

View File

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