diff --git a/bin/render.js b/bin/render.js index 6e893ec..50ccc66 100755 --- a/bin/render.js +++ b/bin/render.js @@ -15,8 +15,6 @@ program .option('-o, --output-path ', 'path to write rendered HTML file to.') .parse(process.argv); -console.warn(program); - const virtualConsole = new jsdom.VirtualConsole(); // omitJSDOMErrors as JSDOM routinely can't parse modern CSS virtualConsole.sendTo(console, { omitJSDOMErrors: true }); diff --git a/src/components/d-appendix.js b/src/components/d-appendix.js index 0e832f9..4587ef8 100644 --- a/src/components/d-appendix.js +++ b/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; +} + `, false); diff --git a/src/components/d-article.js b/src/components/d-article.js index dc2c305..5085868 100644 --- a/src/components/d-article.js +++ b/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
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
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)) { diff --git a/src/components/d-citation-list.js b/src/components/d-citation-list.js index 385a75f..5b86328 100644 --- a/src/components/d-citation-list.js +++ b/src/components/d-citation-list.js @@ -4,44 +4,31 @@ import { bibliography_cite } from '../helpers/citation'; const T = Template('d-citation-list', `

References

-
    -`); +
      +`, 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) { diff --git a/src/components/d-cite.js b/src/components/d-cite.js index 7f4b299..460bb04 100644 --- a/src/components/d-cite.js +++ b/src/components/d-cite.js @@ -5,6 +5,10 @@ import { HoverBox } from '../helpers/hover-box'; const T = Template('d-cite', `

      Footnotes

        -`); +`, 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'; } } diff --git a/src/components/d-footnote.js b/src/components/d-footnote.js index 36471e1..94cb472 100644 --- a/src/components/d-footnote.js +++ b/src/components/d-footnote.js @@ -48,7 +48,7 @@ span {
        - +
        @@ -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 diff --git a/src/distill-components/distill-appendix.js b/src/distill-components/distill-appendix.js index 94619df..6770b0e 100644 --- a/src/distill-components/distill-appendix.js +++ b/src/distill-components/distill-appendix.js @@ -4,22 +4,9 @@ const styles = ` `; @@ -46,7 +37,7 @@ export function appendixTemplate(frontMatter) {

        View all changes to this article since it was first published. If you see mistakes or want to suggest changes, please create an issue on GitHub.

        Reuse

        -

        Diagrams and text are licensed under Creative Commons Attribution CC-BY 2.0 with the source available on GitHub, unless noted otherwise. The figures that have been reused from other sources don’t fall under this license and can be recognized by a note in their caption: “Figure from …”.

        +

        Diagrams and text are licensed under Creative Commons Attribution CC-BY 4.0 with the source available on GitHub, unless noted otherwise. The figures that have been reused from other sources don’t fall under this license and can be recognized by a note in their caption: “Figure from …”.

        Citation

        For attribution in academic contexts, please cite this work as

        diff --git a/src/styles/d-article.css b/src/styles/d-article.css index 883516c..31c1827 100644 --- a/src/styles/d-article.css +++ b/src/styles/d-article.css @@ -175,7 +175,6 @@ d-include { d-figure { contain: content; overflow: hidden; - height: 300px; } /* KaTeX */ diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css index 8a184cf..a5279ce 100644 --- a/src/styles/styles-base.css +++ b/src/styles/styles-base.css @@ -69,14 +69,14 @@ figure svg text, figure svg tspan { } -figure figcaption { +figcaption { color: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 1.5em; } @media(min-width: 1024px) { - figure figcaption { +figcaption { font-size: 13px; } } @@ -89,11 +89,11 @@ figure.external img { box-sizing: border-box; } -figure figcaption a { +figcaption a { color: rgba(0, 0, 0, 0.6); } -figure figcaption b { +figcaption b { font-weight: 600; color: rgba(0, 0, 0, 1.0); } diff --git a/src/styles/styles-layout.css b/src/styles/styles-layout.css index 9c1bc3b..7aaa9cb 100644 --- a/src/styles/styles-layout.css +++ b/src/styles/styles-layout.css @@ -1,39 +1,48 @@ @supports not (display: grid) { + .base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, + distill-appendix, d-byline, d-footnote-list, + d-citation-list, distill-footer { display: block; padding: 8px; } } +.base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, +distill-appendix, d-byline, d-footnote-list, +d-citation-list, distill-footer { display: grid; justify-items: stretch; - grid-template-columns: [screen-start] 0.5fr [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 0.5fr [screen-end]; + grid-template-columns: [screen-start] 8px [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 8px [screen-end]; grid-column-gap: 30px; } @media(min-width: 768px) { + .base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, + distill-appendix, d-byline, d-footnote-list, + d-citation-list, distill-footer { grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] 45px 45px 45px 45px 45px 45px 45px 45px [ kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end]; grid-column-gap: 30px; @@ -41,13 +50,16 @@ distill-footer { } @media(min-width: 1000px) { + .base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, + distill-appendix, d-byline, d-footnote-list, + d-citation-list, distill-footer { grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end]; grid-column-gap: 30px; @@ -55,13 +67,16 @@ distill-footer { } @media(min-width: 1280px) { + .base-grid, distill-header, d-title, d-abstract, d-article, d-appendix, + distill-appendix, d-byline, d-footnote-list, + d-citation-list, distill-footer { grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end]; grid-column-gap: 30px; @@ -74,19 +89,10 @@ distill-footer { grid-column-gap: 30px; } -.col-3 { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-column-gap: 30px; +.base-grid { + grid-column: screen; } -.col-2 { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 30px; -} - - /* .l-body, d-article > * { grid-column: text; @@ -99,19 +105,19 @@ d-figure { } */ .l-body-outset { - grid-column: left-outset / right-outset; + grid-column: middle; } .l-page-outset { - grid-column: left-outset / right-outset; + grid-column: page; } .l-screen { - grid-column: start / end; + grid-column: screen; } .l-screen-inset { - grid-column: start / end; + grid-column: screen; padding-left: 16px; padding-left: 16px; }