Use tailwind in app html

[rbdr/forum] / src / lib / components / forum_list / forum_list.svelte

<script lang="ts">
	import type { Forum } from '$lib/data/types';

	export let forums: Forum[];

	import { _ } from 'svelte-i18n';
	$: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
</script>

<ul>
	{#each sortedForums as forum}
		<li>
			<a href="/f/{forum.id}">
				<span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
				<span class="navigation-label">{$_(forum.label)}</span>
			</a>
		</li>
	{/each}
</ul>

<style>
	ul {
		padding: 0;
	}

	li {
		display: block;
		text-align: left;
		margin-bottom: 20px;
	}

	.navigation-glyph {
		font-size: 1.5rem;
		display: block;
	}

	.☽ {
		font-size: 2rem;
	}

	a {
		text-decoration: none;
	}
</style>