Use tailwind, reference types

1 files changed, 25 insertions, 40 deletions

diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
index 51df1c2..3d08913 100644
--- a/src/lib/components/header/header.svelte
+++ b/src/lib/components/header/header.svelte
@@ -5,59 +5,44 @@
 	import TopicActions from '$lib/components/actions/topic.svelte';
 </script>
 
-<header title={$_('header.title')}>
-	<ul>
-		<li>
+<header
+	class="col-start-1 col-span-12 border-b-2 border-b-black border-solid"
+	title={$_('header.title')}
+>
+	<ul class="p-0">
+		<li class="inline m-1">
 			<strong
-				><a href="/" title={$_('header.long_version', { values: { version } })}
+				><a
+					class="inline-block leading-10 underline text-blue-600"
+					href="/"
+					title={$_('header.long_version', { values: { version } })}
 					>{$_('header.short_version', { values: { version } })}</a
 				></strong
 			>
 		</li>
-		<li>
-			<a href="/new" title={$_('header.action.new.title')}
-				>{@html $_('header.action.new.display')}</a
+		<li class="inline m-1">
+			<a
+				class="inline-block leading-10 no-underline"
+				href="/new"
+				title={$_('header.action.new.title')}>{@html $_('header.action.new.display')}</a
 			>
 		</li>
 		{#if $topicActions}
 			<TopicActions actions={$topicActions} />
 		{/if}
-		<li>
-			<a href="/search" title={$_('header.action.search.title')}
-				>{@html $_('header.action.search.display')}</a
+		<li class="inline m-1">
+			<a
+				class="inline-block leading-10 no-underline"
+				href="/search"
+				title={$_('header.action.search.title')}>{@html $_('header.action.search.display')}</a
 			>
 		</li>
-		<li>
-			<a href="/logout" title={$_('header.action.log_out.title')}
-				>{@html $_('header.action.log_out.display')}</a
+		<li class="inline m-1">
+			<a
+				class="inline-block leading-10 no-underline"
+				href="/logout"
+				title={$_('header.action.log_out.title')}>{@html $_('header.action.log_out.display')}</a
 			>
 		</li>
 	</ul>
 </header>
-
-<style>
-	header {
-		grid-column: col-start 1 / span 12;
-		border-bottom: 1px solid black;
-	}
-
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: inline;
-		margin: 5px;
-	}
-
-	a {
-		text-decoration: none;
-		line-height: 3em;
-		display: inline-block;
-	}
-
-	strong a {
-		color: blue;
-		text-decoration: underline;
-	}
-</style>