X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/cac85db02ff00732cf75d473dc3411332f33d845..852ee620f0a2f6a83cf83eba860ca951b66bb7e2:/src/lib/components/forum_list/forum_list.svelte

diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
index 81a5e4f..d1518bd 100644
--- a/src/lib/components/forum_list/forum_list.svelte
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
-	import { _ } from 'svelte-i18n';
-	export let forums;
+	import type { Forum } from '$lib/data/types';
+
+	export let forums: Forum[];
 
-	$: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+	import { _ } from 'svelte-i18n';
+  $: sortedForums = forums
+  .slice()
+  .sort((a, b) => a.position - b.position);
 </script>
 
-<ul>
+<ul class="p-0 pl-2">
 	{#each sortedForums as forum}
-		<li>
-			<a href="/f/{forum.id}">
-				<span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+		<li class="block text-left mb-5">
+			<a class="no-underline text-blue-600 visited:text-purple-500" href="/f/{forum.id}">
+				<span aria-hidden="true" class="block text-2xl {forum.glyph}">{forum.glyph}</span>
 				<span class="navigation-label">{$_(forum.label)}</span>
 			</a>
 		</li>
@@ -17,26 +21,7 @@
 </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>