Use tailwind, reference types

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

diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
index e6c9348f1253ca2c6853489f5095353b429dbb05..3d089130c256c4f5c311ece77db18aabe87c6b21 100644 (file)
--- 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} />
+                       <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>