Adding an alert banner to top when not on localhost

components/appendix.js

@@ -70,7 +70,6 @@ export default function(dom, data) {
 
     div.innerHTML = oldHtml + div.innerHTML;
 
-
     el.querySelector("a.github").setAttribute("href", data.githubUrl);
     el.querySelector("a.github-issue").setAttribute("href", data.githubUrl + "/issues/new");
     el.querySelector(".citation.short").textContent = data.concatenatedAuthors + ", " + '"' + data.title + '", Distill, ' + data.publishedYear + ".";

components/banner.js

@@ -0,0 +1,23 @@
+const html = `
+<style>
+  dt-banner {
+    background: #FFF59D;
+    display: block;
+    text-align: center;
+    color: black;
+    height: 70px;
+    line-height: 70px;
+  }
+</style>
+<div>This article is a draft, awaiting review for publication in Distill</div>
+`;
+
+export default function(dom, data) {
+  let banner = dom.createElement("dt-banner");
+  banner.innerHTML = html;
+  let b = dom.querySelector("body");
+  b.insertBefore(banner, b.firstChild);
+  banner.addEventListener("click", function() {
+    banner.style.display = "none";
+  });
+}

components/styles-article.css

@@ -62,8 +62,7 @@ dt-article h1 {
 dt-article h2 {
   font-family: HoeflerText-Regular, Cochin, Georgia, serif;
   font-weight: 400;
-  font-style: italic;
-  font-size: 24px;
+  font-size: 26px;
   line-height: 1.25em;
   margin-top: 36px;
   margin-bottom: 24px;
@@ -71,7 +70,7 @@ dt-article h2 {
 
 @media(min-width: 1024px) {
   dt-article h2 {
-  margin-top: 48px;
+    margin-top: 48px;
     font-size: 30px;
   }
 }
@@ -100,11 +99,11 @@ dt-article h1 + h2 {
 dt-article h3 {
   font-family: HoeflerText-Regular, Georgia, serif;
   font-weight: 400;
-  font-size: 13px;
+  font-size: 20px;
   line-height: 1.4em;
   margin-top: 36px;
   margin-bottom: 18px;
-  text-transform: uppercase;
+  font-style: italic;
 }
 
 dt-article h1 + h3 {
@@ -113,7 +112,7 @@ dt-article h1 + h3 {
 
 @media(min-width: 1024px) {
   dt-article h3 {
-    font-size: 22px;
+    font-size: 26px;
   }
 }