Fixing shadow dom d-math weirdness

src/components/d-math.js

@@ -8,7 +8,24 @@ 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 {
@@ -20,9 +37,9 @@ const T = Template('d-math', `
   display: block;
 }
 
-</style>
+${style}
 
-${katexCSSTag}
+</style>
 
 <span id="katex-container"></span>
 `);

src/styles/styles-article.css

@@ -188,18 +188,6 @@ d-figure {
 
 /* KaTeX */
 
-d-article .katex-display {
-  text-align: left;
-  padding: 8px 0 8px 0;
-  margin: 20px 0;
-}
-
-d-article .katex {
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 1.18em;
-}
-
 .katex, .katex-prerendered {
   contain: content;
   display: inline-block;

src/styles/styles.js

@@ -3,8 +3,9 @@ import layout from './styles-layout.css';
 import article from './styles-article.css';
 import print from './styles-print.css';
 import { style as byline } from '../components/d-byline.js';
+import { style as math } from '../components/d-math.js';
 
-export const styles = base + layout + byline + article + print;
+export const styles = base + layout + byline + math + article + print;
 
 export function makeStyleTag(dom) {