Remove d-acknowledgements (useless) and d-title (actively hindering modularization)

src/components/d-acknowledgements.js

@@ -1,30 +0,0 @@
-import { Template } from '../mixins/template';
-
-const T = Template('d-acknowledgements', `
-<style>
-
-:host {
-  contain: content;
-}
-
-::slotted(h3) {
-  font-size: 15px;
-  font-weight: 500;
-  margin-top: 20px;
-  margin-bottom: 0;
-  color: rgba(0,0,0,0.65);
-  line-height: 1em;
-}
-
-::slotted(*) a {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-</style>
-
-<slot></slot>
-`);
-
-export class Acknowledgements extends T(HTMLElement) {
-
-}

src/components/d-appendix.js

@@ -4,10 +4,8 @@ import { body } from '../helpers/layout';
 const T = Template('d-appendix', `
 <style>
 
-:host {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
+d-appendix {
+  contain: content;
 
   font-size: 13px;
   line-height: 1.7em;
@@ -16,18 +14,28 @@ const T = Template('d-appendix', `
   color: rgba(0,0,0,0.5);
   padding-top: 36px;
   padding-bottom: 48px;
-
-  contain: content;
 }
 
-${body('.content')}
+d-appendix h3 {
+  font-size: 15px;
+  font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 0;
+  color: rgba(0,0,0,0.65);
+  line-height: 1em;
+}
+
+d-appendix a {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+d-appendix > * {
+  grid-column: margin-left / body;
+}
 
 </style>
 
-<div class='content'>
-<slot></slot>
-</div>
-`, true);
+`, false);
 
 export class Appendix extends T(HTMLElement) {
 

src/components/d-math.js

@@ -2,30 +2,16 @@
 import { Mutating } from '../mixins/mutating.js';
 import { Template } from '../mixins/template.js';
 
+import style from '../styles/d-math.css';
+
 // attaches renderMathInElement to window
 import { renderMathInElement } from '../helpers/katex-auto-render';
 
 export const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
 export const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
 
-export const style = `
-.katex-display {
-  text-align: left;
-  padding: 8px 0 8px 0;
-  margin: 20px 0 20px 24px;
-}
-
-.katex {
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 1.18em;
-}
-`;
-
 const T = Template('d-math', `
-
 ${katexCSSTag}
-
 <style>
 
 :host {
@@ -38,13 +24,10 @@ ${katexCSSTag}
 }
 
 ${style}
-
 </style>
-
-<span id="katex-container"></span>
+<span id='katex-container'></span>
 `);
 
-
 // DMath, not Math, because that would conflict with the JS built-in
 export class DMath extends Mutating(T(HTMLElement)) {
 
@@ -57,7 +40,9 @@ export class DMath extends Mutating(T(HTMLElement)) {
 
   static get katexOptions() {
     if (!DMath._katexOptions) {
-      DMath._katexOptions = {};
+      DMath._katexOptions = {
+        delimiters: [ { 'left':'$', 'right':'$', 'display':true } ]
+      };
     }
     return DMath._katexOptions;
   }
@@ -111,4 +96,5 @@ export class DMath extends Mutating(T(HTMLElement)) {
 }
 
 DMath.katexAdded = false;
+DMath.inlineMathRendered = false;
 window.DMath = DMath; // TODO: check if this can be removed, or if we should expose a distill global

src/components/d-title.js

@@ -1,58 +0,0 @@
-import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';
-
-const T = Template('d-title', `
-<style>
-
-:host {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-}
-::slotted(h1) {
-  padding-top: 16px;
-  padding-bottom: 0;
-  margin-top: 0;
-  margin-bottom: 18px;
-  line-height: 1.15;
-  font-size: 32px;
-  font-weight: 700;
-}
-
-::slotted(h2) {
-  border-bottom: none !important;
-  font-size: 26px !important;
-  font-weight: 300 !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  line-height: 1.6em !important;
-  margin-top: -2px !important;
-  margin-bottom: 36px !important;
-  border: none !important;
-}
-
-@media screen and (min-width: 768px), print {
-  ::slotted(h1) {
-    font-size: 42px;
-  }
-}
-@media(min-width: 1024px) {
-  ::slotted(h1) {
-    padding-top: 64px;
-    font-size: 42px;
-  }
-}
-@media(min-width: 1280px) {
-  ::slotted(h1) {
-    padding-top: 96px;
-  }
-}
-
-</style>
-
-<slot></slot>
-`);
-
-export class Title extends T(HTMLElement) {
-
-}