diff --git a/src/lib/components/H1.svelte b/src/lib/components/H1.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..67df154f639a785812c0d6f2a42411dc51112bfa
--- /dev/null
+++ b/src/lib/components/H1.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+ import { Heading } from "flowbite-svelte";
+ import type { Snippet } from "svelte";
+ import { twMerge } from "tailwind-merge";
+
+ let { children, customSize, class: className, ...restProps }: { children: Snippet, customSize?: string, class?: string } = $props();
+</script>
+
+<Heading tag="h1" customSize={twMerge("text-4xl font-bold", customSize)} class={twMerge("mb-6", className)} {...restProps}>
+ {@render children()}
+</Heading>
diff --git a/src/lib/components/H2.svelte b/src/lib/components/H2.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..1464150352d0b38397c6b5b3a8b8fdbf9f5f8beb
--- /dev/null
+++ b/src/lib/components/H2.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+ import { Heading } from "flowbite-svelte";
+ import type { Snippet } from "svelte";
+ import { twMerge } from "tailwind-merge";
+
+ let { children, customSize, class: className, ...restProps }: { children: Snippet, class?: string, customSize?: string } = $props();
+</script>
+
+<Heading tag="h2" customSize={twMerge("text-3xl font-bold", customSize)} class={twMerge("mb-3 mt-6", className)} {...restProps}>
+ {@render children()}
+</Heading>
diff --git a/src/lib/components/H3.svelte b/src/lib/components/H3.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e75a9d1fcfb6c221fc8277a5117f07ff040182c2
--- /dev/null
+++ b/src/lib/components/H3.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+ import { Heading } from "flowbite-svelte";
+ import type { Snippet } from "svelte";
+ import { twMerge } from "tailwind-merge";
+
+ let { children, customSize, class: className, ...restProps }: { children: Snippet, customSize?: string, class?: string } = $props();
+</script>
+
+<Heading tag="h3" customSize={twMerge("text-xl font-bold", customSize)} class={twMerge("mb-2 mt-5", className)} {...restProps}>
+ {@render children()}
+</Heading>
diff --git a/src/lib/components/MailInput.svelte b/src/lib/components/MailInput.svelte
index 66992a3739fed0f0c7a5a94cfa2eb926a3424056..0f36d24f9bdba21ecadd25d108e36f947c3a522b 100644
--- a/src/lib/components/MailInput.svelte
+++ b/src/lib/components/MailInput.svelte
@@ -7,7 +7,8 @@
import type { Tutor } from "$lib/server/database/entities/Tutor.entity";
import type { TutorTraining } from "$lib/server/database/entities/TutorTraining.entity";
import type { Localized } from "$lib/utils";
- import { Heading, Textarea, Helper, Accordion, AccordionItem, Span, Label, Select, Checkbox, List, Li, P, Input, Button, A } from "flowbite-svelte";
+ import { Textarea, Helper, Accordion, AccordionItem, Span, Label, Select, Checkbox, List, Li, P, Input, Button, A } from "flowbite-svelte";
+ import H2 from "$lib/components/H2.svelte";
let {
text = $bindable(),
@@ -75,7 +76,7 @@
});
</script>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mt-6">Text</Heading>
+<H2>Text</H2>
<Label class="mb-1">
Antwort an
@@ -118,7 +119,7 @@
<Helper color="red">{compilationError}</Helper>
{/if}
-<Heading tag="h2" customSize="text-3xl font-bold" class="mt-6">Vorschau</Heading>
+<H2>Vorschau</H2>
<Span>{compiledSubject}</Span>
<iframe srcdoc={mailHtml} title="Email Preview" class="bg-gray-200 w-full mb-4" onload={function(){this.style.height=Math.ceil(this.contentWindow.document.documentElement.getBoundingClientRect().height)+"px";}}></iframe>
diff --git a/src/lib/components/TutorFAQ.svelte b/src/lib/components/TutorFAQ.svelte
index 7edf09bf2ad0afe3e371130ba40d41f7ccade459..0f9a61869ad6d0ef113054c57b382cab5cec6236 100644
--- a/src/lib/components/TutorFAQ.svelte
+++ b/src/lib/components/TutorFAQ.svelte
@@ -1,7 +1,8 @@
<script lang="ts">
- import { Accordion, AccordionItem, Span, P, A, Heading } from "flowbite-svelte";
+ import { Accordion, AccordionItem, Span, P, A } from "flowbite-svelte";
import { LL } from "$lib/i18n/i18n";
- import LocalizedText from "./LocalizedText.svelte";
+ import LocalizedText from "$lib/components/LocalizedText.svelte";
+ import H3 from "$lib/components/H3.svelte";
let { title }: { title?: string } = $props();
@@ -9,7 +10,7 @@
</script>
{#if title}
- <Heading tag="h3" class="mb-4 text-center">{title}</Heading>
+ <H3>{title}</H3>
{/if}
<Accordion class="mb-5">
<AccordionItem>
diff --git a/src/routes/(non-admin)/datenschutz/+page.svelte b/src/routes/(non-admin)/datenschutz/+page.svelte
index 5e74045377a513c164de91b073cd8f9b52221699..99ea77925fcf84ceff0248ac76f300c50a1302bb 100644
--- a/src/routes/(non-admin)/datenschutz/+page.svelte
+++ b/src/routes/(non-admin)/datenschutz/+page.svelte
@@ -1,20 +1,22 @@
<script lang="ts">
+ import H1 from "$lib/components/H1.svelte";
+ import H3 from "$lib/components/H3.svelte";
import { LL, type Translation, type TranslationFunction } from "$lib/i18n/i18n";
- import { Heading, P } from "flowbite-svelte";
+ import { P } from "flowbite-svelte";
let paragraphs = $derived(Object.keys($LL.PrivacyPolicy.Paragraphs) as (keyof Translation["PrivacyPolicy"]["Paragraphs"])[]);
type Paragraph = { Headline: TranslationFunction; Content: TranslationFunction; };
</script>
-<Heading tag="h1" customSize="text-4xl font-bold" class="mb-6 text-center">{$LL.PrivacyPolicy.Headline()}</Heading>
+<H1>{$LL.PrivacyPolicy.Headline()}</H1>
{#if $LL.PrivacyPolicy.Disclaimer()}
<P class="mb-6" color="text-red-600 dark:text-red-500" whitespace="preline" weight="extrabold">{$LL.PrivacyPolicy.Disclaimer()}</P>
{/if}
{#each paragraphs as key}
- <Heading tag="h3" class="mb-1">{($LL.PrivacyPolicy.Paragraphs[key] as Paragraph).Headline()}</Heading>
+ <H3>{($LL.PrivacyPolicy.Paragraphs[key] as Paragraph).Headline()}</H3>
<P class="mb-6" whitespace="preline">{($LL.PrivacyPolicy.Paragraphs[key] as Paragraph).Content()}</P>
{/each}
diff --git a/src/routes/(non-admin)/eswe/+page.svelte b/src/routes/(non-admin)/eswe/+page.svelte
index 7b5828ceb47f34599b833e5865b7f434a6e063ac..3d061b7312529d07ce637250c790b08179339e28 100644
--- a/src/routes/(non-admin)/eswe/+page.svelte
+++ b/src/routes/(non-admin)/eswe/+page.svelte
@@ -1,7 +1,9 @@
<script lang="ts">
- import { A, Button, Carousel, Gallery, Heading, Li, List, Modal, P } from "flowbite-svelte";
+ import { A, Button, Carousel, Gallery, Li, List, Modal, P } from "flowbite-svelte";
import { LL, locale } from "$lib/i18n/i18n";
import Image from "$lib/components/Image.svelte";
+ import H1 from "$lib/components/H1.svelte";
+ import H2 from "$lib/components/H2.svelte";
let { data } = $props();
@@ -24,7 +26,7 @@
const showInfo = data.start && data.end && Date.parse(data.start) > Date.now();
</script>
-<Heading tag="h1" customSize="text-4xl font-bold" class="mb-6 text-center">{$LL.ESWE.Headline()}</Heading>
+<H1>{$LL.ESWE.Headline()}</H1>
<svelte:body on:keydown={handleKey} />
{#if $locale === "de"}
@@ -39,14 +41,14 @@
<P class="mb-3">Deine ESA</P>
{/if}
-<Heading tag="h2" customSize="text-3xl font-bold" class="mb-3 mt-6">Was ist das ESWE?</Heading>
+<H2>Was ist das ESWE?</H2>
<P class="mb-3">
Das ESWE ist ein jährliches Wochenende, an dem wir eine eigene Unterkunft mieten und dir damit die Möglichkeit bieten andere Erstis (und uns) besser kennen zu lernen.<br>
Wir haben hierbei immer freiwilliges lustiges Programm geplant und viele Spiele zur Unterhaltung dabei.
</P>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mb-3 mt-6">Wieso sollte ich teilnehmen?</Heading>
+<H2>Wieso sollte ich teilnehmen?</H2>
<List class="text-gray-900 dark:text-white">
<Li>Du lernst viele neue Menschen kennen</Li>
@@ -57,7 +59,7 @@
<Li>Viel Spaß!</Li>
</List>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mb-3 mt-6">ESWE dieses Jahr</Heading>
+<H2>ESWE dieses Jahr</H2>
{#if showInfo}
<P class="mb-3">
@@ -84,7 +86,7 @@
{/if}
{#if images.length > 0}
-<Heading tag="h2" customSize="text-3xl font-bold" class="mb-3 mt-6">Eindrücke aus Vorjahren</Heading>
+<H2>Eindrücke aus Vorjahren</H2>
<!-- TODO diesen Text anpassen, muss ja nicht immer Hohenfried sein -->
<P class="mb-3">Voriges Jahr waren wir zwar in einem anderen Haus, trotzdem hier ein paar Eindrücke:</P>
diff --git a/src/routes/(non-admin)/impressum/+page.svelte b/src/routes/(non-admin)/impressum/+page.svelte
index 4be8b2c6636452ba5eb12b39b3312b4a942a25ef..d426ecd10b39709c1869d3d6b8c42bcbdac228a1 100644
--- a/src/routes/(non-admin)/impressum/+page.svelte
+++ b/src/routes/(non-admin)/impressum/+page.svelte
@@ -1,13 +1,15 @@
<script lang="ts">
+ import H1 from "$lib/components/H1.svelte";
+ import H2 from "$lib/components/H2.svelte";
import { LL } from "$lib/i18n/i18n";
- import { A, Blockquote, Heading, P } from "flowbite-svelte";
+ import { A, Blockquote, P } from "flowbite-svelte";
let { data } = $props();
</script>
-<Heading tag="h1" customSize="text-4xl font-bold" class="mb-4 text-center">{$LL.Legal.Headline()}</Heading>
+<H1>{$LL.Legal.Headline()}</H1>
-<Heading tag="h2" customSize="text-lg">{$LL.Legal.Address()}</Heading>
+<H2 customSize="text-lg">{$LL.Legal.Address()}</H2>
<Blockquote class="mb-4 px-3 py-1" border size="base" italic={false}>
Fachschaft Mathematik/Physik/Informatik<br>
Templergraben 55<br>
diff --git a/src/routes/(non-admin)/information/+page.svelte b/src/routes/(non-admin)/information/+page.svelte
index 1d28791d3361e2bda8d957bf5db22741c567f9f1..4be6656569ebae743ed91013c11565cbe8cd800d 100644
--- a/src/routes/(non-admin)/information/+page.svelte
+++ b/src/routes/(non-admin)/information/+page.svelte
@@ -1,6 +1,7 @@
<script lang="ts">
- import { A, Button, Heading, Label, Li, List, P, Select } from 'flowbite-svelte';
+ import { A, Button, Label, Li, List, P, Select } from 'flowbite-svelte';
import { LL, locale } from "$lib/i18n/i18n";
+ import H2 from '$lib/components/H2.svelte';
let { data } = $props();
@@ -8,7 +9,7 @@
let studyProgramName = $derived(data.schedules[selectedStudyProgram]?.studyProgramName[$locale]);
</script>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mb-6">{$LL.Information.Schedule()}</Heading>
+<H2>{$LL.Information.Schedule()}</H2>
<Label class="mb-4">
{$LL.Information.StudyProgram()}
@@ -25,7 +26,7 @@
<P class="mb-4">Aktuell existieren keine Stundenpläne.</P> <!-- TODO i18n -->
{/if}
-<Heading tag="h2" customSize="text-3xl font-bold" class="mb-6">{$LL.Information.Information()}</Heading>
+<H2>{$LL.Information.Information()}</H2>
<List tag="ul" class="mb-2 text-gray-900 dark:text-gray-300">
<Li><A href="/es-info/kurz.pdf" download={$LL.Information.ShortDownloadFilename({semester: data.semester})}>{$LL.Information.Short()}</A></Li>
<Li><A href="/es-info/lang.pdf" download={$LL.Information.LongDownloadFilename({semester: data.semester})}>{$LL.Information.Long()}</A></Li>
diff --git a/src/routes/(non-admin)/upload/+page.svelte b/src/routes/(non-admin)/upload/+page.svelte
index e9a0eb1cbdf06d5a82a8ee44daaf379421daf91e..7fbc6c2562d2138929fecb65b2aac925ed842b72 100644
--- a/src/routes/(non-admin)/upload/+page.svelte
+++ b/src/routes/(non-admin)/upload/+page.svelte
@@ -1,13 +1,14 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { addMessage } from '$lib/messages';
- import { Heading, P, Fileupload, Button, Checkbox } from 'flowbite-svelte';
+ import { P, Fileupload, Button, Checkbox } from 'flowbite-svelte';
import { LL } from "$lib/i18n/i18n";
+ import H1 from '$lib/components/H1.svelte';
let disabled = $state(false);
</script>
-<Heading tag="h1" customSize="text-4xl font-bold" class="mb-6 text-center">{$LL.ShareMoments.Headline()}</Heading>
+<H1>{$LL.ShareMoments.Headline()}</H1>
<P class="mb-3">{$LL.ShareMoments.Description()}</P>
<P class="mb-3">{$LL.ShareMoments.Disclaimer()}</P>
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index a529e7987107820c8798c48f8400b78d21924d8d..34f2ca5fc92d7b77ac5a6381850ba04492357ca9 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1,6 +1,8 @@
<script lang="ts">
import { enhance } from "$app/forms";
import { invalidateAll } from "$app/navigation";
+ import H1 from "$lib/components/H1.svelte";
+ import H2 from "$lib/components/H2.svelte";
import { addMessage } from "$lib/messages";
import { Permission } from "$lib/perms.js";
import { Breadcrumb, BreadcrumbItem, Button, Checkbox, Heading, Input, Label, MultiSelect, Select } from "flowbite-svelte";
@@ -15,8 +17,8 @@
<BreadcrumbItem href="/admin" home>Admin</BreadcrumbItem>
</Breadcrumb>
-<Heading tag="h1" customSize="text-4xl font-bold" class="mb-6 text-center">Einstellungen</Heading>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mt-6">Grundeinstellungen</Heading>
+<H1>Einstellungen</H1>
+<H2>Grundeinstellungen</H2>
<form method="post" action="?/updateBaseConfig" use:enhance={()=>({result})=>{
if(result.type === "success"){
addMessage({type: "success", text: "Einstellungen gespeichert"});
@@ -61,7 +63,7 @@
<Button type="submit" class="mb-2">Speichern</Button>
{/if}
</form>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mt-6">Tutoren</Heading>
+<H2>Tutoren</H2>
<form method="post" action="?/updateTutorConfig" use:enhance={()=>({result})=>{
if(result.type === "success"){
addMessage({type: "success", text: "Einstellungen gespeichert"});
@@ -90,7 +92,7 @@
<Button type="submit" class="mb-2">Speichern</Button>
{/if}
</form>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mt-6">Rallye</Heading>
+<H2>Rallye</H2>
<form method="post" action="?/updateRallyConfig" use:enhance={()=>({result})=>{
if(result.type === "success"){
addMessage({type: "success", text: "Einstellungen gespeichert"});
@@ -119,7 +121,7 @@
<Button type="submit" class="mb-2">Speichern</Button>
{/if}
</form>
-<Heading tag="h2" customSize="text-3xl font-bold" class="mt-6">ESWE</Heading>
+<H2>ESWE</H2>
<form method="post" action="?/updateEsweConfig" use:enhance={()=>({result})=>{
if(result.type === "success"){
addMessage({type: "success", text: "Einstellungen gespeichert"});
diff --git a/src/routes/admin/schedule/+page.svelte b/src/routes/admin/schedule/+page.svelte
index f723814ddfd73feab0229a75219f3ef4fe6d0ce5..e88d2ef52287af543e6c3da749be35c715821d7c 100644
--- a/src/routes/admin/schedule/+page.svelte
+++ b/src/routes/admin/schedule/+page.svelte
@@ -1,11 +1,13 @@
<script lang="ts">
- import { Accordion, AccordionItem, Breadcrumb, BreadcrumbItem, Button, Fileupload, Heading, Input, Label, Modal, P, Select, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Textarea } from "flowbite-svelte";
+ import { Accordion, AccordionItem, Breadcrumb, BreadcrumbItem, Button, Fileupload, Input, Label, Modal, P, Select, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Textarea } from "flowbite-svelte";
import type { Schedule } from "$lib/server/database/entities/Schedule.entity.js";
import { enhance } from "$app/forms";
import { Permission } from "$lib/perms";
import { invalidateAll } from "$app/navigation";
import { locale, locales, LL } from "$lib/i18n/i18n";
import { addMessage } from "$lib/messages.js";
+ import H2 from "$lib/components/H2.svelte";
+ import H3 from "$lib/components/H3.svelte";
let { data } = $props();
@@ -37,7 +39,7 @@
<Accordion>
<AccordionItem>
<span slot="header">Einstellungen</span>
- <Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Branding</Heading>
+ <H2>Branding</H2>
<form method="post" action="?/branding" enctype="multipart/form-data" use:enhance={()=>({result})=>{
if(result.type === "success"){
location.reload();
@@ -52,7 +54,7 @@
}} />
<Button type="submit">Speichern</Button>
</form>
- <Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Allgemein</Heading>
+ <H2>Allgemein</H2>
<Button color="alternative" href="/admin/schedule/fonts">Schriftarten verwalten</Button>
<form method="post" action="?/baseConfig" use:enhance={()=>({result})=>{
if(result.type === "success"){
@@ -160,9 +162,9 @@
</div>
<Button type="submit">Speichern</Button>
</form>
- <Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Farben</Heading>
+ <H2>Farben</H2>
{#each ["light", "dark"] as mode}
- <Heading tag="h3" customSize="text-xl font-bold" class="mb-2">{mode[0].toUpperCase()}{mode.substring(1)} Mode</Heading>
+ <H3>{mode[0].toUpperCase()}{mode.substring(1)} Mode</H3>
<form method="post" action="?/{mode}modeConfig" use:enhance={()=>({result})=>{
if(result.type === "success"){
location.reload();
@@ -194,7 +196,7 @@
<Button type="submit">Speichern</Button>
</form>
{/each}
- <Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Spacing</Heading>
+ <H2>Spacing</H2>
<form method="post" action="?/spacing" use:enhance={()=>({result})=>{
if(result.type === "success"){
location.reload();
@@ -230,7 +232,7 @@
console.error(result);
}
}}>
- <Heading tag="h1" customSize="text-3xl font-bold" class="mb-2">Neuen Stundenplan erstellen</Heading>
+ <H2>Neuen Stundenplan erstellen</H2>
<Label>
Studiengang
<Select required name="studyProgram">
@@ -251,7 +253,7 @@
{/if}
<div>
- <Heading tag="h1" customSize="text-3xl font-bold" class="mb-2">Vorhandene Stundenpläne</Heading>
+ <H2>Vorhandene Stundenpläne</H2>
<Table>
<TableHead>
<TableHeadCell>Studiengang</TableHeadCell>
diff --git a/src/routes/admin/schedule/[id=number]/+page.svelte b/src/routes/admin/schedule/[id=number]/+page.svelte
index c0bb1d7bf2bccfa4fee12be37052b14c1ca907c6..7c8b590e0d800524f344d6a4820c6f1d38f9d13d 100644
--- a/src/routes/admin/schedule/[id=number]/+page.svelte
+++ b/src/routes/admin/schedule/[id=number]/+page.svelte
@@ -1,9 +1,11 @@
<script lang="ts">
- import { Breadcrumb, BreadcrumbItem, Button, Heading, Input, Label, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Textarea } from "flowbite-svelte";
+ import { Breadcrumb, BreadcrumbItem, Button, Input, Label, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Textarea } from "flowbite-svelte";
import { enhance } from "$app/forms";
import { locale, locales, LL } from "$lib/i18n/i18n";
import type { Timeslot } from "$lib/server/database/entities/Schedule.entity.js";
import { addMessage } from "$lib/messages.js";
+ import H1 from "$lib/components/H1.svelte";
+ import H2 from "$lib/components/H2.svelte";
let { data } = $props();
@@ -35,16 +37,16 @@
<Button href="/admin/schedule">Zurück zur Übersicht</Button>
-<Heading tag="h1" customSize="text-3xl font-bold" class="mb-2">Stundenplan für {schedule.studyProgram.name[$locale]}</Heading>
+<H1>Stundenplan für {schedule.studyProgram.name[$locale]}</H1>
-<Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Vorschau</Heading>
+<H2>Vorschau</H2>
<div>
<img src="/stundenplaene/{schedule.id}/{$locale}.dark.svg" class="hidden dark:block" alt={$LL.Information.ScheduleAlt({semester: data.semester, studyProgram: schedule.studyProgram.name[$locale]})} />
<img src="/stundenplaene/{schedule.id}/{$locale}.light.svg" class="block dark:hidden" alt={$LL.Information.ScheduleAlt({semester: data.semester, studyProgram: schedule.studyProgram.name[$locale]})} />
</div>
<Button size="sm" on:click={rerender}>Neu rendern</Button>
-<Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Titel</Heading>
+<H2>Titel</H2>
<form method="post" action="?/updateSchedule" use:enhance={()=>({result})=>{
if(result.type === "success"){
location.reload();
@@ -62,7 +64,7 @@
<Button type="submit">Speichern</Button>
</form>
-<Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Termin hinzufügen</Heading>
+<H2>Termin hinzufügen</H2>
<div>
<form method="post" action="?/createTimeslot" use:enhance={()=>({result})=>{
if(result.type === "success"){
@@ -127,7 +129,7 @@
</form>
{/each}
-<Heading tag="h2" customSize="text-2xl font-bold" class="mb-2">Vorhandene Termine</Heading>
+<H2>Vorhandene Termine</H2>
<Table>
<TableHead>
<TableHeadCell>Datum</TableHeadCell>