Styling

components/appendix.js

@@ -59,7 +59,10 @@ const html = `
 export default function(dom, data) {
   let el = dom.querySelector('dt-appendix')
   if (el) {
+    let oldHtml = el.innerHTML;
     el.innerHTML = html;
+    let div = el.querySelector("div.l-body")
+    div.innerHTML = oldHtml + div.innerHTML;
 
     el.querySelector("a.github").setAttribute("href", data.githubUrl);
     el.querySelector("a.github-issue").setAttribute("href", data.githubUrl + "/issues/new");

components/styles-article.css

@@ -3,6 +3,7 @@ dt-article {
   color: rgba(0, 0, 0, 0.8);
   font: 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
   margin-bottom: 72px;
+  overflow: hidden;
 }
 
 @media(min-width: 1024px) {
@@ -32,13 +33,17 @@ dt-article h1 {
   }
 }
 
+
 dt-article h2 {
   font-weight: 400;
-  font-size: 28px;
+  font-size: 22px;
   line-height: 1.25em;
   margin-top: 12px;
   margin-bottom: 24px;
 }
+@media(min-width: 1024px) {
+  font-size: 28px;
+}
 
 dt-article h1 + h2 {
 }

components/styles-base.css

@@ -1,5 +1,6 @@
 html {
   font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
+  background: #666;
 }
 
 html {
@@ -9,6 +10,7 @@ html {
 }
 body {
   margin: 0;
+  background: white;
 }
 
 a {