From 66dc4cae4cd37e82d773dc30be046d82d380ec4d Mon Sep 17 00:00:00 2001
From: Ben Beltran <ben@nsovocal.com>
Date: Sun, 26 Jan 2020 16:33:43 +0100
Subject: Add skeleton for topic

Tested with VoiceOver
---
 app/components/header/header.svelte | 51 +++++++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 10 deletions(-)

(limited to 'app/components/header')

diff --git a/app/components/header/header.svelte b/app/components/header/header.svelte
index 15b75b8..edcbc79 100644
--- a/app/components/header/header.svelte
+++ b/app/components/header/header.svelte
@@ -1,11 +1,42 @@
-<header>
-  <nav class="top-navigation">
-    <ul>
-      <li><strong><a href="/">Forum v1.0.0</a></strong></li>
-      <li><a href="/new"><u class="action-key">N</u>ew Post</a></li>
-      <li><a href="/reply"><u class="action-key">R</u>eply</a></li>
-      <li><a href="/search"><u class="action-key">S</u>earch</a></li>
-      <li><a href="/logout">Log <u class="action-key">O</u>ut</a></li>
-    </ul>
-  </nav>
+<header title="Toolbar">
+  <ul>
+    <li><strong><a href="/" aria-label="Forum Version 1.0.0">Forum v1.0.0</a></strong></li>
+    <li><a href="/new" aria-label="New"><u class="action-key">N</u>ew</a></li>
+    <li><a href="/reply" aria-label="Reply"><u class="action-key">R</u>eply</a></li>
+    <li><a href="/search" aria-label="Search"><u class="action-key">S</u>earch</a></li>
+    <li><a href="/logout" aria-label="Log Out">Log <u class="action-key">O</u>ut</a></li>
+  </ul>
 </header>
+
+<style>
+  header {
+    grid-column: col-start 1 / span 12;
+    border-bottom: 1px solid black;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  .action-key {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  li {
+    display: inline;
+    margin: 5px;
+  }
+
+  a {
+    text-decoration: none;
+    line-height: 3em;
+    display: inline-block;
+  }
+
+  strong a {
+    color: blue;
+    text-decoration: underline;
+  }
+
+</style>
-- 
cgit