diff --git a/src/components/d-cite.js b/src/components/d-cite.js index c3d18da..61a1787 100644 --- a/src/components/d-cite.js +++ b/src/components/d-cite.js @@ -4,31 +4,55 @@ import { HoverBox } from '../helpers/hover-box'; const T = Template('d-cite', ` -
+
+
diff --git a/src/components/d-footnote.js b/src/components/d-footnote.js index 6ea6bda..36471e1 100644 --- a/src/components/d-footnote.js +++ b/src/components/d-footnote.js @@ -8,14 +8,16 @@ d-math[block] { display: block; } +:host { + position: relative; +} + sup { line-height: 1em; font-size: 0.75em; position: relative; - top: 0; + top: -.5em; vertical-align: baseline; - position: relative; - top: -6px; } span { @@ -23,13 +25,36 @@ span { cursor: default; } +.container { + position: fixed; + width: 100%; + left: 0; + z-index: 10000; +} + +.dt-hover-box { + margin: 0 auto; + width: 400px; + max-width: 700px; + background-color: #FFF; + opacity: 0.95; + border: 1px solid rgba(0, 0, 0, 0.25); + padding: 8px 16px; + border-radius: 3px; + box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2); +} + -
- +
+
+ +
- + + + `); diff --git a/src/components/d-interstitial.js b/src/components/d-interstitial.js index 2726ac9..c980424 100644 --- a/src/components/d-interstitial.js +++ b/src/components/d-interstitial.js @@ -24,11 +24,6 @@ const T = Template('d-interstitial', ` } -.overlay.transparent { - background: hsla(0, 0%, 100%, 0.7); - transition: background 1s; -} - .container { position: relative; left: 25%; @@ -93,20 +88,13 @@ export class Interstitial extends T(HTMLElement) { connectedCallback() { const passwordInput = this.root.querySelector('#interstitial-password-input'); passwordInput.oninput = (event) => this.passwordChanged(event); - setTimeout(() => { - this.article = document.querySelector('d-article'); - this.article.style = 'filter: blur(15px)'; - const overlay = this.root.querySelector('.overlay'); - overlay.classList.add('transparent'); - }, 500); } passwordChanged(event) { const entered = event.target.value; if (entered === this.password) { console.log('Correct password entered.'); - event.target.classList.add('right'); - this.article.style = ''; + event.target.classList.add('correct'); this.parentElement.removeChild(this); } } diff --git a/src/components/d-title.js b/src/components/d-title.js index a7f3747..bdc559d 100644 --- a/src/components/d-title.js +++ b/src/components/d-title.js @@ -31,7 +31,7 @@ const T = Template('d-title', ` } -
✓ Peer Reviewed
+ `); diff --git a/src/helpers/hover-box.js b/src/helpers/hover-box.js index be19f57..d59d5f3 100644 --- a/src/helpers/hover-box.js +++ b/src/helpers/hover-box.js @@ -1,8 +1,9 @@ -function make_hover_css(pos) { +function make_hover_css(target_node, pos) { const pretty = window.innerWidth > 600; const padding = pretty? 18 : 12; const outer_padding = pretty ? 18 : 0; - const bbox = document.querySelector('body').getBoundingClientRect(); + // const bbox = document.querySelector('body').getBoundingClientRect(); + const bbox = target_node.offsetParent.getBoundingClientRect(); let left = pos[0] - bbox.left, top = pos[1] - bbox.top; let width = Math.min(window.innerWidth-2*outer_padding, 648); left = Math.min(left, window.innerWidth-width-outer_padding); @@ -77,8 +78,8 @@ export class HoverBox { show(position) { this.visible = true; - const css = make_hover_css(position); - this.div.setAttribute('style', css ); + // const css = make_hover_css(this.triggerElement, position); + this.div.setAttribute('style', 'display: block;' ); } showAtNode(node) { @@ -88,7 +89,7 @@ export class HoverBox { hide() { this.visible = false; - this.div.setAttribute('style', 'display:none'); + this.div.setAttribute('style', 'display: none;'); this.stopTimeout(); } diff --git a/src/styles/d-article.css b/src/styles/d-article.css index ffa5a84..883516c 100644 --- a/src/styles/d-article.css +++ b/src/styles/d-article.css @@ -96,7 +96,7 @@ d-article a { d-article p, d-article ul, d-article ol { - font-family: georgia, serif; + /*font-family: georgia, serif;*/ margin-top: 0; margin-bottom: 1.7em; -webkit-font-smoothing: antialiased; @@ -133,6 +133,8 @@ d-article pre { } d-article hr { + grid-column: screen; + width: 100%; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-top: 60px; @@ -144,56 +146,12 @@ d-article section { margin-bottom: 60px; } -/* Figure */ - -d-article figure { - position: relative; - margin-bottom: 36px; -} - -d-article figure img { - width: 100%; -} - -d-article figure svg text, -d-article figure svg tspan { -} - -d-article figure figcaption { - color: rgba(0, 0, 0, 0.6); - font-size: 12px; - line-height: 1.5em; -} - -@media(min-width: 1024px) { - d-article figure figcaption { - font-size: 13px; - } -} - -d-article figure.external img { - background: white; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); - padding: 18px; - box-sizing: border-box; -} - -d-article figure figcaption a { - color: rgba(0, 0, 0, 0.6); -} - d-article span.equation-mimic { font-family: georgia; font-size: 115%; font-style: italic; } -d-article figure figcaption b { - font-weight: 600; - color: rgba(0, 0, 0, 1.0); -} - d-article > d-code, d-article section > d-code { display: block; diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css index 9eee0d2..8a184cf 100644 --- a/src/styles/styles-base.css +++ b/src/styles/styles-base.css @@ -52,3 +52,48 @@ pre { font-weight: 600; color: rgba(0, 0, 0, 0.5); } + + +/* Figure */ + +figure { + position: relative; + margin-bottom: 36px; +} + +figure img { + width: 100%; +} + +figure svg text, +figure svg tspan { +} + +figure figcaption { + color: rgba(0, 0, 0, 0.6); + font-size: 12px; + line-height: 1.5em; +} + +@media(min-width: 1024px) { + figure figcaption { + font-size: 13px; + } +} + +figure.external img { + background: white; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); + padding: 18px; + box-sizing: border-box; +} + +figure figcaption a { + color: rgba(0, 0, 0, 0.6); +} + +figure figcaption b { + font-weight: 600; + color: rgba(0, 0, 0, 1.0); +}