CSS fixes

components/appendix.js

@@ -62,8 +62,14 @@ export default function(dom, data) {
     let oldHtml = el.innerHTML;
     el.innerHTML = html;
     let div = el.querySelector("div.l-body")
+    
+    if (dom.querySelector("dt-fn")) {
+      div.innerHTML = `<h3>Footnotes</h3><dt-fn-list></dt-fn-list>` + div.innerHTML;
+    }
+
     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/citation.js

@@ -21,7 +21,7 @@ export default function(dom, data) {
       cite_hover_str = cite_hover_str.replace(/"/g, "'")
       var orig_string = el.innerHTML;
       if (orig_string != "") orig_string += " ";
-      el.innerHTML = `<span id="citation-${n}" class="citation" data-hover="${cite_hover_str}">${orig_string}${cite_string}</span>`;
+      el.innerHTML = `<span id="citation-${n}" data-hover="${cite_hover_str}">${orig_string}${cite_string}</span>`;
     }
   });
 

components/hover-box.txt

@@ -33,7 +33,8 @@ function DistillHoverBox(key, pos){
                           left: ${left}px;
                           padding: ${padding}px;
                           border-radius: ${pretty? 3 : 0}px;
-                          box-shadow: 0px 0px 18px 3px #777;" >
+                          box-shadow: 0px 0px 18px 3px #777;
+                          z-index: ${1e6}" >
               ${DistillHoverBox.contentMap[key]}
               </div>`;
 

components/styles-article.css

@@ -41,8 +41,11 @@ dt-article h2 {
   margin-top: 12px;
   margin-bottom: 24px;
 }
+
 @media(min-width: 1024px) {
-  font-size: 28px;
+  dt-article h2 {
+    font-size: 28px;
+  }
 }
 
 dt-article h1 + h2 {
@@ -189,3 +192,10 @@ dt-article .citation {
   color: #668;
   cursor: pointer;
 }
+
+dt-include {
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+}

components/styles-base.css

@@ -17,6 +17,10 @@ a {
   color: #004276;
 }
 
+figure {
+  margin: 0;
+}
+
 /*
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

components/styles-layout.css

@@ -21,10 +21,13 @@ dt-article > * {
     margin-left: calc(50% - 984px / 2);
     width: 648px;
   }
+  /*w-body-plus is deprecated*/
   .l-body-outset,
-  dt-article .l-body-outset {
-    margin-left: calc(50% - 984px / 2 - 24px);
-    width: calc(648px + 48px);
+  dt-article .l-body-outset,
+  .w-body-plus,
+  dt-article .w-body-plus {
+    margin-left: calc(50% - 984px / 2 - 96px/2);
+    width: calc(648px + 96px);
   }
   .l-middle,
   dt-article .l-middle {