.styling. dom purify just to be sure.

webapp/src/components/Article.svelte

@@ -1,13 +1,41 @@
 <script>
+  import DOMPurify from "dompurify";
+  import { onMount } from "svelte";
   import StoryInfo from "../components/StoryInfo.svelte";
+
   export let story;
 
   let host = new URL(story.url || story.link).hostname.replace(/^www\./, "");
+  let html;
+
+  onMount(() => {
+    html = DOMPurify.sanitize(story.text);
+  });
 </script>
 
 <style>
+  .article :global(h1),
+  .article :global(h2),
+  .article :global(h3),
+  .article :global(h4),
+  .article :global(h5),
+  .article :global(h6) {
+    margin: 0 0 0.5em 0;
+    font-weight: 400;
+    line-height: 1.2;
+  }
+
+  .article :global(h1) {
+    font-size: 2rem;
+  }
+
+  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+    .article :global(h1) {
+      font-size: 1.5rem;
+    }
+  }
   .article-title {
-    text-align: justify;
+    text-align: left;
   }
   .article-header {
     padding: 0 0 1rem;
@@ -41,12 +69,14 @@
   <header class="article-header">
     <h1 class="article-title">{story.title}</h1>
     {#if story.url}
-      <div>source: <a href={story.url}>{host}</a></div>
+      <div>source: <a class="article-source" href={story.url}>{host}</a></div>
     {/if}
-    <StoryInfo class="article-byline" {story} />
+    <section class="article-info">
+      <StoryInfo {story} />
+    </section>
   </header>
 
   <section class="article-body">
-    {@html story.text}
+    {@html html}
   </section>
 </article>

webapp/src/components/Comment.svelte

@@ -1,13 +1,23 @@
 <script>
+  import DOMPurify from "dompurify";
+  import { onMount } from "svelte";
+
   import Time from "../components/Time.svelte";
 
   export let story;
   export let comment;
   export let showComments = true;
-  const author = (comment.author || "").replace(" ", "");
-  export let id = `${author}-${comment.date}`;
 
-  export function toggleComments() {
+  let author = (comment.author || "").replace(" ", "");
+  let id = `${author}-${comment.date}`;
+
+  let html;
+
+  onMount(() => {
+    html = DOMPurify.sanitize(comment.text);
+  });
+
+  function toggleComments() {
     showComments = !showComments;
   }
 </script>
@@ -87,7 +97,7 @@
   </header>
 
   <section class={showComments ? 'comment-text' : 'comment-text is-collapsed'}>
-    {@html comment.text}
+    {@html html}
   </section>
 
   {#if !showComments}

webapp/src/components/Nav.svelte

@@ -28,13 +28,11 @@
 </script>
 
 <style>
-  .has-highlight,
   [aria-current] {
     position: relative;
     display: inline-block;
   }
 
-  .has-highlight::after,
   [aria-current]::after {
     position: absolute;
     content: "";
@@ -72,7 +70,6 @@
   .navigation-item {
     list-style: none;
   }
-  .navigation-text,
   .navigation-link {
     text-decoration: none;
     padding: 1em 0.5em;
@@ -82,7 +79,8 @@
     line-height: 2;
     margin: 1em;
     vertical-align: middle;
-    width: 15rem;
+    width: 20rem;
+    max-width: 50vw;
   }
 </style>
 
@@ -94,7 +92,9 @@
           class="navigation-link"
           aria-current={segment === undefined ? 'page' : undefined}
           rel="prefetch"
-          href=".">News</a>
+          href=".">
+          {#if segment === undefined}Qot.{:else}&larr; News feed{/if}
+        </a>
       </li>
     </ul>
     <form action="/search" method="GET" rel="prefetch" role="search">
@@ -108,11 +108,5 @@
         placeholder="Search..."
         on:keypress={handleSearch} />
     </form>
-    <ul class="navigation-list">
-      <li class="navigation-item">
-        <span
-          class="navigation-text {segment !== undefined ? 'has-highlight' : undefined}">Qot.</span>
-      </li>
-    </ul>
   </div>
 </nav>

webapp/src/components/StoryInfo.svelte

@@ -6,10 +6,10 @@
 <Time date={story.date} />
 {#if story.author && story.author_link}
   by
-  <a href={story.author_link}>{story.author}</a>
-{:else if story.author}by {story.author}{/if}
+  <a class="author" href={story.author_link}>{story.author}</a>
+{:else if story.author}by <span class="author">{story.author}</span>{/if}
 on
-<a href={story.link || story.url}>{story.source}</a>
+<a class="source" href={story.link || story.url}>{story.source}</a>
 {#if story.score}&bull; {story.score} points{/if}
 {#if story.num_comments}
   &bull;