git.r.bdr.sh - rbdr/forum/blob - src/components/header/header.svelte

   1 <script>
   2   import { _ } from 'svelte-i18n';
   3
   4   import { version } from '$config/config';
   5 </script>
   6
   7 <header title="{$_('header.title')}">
   8   <ul>
   9     <li><strong><a href="/" aria-label="{$_('header.long_version', { values: { version } })}">{$_('header.short_version', { values: { version } })}</a></strong></li>
  10     <li><a href="/new" aria-label="{$_('header.action.new.title')}">{@html $_('header.action.new.display')}</a></li>
  11     <li><a href="/reply" aria-label="{$_('header.action.reply.title')}">{@html $_('header.action.reply.display')}</a></li>
  12     <li><a href="/search" aria-label="{$_('header.action.search.title')}">{@html $_('header.action.search.display')}</a></li>
  13     <li><a href="/logout" aria-label="{$_('header.action.log_out.title')}">{@html $_('header.action.log_out.display')}</a></li>
  14   </ul>
  15 </header>
  16
  17 <style>
  18   header {
  19     grid-column: col-start 1 / span 12;
  20     border-bottom: 1px solid black;
  21   }
  22
  23   ul {
  24     padding: 0;
  25   }
  26
  27   .action-key {
  28     font-weight: bold;
  29     text-decoration: underline;
  30   }
  31
  32   li {
  33     display: inline;
  34     margin: 5px;
  35   }
  36
  37   a {
  38     text-decoration: none;
  39     line-height: 3em;
  40     display: inline-block;
  41   }
  42
  43   strong a {
  44     color: blue;
  45     text-decoration: underline;
  46   }
  47
  48 </style>