General visual updates

src/routes/app.css

@@ -11,6 +11,16 @@ img {
   max-width: 80%;
 }
 
-.sub {
+blockquote {
-  color: #aaa;
+  border-left: 2px solid lightgrey;
+  padding-left: 1ch;
+  color: grey;
+}
+
+hr {
+  border: 1px solid lightgrey;
+}
+
+.sub {
+  color: grey;
 }

src/routes/articles/[slug]/+layout.svelte

@@ -16,9 +16,7 @@
       <a href="/articles/{data.next.slug}">&gt;&gt;</a>
     {/if}
   </div>
-  <hr />
   <slot />
-  <hr />
   <div id="footer">
     {#if data.prev}
       <a href="/articles/{data.prev.slug}">&lt;&lt;</a>
@@ -35,6 +33,8 @@
 <style>
   main {
     padding-left: 1em;
+    margin: 0 auto;
+    max-width: 36em;
   }
 
   @media (pointer: none), (pointer: coarse) {

src/routes/articles/[slug]/+page.svelte

@@ -36,11 +36,14 @@
   <h1>{data.article.title}</h1>
   <p class="sub">{data.article.meta}</p>
   <hr />
+  <div id="generated">
   {@html render}
+  </div>
 </main>
 
 <style>
   main {
-    max-width: 60em;
+    max-width: 36em;
+    margin: 0 auto;
   }
 </style>