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 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>