Style fixes and cleanup for appendix

src/components/d-appendix.js

@@ -19,12 +19,22 @@ d-appendix h3 {
   grid-column: page-start / text-start;
   font-size: 15px;
   font-weight: 500;
-  margin-top: 20px;
+  margin-top: 15px;
   margin-bottom: 0;
   color: rgba(0,0,0,0.65);
   line-height: 1em;
 }
 
+d-appendix ol {
+  margin-top: 15px;
+  padding: 0 0 0 30px;
+  margin-left: -30px;
+}
+
+d-appendix li {
+  margin-bottom: 1em;
+}
+
 d-appendix a {
   color: rgba(0, 0, 0, 0.6);
 }
@@ -33,6 +43,12 @@ d-appendix > * {
   grid-column: text;
 }
 
+d-appendix > d-footnote-list,
+d-appendix > d-citation-list,
+d-appendix > distill-appendix {
+  grid-column: screen;
+}
+
 </style>
 
 `, false);

src/components/d-article.js

@@ -14,9 +14,9 @@ export class Article extends HTMLElement {
       for (const mutation of mutations) {
         for (const addedNode of mutation.addedNodes) {
           switch (addedNode.nodeName) {
-          case 'HR':
-            console.warn('Use of <hr> tags in distill articles is discouraged as they interfere with layout! To separate sections, please just use h2 or h3 tags.');
-            break;
+          // case 'HR':
+          //   console.warn('Use of <hr> tags in distill articles is discouraged as they interfere with layout! To separate sections, please just use h2 or h3 tags.');
+          //   break;
           case '#text': { // usually text nodes are only linebreaks.
             const text = addedNode.nodeValue;
             if (!isOnlyWhitespace.test(text)) {

src/components/d-citation-list.js

@@ -4,44 +4,31 @@ import { bibliography_cite } from '../helpers/citation';
 const T = Template('d-citation-list', `
 <style>
 
-:host {
+d-citation-list {
   contain: content;
+  overflow: hidden;
 }
-.references {
+
+d-citation-list .references {
+  grid-column: text;
   font-size: 12px;
   line-height: 20px;
 }
-.title {
+
+d-citation-list .references .title {
   font-weight: 600;
 }
-ol {
-  padding: 0 0 0 18px;
-}
-li {
-  margin-bottom: 12px;
-}
-h3 {
-  font-size: 15px;
-  font-weight: 500;
-  margin-top: 20px;
-  margin-bottom: 0;
-  color: rgba(0,0,0,0.65);
-  line-height: 1em;
-}
-a {
-  color: rgba(0, 0, 0, 0.6);
-}
 
 </style>
 
 <h3>References</h3>
-<ol class='references' id='references-list' ></ol>
-`);
+<ol class='references' id='references-list'></ol>
+`, false);
 
 export function renderCitationList(element, entries) {
   if (entries.size > 0) {
-    element.host.style.display = 'initial';
-    const list = element.querySelector('#references-list');
+    element.style.display = '';
+    const list = document.getElementById('references-list');
     list.innerHTML = '';
 
     for (const [key, entry] of entries) {
@@ -51,14 +38,16 @@ export function renderCitationList(element, entries) {
       list.appendChild(listItem);
     }
   } else {
-    element.host.style.display = 'none';
+    element.style.display = 'none';
   }
 }
 
 export class CitationList extends T(HTMLElement) {
 
   connectedCallback() {
-    this.root.host.style.display = 'none';
+    super.connectedCallback();
+
+    this.root.style.display = 'none';
   }
 
   set citations(citations) {

src/components/d-cite.js

@@ -5,6 +5,10 @@ import { HoverBox } from '../helpers/hover-box';
 const T = Template('d-cite', `
 <style>
 
+:host {
+  display: inline-block;
+}
+
 .citation {
   color: hsla(206, 90%, 20%, 0.7);
 }
@@ -55,10 +59,7 @@ figcaption .citation-number {
   <div id="hover-box" class="dt-hover-box"></div>
 </div>
 
-<span id="citation-" class="citation">
-  <slot></slot>
-  <span class="citation-number"></span>
-</span>
+<span id="citation-" class="citation"><slot></slot><span class="citation-number"></span></span>
 `);
 
 export class Cite extends T(HTMLElement) {

src/components/d-footnote-list.js

@@ -2,50 +2,35 @@ import { Template } from '../mixins/template';
 
 const T = Template('d-footnote-list', `
 <style>
-:host {
+
+d-footnote-list {
   contain: content;
+  overflow: hidden;
 }
 
-* {
+d-footnote-list > * {
   grid-column: text;
 }
 
-ol {
-  padding: 0 0 0 18px;
-}
-li {
-  margin-bottom: 12px;
-}
-h3 {
-  font-size: 15px;
-  font-weight: 500;
-  margin-top: 20px;
-  margin-bottom: 0;
-  color: rgba(0,0,0,0.65);
-  line-height: 1em;
-}
-a {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-a.footnote-backlink {
+d-footnote-list a.footnote-backlink {
   color: rgba(0,0,0,0.3);
   padding-left: 0.5em;
 }
 
-
 </style>
 
 <h3>Footnotes</h3>
 <ol></ol>
-`);
+`, false);
 
 export class FootnoteList extends T(HTMLElement) {
 
   connectedCallback() {
+    super.connectedCallback();
+
     this.list = this.root.querySelector('ol');
     // footnotes list is initially hidden
-    this.root.host.style.display = 'none';
+    this.root.style.display = 'none';
     // look through document and register existing footnotes
     // Store.subscribeTo('footnotes', (footnote) => {
     //   this.renderFootnote(footnote);
@@ -57,7 +42,7 @@ export class FootnoteList extends T(HTMLElement) {
     this.list.innerHTML = '';
     if (footnotes.length) {
       // ensure footnote list is visible
-      this.root.host.style.display = 'initial';
+      this.root.style.display = '';
 
       for (const footnote of footnotes) {
         // construct and append list item to show footnote
@@ -75,7 +60,7 @@ export class FootnoteList extends T(HTMLElement) {
       }
     } else {
       // ensure footnote list is invisible
-      this.shadowRoot.host.style.display = 'none';
+      this.root.style.display = 'none';
     }
   }
 

src/components/d-footnote.js

@@ -48,7 +48,7 @@ span {
 
 <div class="container">
   <div id="hover-box" class="dt-hover-box">
-    <slot></slot>
+    <slot id="slot"></slot>
   </div>
 </div>
 
@@ -77,6 +77,7 @@ export class Footnote extends T(HTMLElement) {
   connectedCallback() {
     // listen and notify about changes to slotted content
     // const slot = this.shadowRoot.querySelector('#slot');
+    // console.warn(slot.textContent);
     // slot.addEventListener('slotchange', this.notify);
 
     // create numeric ID