<script lang="ts">
	import { version } from '$app/environment';
</script>

<svelte:head>
	<title>About</title>
	<meta name="description" content="Information about this Website" />
</svelte:head>

<p>
	Version:
	<a
		href="https://forgejo.neshweb.net/Neshweb-Sites/main-site/releases/tag/{version}"
		class="hover:underline"
	>
		{version}
	</a>
</p>

<p class="text-background">Background</p>
<p class="text-foreground">Foreground</p>
<p class="text-muted">Muted</p>
<p class="text-muted-foreground">Muted Foreground</p>
<p class="text-popover">Popover</p>
<p class="text-popover-foreground">Popover Foreground</p>
<p class="text-card">card</p>
<p class="text-card-foreground">card-foreground</p>
<p class="text-border">border</p>
<p class="text-input">input</p>
<p class="text-primary">Primary</p>
<p class="text-primary-foreground">primary-foreground</p>
<p class="text-secondary">secondary</p>
<p class="text-secondary-foreground">secondary-foreground</p>
<p class="text-accent">accent</p>
<p class="text-secondary-foreground">secondary-foreground</p>
<p class="text-accent">accent</p>
<p class="text-accent-foreground">accent-foreground</p>
<p class="text-destructive">destructive</p>
<p class="text-destructive-foreground">destructive-foreground</p>
<p class="text-offline">offline</p>
<p class="text-online">online</p>
<p class="text-pending">pending</p>
<p class="text-maintenance">maintenance</p>