diff --git a/examples/article.html b/examples/article.html index ee328c9..2855a99 100644 --- a/examples/article.html +++ b/examples/article.html @@ -8,7 +8,7 @@ + +

We often think of Momentum as a means of dampening oscillations and speeding up the iterations, leading to faster convergence. But it has other interesting behavior. It allows a larger range of step-sizes to be used, and creates its own oscillations. What is going on?

+ - -

A popular method for exploring high-dimensional data is something called t-SNE. The technique has become widespread in the field of machine learning, since it has an almost magical ability to create compelling two-dimensonal “maps” from data with hundreds or even thousands of dimensions. Although impressive, these images can be tempting to misread. The purpose of this note is to prevent some common misreadings. -

Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it. The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying data, performing different transformations on different regions. Those differences can be a major source of confusion. + 1 +

A Brief Survey of Techniques

+

Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it. The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying data, performing different transformations on different regions. Those differences can be a major source of confusion.

This is the first paragraph of the article. Test a long — dash -- here it is.

Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.

+

Here's a test of an inline equation c = a^2 + b^2. Also with configurable katex standards just using inline '$' signs: $$x^2$$ And then there's a block equation:

- c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}} + c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}

Math can also be quite involved: @@ -53,6 +55,8 @@ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

+ 1.1 +

Citations

We can also cite external publications.

We should also be testing footnotesThis will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.. There are multiple footnotes, and they appear in the appendixGiven I have coded them right. Also, here's math in a footnote: c = \sum_0^i{x}. Also, a citation. Box-ception! as well.

@@ -65,6 +69,7 @@
2345423
+ 2

Displaying code snippets

Some inline javascript:var x = 25;. And here's a javascript code block.

@@ -105,18 +110,15 @@ });

That's it for the example article!

- -
-

Contributions

-

Some text describing who did what.

-

Reviewers

-

Some text with links describing who reviewed the article.

-
+

Contributions

+

Some text describing who did what.

+

Reviewers

+

Some text with links describing who reviewed the article.

