Add skeleton for topic

Tested with VoiceOver

4 files changed, 184 insertions, 28 deletions

diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
index 905421e..e49c8d8 100644
--- a/app/components/forum_list/forum_list.svelte
+++ b/app/components/forum_list/forum_list.svelte
@@ -1,21 +1,47 @@
 <script>
-  import {forums, addForum} from '../../models/forums.js'
-
-  import { fade } from 'svelte/transition';
+  import {forums, addForum} from '../../stores/forums.js'
 </script>
 
-<aside>
-  <button on:click="{addForum}">Add a Forum</button>
-  <nav>
-    <ul>
-      {#each $forums as forum}
-        <li transition:fade>
-          <a href="/f/{forum.id}">
-            <span class="navigation-kanji">{forum.kanji}</span>
-            <span class="navigation-label">{forum.label}</span>
-          </a>
-        </li>
-      {/each}
-    </ul>
-  </nav>
-</aside>
+<nav title="List of Forums">
+  <ul>
+    {#each $forums as forum}
+      <li>
+        <a href="/f/{forum.id}">
+          <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+          <span class="navigation-label">{forum.label}</span>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+<style>
+  nav {
+    grid-column: col-start 1;
+    grid-row: 2;
+    border-right: 1px solid black;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  li {
+    display: block;
+    text-align: left;
+    margin-bottom: 20px;
+  }
+
+  .navigation-glyph {
+    font-size: 1.5rem;
+    display: block;
+  }
+
+  .☽ {
+    font-size: 2rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+</style>
diff --git a/app/components/glyph/glyph.svelte b/app/components/glyph/glyph.svelte
new file mode 100644
index 0000000..45a415b
--- /dev/null
+++ b/app/components/glyph/glyph.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { getGlyphHash } from '../../utils/glyph_hash';
+
+  export let uuid;
+</script>
+
+<div class="glyphicon" aria-hidden="true" title="User avatar.">
+  {#each getGlyphHash(uuid) as fragment}
+    <span class="{fragment.glyph}" style="color: {fragment.color} ">
+      {fragment.glyph}
+    </span>
+  {/each}
+</div>
+
+<style>
+  .glyphicon {
+    border: 1px solid black;
+    display: inline-block;
+    font-size: 1.4rem;
+    height: 48px;
+    margin-top: 5px;
+    width: 48px;
+  }
+
+  span {
+    display: block;
+    float: left;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+  }
+
+  .☽ {
+    font-size: 2rem;
+    line-height: 19px;
+  }
+</style>
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>
diff --git a/app/components/topic/topic.svelte b/app/components/topic/topic.svelte
new file mode 100644
index 0000000..367a5b8
--- /dev/null
+++ b/app/components/topic/topic.svelte
@@ -0,0 +1,61 @@
+<script>
+  import Glyph from '../glyph/glyph.svelte';
+</script>
+
+<main class="h-entry" title="Topic">
+  <h1 class="p-name">This is a post in the forum.</h1>
+  <aside class="topic-meta" title="Topic metadata">
+    <span class="topic-location">Posted on <a href="/f/interaction"
+        class="p-category">Interaction</a>.</span>
+    <span class="topic-ttl"><a class="u-url u-uid" href="/t/2a3fc567af8c897ca6f55fb5fj">3 days remaining</a>.</span>
+  </aside>
+  <aside class="topic-tags" title="Topic Tags">
+    Tags:
+    <a href="/t/question" class="p-category">question<span class="tag-weight">(5)</span></a>
+    <a href="/t/meta" class="p-category">meta<span class="tag-weight">(34)</span></a>
+    <a href="/t/carrots" class="p-category">carrots<span class="tag-weight">(1)</span></a>
+    <a href="/t/tpbo" class="p-category">tpbo<span class="tag-weight">(2)</span></a>
+  </aside>
+  <aside class="post-meta" title="Post 1 of 2 metadata">
+    <Glyph uuid="3cd8c84e18144a2da71f6bace9392abc" />
+    <span class="h-card">
+      By: <a href="/a/rbdr" class="p-nickname u-url">rbdr</a>.
+    </span>
+    <time class="dt-published" datetime="2018-08-14T03:32:10.929Z">
+      <a href="/p/a80c70ea0120387123097ce1907ff">
+        2018-08-14 03:32:10
+      </a>
+    </time>
+  </aside>
+  <article class="e-content" title="Post 1 of 2 by rbdr">
+    <p>This is a main topic in the forum. Does that abstraction still even make sense?</p>
+    <p>Is this really it??</p>
+    <p>This might all be fake but at least the links look purple when visited</p>
+  </article>
+  <hr/>
+  <aside class="post-meta" title="Post 2 of 2 metadata">
+    <Glyph uuid="b33f0339f7d64d1ca27f1c0aefb7d753" />
+    <span class="h-card">
+      By: <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
+    </span>
+    <time class="dt-published" datetime="2018-08-15T04:10:00.929Z">
+      <a href="/p/da9910f3febde91948000ce1535ea">
+        2018-08-15 04:10:00
+      </a>
+    </time>
+  </aside>
+  <article class="e-content" title="Post 2 of 2 by time4carrots">
+    <p>It's just how it is...</p>
+  </article>
+  <hr/>
+</main>
+
+<style>
+  main {
+    grid-column: col-start 2 / span 11;
+  }
+
+  .post-meta > * {
+    vertical-align: top;
+  }
+</style>