diff --git a/src/components.js b/src/components.js index 6c1a819..8eee8de 100644 --- a/src/components.js +++ b/src/components.js @@ -14,6 +14,7 @@ import { Code } from './components/d-code'; import { Footnote } from './components/d-footnote'; import { FootnoteList } from './components/d-footnote-list'; import { FrontMatter } from './components/d-front-matter'; +import { Headline } from './components/d-headline'; import { DMath } from './components/d-math'; import { References } from './components/d-references'; import { TOC } from './components/d-toc'; @@ -21,7 +22,7 @@ import { Figure } from './components/d-figure'; const components = [ Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code, - Footnote, FootnoteList, FrontMatter, DMath, References, TOC, Figure, + Footnote, FootnoteList, FrontMatter, Headline, DMath, References, TOC, Figure, ]; /* Distill website specific components */ diff --git a/src/components/d-abstract.js b/src/components/d-abstract.js index ff46ae5..9cc714c 100644 --- a/src/components/d-abstract.js +++ b/src/components/d-abstract.js @@ -5,10 +5,15 @@ const T = Template('d-abstract', ` diff --git a/src/components/d-appendix.js b/src/components/d-appendix.js index c9a7958..0e832f9 100644 --- a/src/components/d-appendix.js +++ b/src/components/d-appendix.js @@ -6,7 +6,6 @@ const T = Template('d-appendix', ` d-appendix { contain: content; - font-size: 13px; line-height: 1.7em; margin-bottom: 0; @@ -17,6 +16,7 @@ d-appendix { } d-appendix h3 { + grid-column: page-start / text-start; font-size: 15px; font-weight: 500; margin-top: 20px; @@ -30,7 +30,7 @@ d-appendix a { } d-appendix > * { - grid-column: left / text; + grid-column: text; } diff --git a/src/components/d-article.js b/src/components/d-article.js index ba9996f..e552f81 100644 --- a/src/components/d-article.js +++ b/src/components/d-article.js @@ -1,13 +1,238 @@ import { Template } from '../mixins/template'; import { Controller } from '../controller'; -const T = Template('d-article', ` - -`, false); + +d-article > * { + grid-column: text; +} + +@media(min-width: 768px) { + d-article { + font-size: 16px; + } +} + +@media(min-width: 1024px) { + d-article { + font-size: 19px; + } +} + +d-article p { + +} + + +/* H2 */ + + +d-article .marker { + text-decoration: none; + border: none; + counter-reset: section; + grid-column: kicker; + align-items: center; + display: flex; + line-height: 1.7em; +} + +d-article .marker:hover { + border: none; +} + +d-article .marker span { + padding: 0 3px; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); +} + +d-article .marker:hover span { + color: rgba(0, 0, 0, 0.7); + border-bottom: 1px solid rgba(0, 0, 0, 0.7); +} + +d-article h2 { + grid-column-end: span 5; + font-weight: 600; + font-size: 24px; + line-height: 1.25em; +} + +@media(min-width: 1024px) { + d-article h2 { + font-size: 24px; + } +} + +/* H3 */ + +d-article h3 { + font-weight: 700; + font-size: 18px; + line-height: 1.4em; + margin-bottom: 24px; + margin-top: 0; +} + +@media(min-width: 1024px) { + d-article h3 { + font-size: 20px; + } +} + +/* H4 */ + +d-article h4 { + font-weight: 600; + text-transform: uppercase; + font-size: 14px; + line-height: 1.4em; +} + +d-article a { + color: inherit; +} + +d-article p, +d-article ul, +d-article ol { + margin-top: 0; + margin-bottom: 36px; +} + +d-article a { + border-bottom: 1px solid rgba(0, 0, 0, 0.4); + text-decoration: none; +} + +d-article a:hover { + border-bottom: 1px solid rgba(0, 0, 0, 0.8); +} + +d-article .link { + text-decoration: underline; + cursor: pointer; +} + +d-article ul, +d-article ol { + padding-left: 24px; +} + +d-article li { + margin-bottom: 24px; + margin-left: 0; + padding-left: 0; +} + +d-article pre { + font-size: 14px; + margin-bottom: 20px; +} + +d-article hr { + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + margin-top: 60px; + margin-bottom: 60px; +} + +d-article section { + margin-top: 60px; + 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; +} + +d-article > d-math[block], +d-article section > d-math[block] { + display: block; +} + +d-article .citation { + color: #668; + cursor: pointer; +} + +d-include { + width: auto; + display: block; +} + +d-figure { + contain: content; + overflow: hidden; + height: 300px; +} + +/* KaTeX */ + +.katex, .katex-prerendered { + contain: content; + display: inline-block; +} + +`; + // export function addInferableTags(dom, frontMatter) { // const title = frontMatter.title; @@ -19,7 +244,8 @@ d-article { const isOnlyWhitespace = /^\s*$/; -export class Article extends T(HTMLElement) { +export class Article extends HTMLElement { + static get is() { return 'd-article'; } constructor() { super(); diff --git a/src/components/d-byline.js b/src/components/d-byline.js index 8c4f564..e6d2eca 100644 --- a/src/components/d-byline.js +++ b/src/components/d-byline.js @@ -1,28 +1,22 @@ export const style = ` d-byline { + border-top: 1px solid rgba(0, 0, 0, 0.1); contain: content; + font-size: 13px; + line-height: 2em; + padding: 1.5em 0; } d-byline .byline { - grid-column: left / page; - font-size: 13px; - line-height: 1.8em; - color: rgba(0, 0, 0, 0.6); + grid-template-columns: repeat(5, 1fr); + grid-column: text-start / page-end; } -d-byline .byline::before { - content: ""; - display: block; - border-bottom: solid 1px #999; - width: 36px; - margin-bottom: 36px; -} -d-byline .byline::after { - content: ""; - display: block; - border-bottom: solid 1px #999; - width: 36px; - margin-top: 36px; - margin-bottom: 36px; + +d-byline h3 { + font-weight: 300; + color: rgba(0, 0, 0, 0.7); + font-size: 14px; + margin: 0; } d-byline a, @@ -37,72 +31,78 @@ d-article d-byline a:hover { border-bottom: none; } +d-byline table tbody td { + margin: 0!important; + padding: 0!important; +} + +d-byline table tr { +} + +d-byline table td:last-child { +} + +d-byline table tr:first-child { + border-top: none; +} + + +/*Authors*/ + d-byline .authors { - text-align: left; -} - -d-byline .author { - margin-right: 12px; -} - -d-byline .author .name { font-weight: 600; - display: inline; - text-transform: uppercase; - margin-right: 10px; } -d-byline .author .affiliation { - display: inline; +d-byline td:first-child { } -d-byline .date { - display: inline; - text-align: left; - margin-right: 12px; +d-byline .colophon, +d-byline .colophon a { + font-size: 12px; + color: rgba(0, 0, 0, 0.5); } -d-byline .date .year, -d-byline .date .month { - display: inline; -} - -d-byline .citation { - display: inline; - text-align: left; -} - -d-byline .citation div { - display: inline; -} `; export function bylineTemplate(frontMatter) { return ` -
-
- ${frontMatter.authors.map( author => `
- ${author.personalURL ? - `${author.name}` - : - `
${author.name}
` -} - ${author.affiliationURL ? - `${author.affiliation}` - : - `
${author.affiliation}
` -} -
`).join('\n')} +
+
+

Authors

+ ${frontMatter.authors.map(author => ` +
+ ${author.personalURL + ? `${author.name}` + : `
${author.name}
` + } +
+ `).join("")} +
+
+

Affiliations

+ ${frontMatter.authors.map(author => ` +
+ ${author.affiliationURL + ? `${author.affiliation}` + : `
${author.affiliation}
` + } +
+ `).join("")} +
+
+

Published

+
${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}
+
+
+

Cite as

+
${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}
+
+
+

DOI

+
${frontMatter.doi}
+
-
-
${frontMatter.publishedMonth}. ${frontMatter.publishedDay}
-
${frontMatter.publishedYear}
-
- -
${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}
- -
`; } diff --git a/src/components/d-footnote-list.js b/src/components/d-footnote-list.js index cc2beca..3c1de06 100644 --- a/src/components/d-footnote-list.js +++ b/src/components/d-footnote-list.js @@ -6,6 +6,10 @@ const T = Template('d-footnote-list', ` contain: content; } +* { + grid-column: text; +} + ol { padding: 0 0 0 18px; } diff --git a/src/components/d-headline.js b/src/components/d-headline.js new file mode 100644 index 0000000..e7fd244 --- /dev/null +++ b/src/components/d-headline.js @@ -0,0 +1,39 @@ +import { Template } from '../mixins/template'; +import { body } from '../helpers/layout'; + +const T = Template('d-headline', ` + +
Peer Reviewed
+ +`); + +export class Headline extends T(HTMLElement) { + +} diff --git a/src/styles/styles-article.css b/src/styles/styles-article.css deleted file mode 100644 index 2248999..0000000 --- a/src/styles/styles-article.css +++ /dev/null @@ -1,226 +0,0 @@ -d-article { - color: rgba(0, 0, 0, 0.8); - padding-top: 0; - padding-bottom: 72px; - overflow: hidden; - font-size: 14px; - line-height: 1.6em; - /*border-top: 1px solid rgba(0, 0, 0, 0.2);*/ -} -@media(min-width: 768px) { - d-article { - font-size: 16px; - } -} -@media(min-width: 1024px) { - d-article { - font-size: 18px; - } -} - -d-article h1 { - grid-column: left / page; - padding-top: 16px; - padding-bottom: 0; - margin-top: 0; - margin-bottom: 18px; - line-height: 1.15; - font-size: 32px; - font-weight: 700; -} - -d-article h1+h2 { - grid-column: left / page; - 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 { - d-article h1 { - font-size: 42px; - } -} -@media(min-width: 1024px) { - d-article h1 { - padding-top: 64px; - font-size: 42px; - } -} -@media(min-width: 1280px) { - d-article h1 { - padding-top: 96px; - } -} - -/* H2 */ - -d-article h2 { - font-weight: 400; - font-size: 26px; - line-height: 1.25em; - padding-top: 36px; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); - margin-bottom: 18px; - padding-bottom: 18px; -} -@media(min-width: 1024px) { - d-article h2 { - font-size: 30px; - } -} - -/* H3 */ - -d-article h3 { - font-weight: 700; - font-size: 18px; - line-height: 1.4em; - margin-bottom: 24px; - margin-top: 0; -} -@media(min-width: 1024px) { - d-article h3 { - font-size: 20px; - } -} - -/* H4 */ - -d-article h4 { - font-weight: 600; - text-transform: uppercase; - font-size: 14px; - line-height: 1.4em; -} -d-article a { - color: inherit; -} -d-article p, -d-article ul, -d-article ol { - margin-top: 0; - margin-bottom: 36px; -} -d-article a { - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - text-decoration: none; -} -d-article a:hover { - border-bottom: 1px solid rgba(0, 0, 0, 0.8); -} -d-article .link { - text-decoration: underline; - cursor: pointer; -} -d-article ul, -d-article ol { - padding-left: 24px; -} -d-article li { - margin-bottom: 24px; - margin-left: 0; - padding-left: 0; -} -d-article pre { - font-size: 14px; - margin-bottom: 20px; -} -d-article hr { - border: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); - margin-top: 60px; - margin-bottom: 60px; -} -d-article section { - margin-top: 60px; - margin-bottom: 60px; -} - -/* Figure */ - -d-article figure { - position: relative; - margin-bottom: 36px; -} -d-article h1 + figure { - margin-top: 12px; -} -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 figure figcaption::before { - position: relative; - display: block; - top: -20px; - content: ""; - width: 25px; - border-top: 1px solid rgba(0, 0, 0, 0.3); -}*/ -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; -} -d-article > d-math[block], -d-article section > d-math[block] { - display: block; -} -d-article .citation { - color: #668; - cursor: pointer; -} -d-include { - width: auto; - display: block; -} - -d-figure { - contain: content; - overflow: hidden; - height: 300px; -} - -/* KaTeX */ - -.katex, .katex-prerendered { - contain: content; - display: inline-block; -} diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css index 2fb58b6..ac474bc 100644 --- a/src/styles/styles-base.css +++ b/src/styles/styles-base.css @@ -44,3 +44,10 @@ pre { overflow: auto; max-width: 100%; } + +.kicker, +.marker { + font-size: 15px; + font-weight: 600; + color: rgba(0, 0, 0, 0.5); +} diff --git a/src/styles/styles-layout.css b/src/styles/styles-layout.css index a28cb2c..7b8f997 100644 --- a/src/styles/styles-layout.css +++ b/src/styles/styles-layout.css @@ -1,20 +1,25 @@ @supports not (display: grid) { + d-headline, + d-abstract, d-article, d-appendix, d-byline, + d-footnote-list, distill-footer { display: block; padding: 8px; } } +d-headline, +d-abstract, d-article, d-appendix, d-byline, +d-footnote-list, distill-footer { display: grid; justify-items: stretch; - grid-template-columns: [start] 8px [left-outset] 8px [left] 1fr [text] 0px [page] 8px [text-outset] 0px [page-outset] 8px [end]; } /* @media(min-width: 768px) { @@ -26,39 +31,69 @@ distill-footer { grid-template-columns: [start] 32px [left-outset] 32px [left] 3fr [text] 32px [text-outset] 1fr [page] 32px [page-outset] 32px [end]; } }*/ - -@media(min-width: 768px) { +/* @media(min-width: 768px) { + d-headline, + d-abstract, d-article, d-appendix, d-byline, + d-footnote-list, distill-footer { - grid-template-columns: [start] 1fr [left-outset] 32px [left] 672px [text] 32px [text-outset] 224px [page] 32px [page-outset] 1fr [end]; + grid-template-columns: [screen-start] 0 [page-start] 1fr [text-start] 1fr 1fr 1fr 1fr [text-end] 1fr [page-end] 0 [screen-end]; + grid-column-gap: 30px; + } +} */ + +@media(min-width: 1060px) { + d-headline, + d-abstract, + d-article, + d-appendix, + d-byline, + d-footnote-list, + distill-footer { + grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px 50px [page-end gutter-end] 1fr [screen-end]; + /* grid-template-columns: [screen-start] 1fr [page-start] 130px [text-start] 130px 130px 130px 130px [text-end] 130px [page-end] 1fr [screen-end]; */ + grid-column-gap: 30px; } } -d-article, -d-appendix, -d-article > d-byline, -d-article > distill-footer { - grid-column: start / end; + +.grid { + display: grid; + grid-column-gap: 30px; } -.l-body, -d-article > * { - grid-column: left / text; +.col-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 30px; +} + +.col-2 { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 30px; +} + + +/* .l-body, +d-article > * { + grid-column: text; } .l-page, +d-headline > *, d-figure { - grid-column: left / page; -} + grid-column: page; +} */ .l-body-outset { - grid-column: left-outset / text-outset; + grid-column: left-outset / right-outset; } .l-page-outset { - grid-column: left-outset / page-outset; + grid-column: left-outset / right-outset; } .l-screen { @@ -74,13 +109,13 @@ d-figure { /* Aside */ -aside { - grid-column: left / text; +d-article aside { + grid-column: gutter; } @media(min-width: 768px) { aside { - grid-column: text-outset / page; + grid-column: right-outset / right-page; font-size: 14px; line-height: 1.3; } @@ -91,22 +126,3 @@ aside { width: 50%; } } - - -/* Rows and Columns */ - -.row { - display: flex; -} -.column { - flex: 1; - box-sizing: border-box; - margin-right: 24px; - margin-left: 24px; -} -.row > .column:first-of-type { - margin-left: 0; -} -.row > .column:last-of-type { - margin-right: 0; -} diff --git a/src/styles/styles.js b/src/styles/styles.js index 1331025..6409aea 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1,11 +1,11 @@ import base from './styles-base.css'; 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'; +import { style as article } from '../components/d-article'; import math from './d-math.css'; -export const styles = base + layout + byline + math + article + print; +export const styles = base + layout + byline + article + math + print; export function makeStyleTag(dom) { diff --git a/src/transforms/optional-components.js b/src/transforms/optional-components.js index b532379..d7a6f4f 100644 --- a/src/transforms/optional-components.js +++ b/src/transforms/optional-components.js @@ -9,34 +9,38 @@ export default function(dom, data) { const article = dom.querySelector('d-article'); + const abstract = dom.querySelector('d-abstract'); - let h1 = dom.querySelector('h1'); - if (h1) { - if (!data.title) { - data.title = h1.textContent; - } - } else { + // let h1 = dom.querySelector('h1'); + // if (h1) { + // if (!data.title) { + // data.title = h1.textContent; + // } + // } else { if (data.title) { - h1 = dom.createElement('h1'); + let headline = dom.createElement('d-headline'); + let h1 = dom.createElement('h1'); + headline.appendChild(h1); h1.textContent = data.title; - article.insertBefore(h1, article.firstChild); + abstract.parentNode.insertBefore(headline, abstract); } - if (data.description) { - const h2 = dom.createElement('h2'); - h2.textContent = data.description; - article.insertBefore(h2, h1.nextSibling); - } - } + // if (data.description) { + // const h2 = dom.createElement('h2'); + // h2.textContent = data.description; + // article.insertBefore(h2, h1.nextSibling); + // } + // } let byline = dom.querySelector('d-byline'); if (!byline && data.authors) { byline = dom.createElement('d-byline'); - const skipTags = ['H1', 'H2', 'FIGURE']; - let candidate = h1; - while (skipTags.indexOf(candidate.tagName) !== -1) { - candidate = candidate.nextSibling; - } - article.insertBefore(byline, candidate); + article.parentNode.insertBefore(byline, article); + // const skipTags = ['H1', 'FIGURE', 'D-ABSTRACT']; + // let candidate = h1; + // while (skipTags.indexOf(candidate.tagName) !== -1) { + // candidate = candidate.nextSibling; + // } + // article.insertBefore(byline, candidate); } let appendix = dom.querySelector('d-appendix');