mirror of
https://github.com/wassname/template.git
synced 2026-06-27 17:50:45 +08:00
New design
This commit is contained in:
Shan Carter
+16
-14
@@ -8,7 +8,7 @@
|
||||
<body>
|
||||
<d-front-matter>
|
||||
<script id='distill-front-matter' type="text/json">{
|
||||
"title": "How to Use t-SNE Effectively",
|
||||
"title": "Why Momentum Really Works",
|
||||
"description": "Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.",
|
||||
"published": "Jan 10, 2017",
|
||||
"authors": [
|
||||
@@ -32,17 +32,19 @@
|
||||
}
|
||||
}</script>
|
||||
</d-front-matter>
|
||||
<d-abstract>
|
||||
<p>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?</p>
|
||||
</d-abstract>
|
||||
<d-article>
|
||||
<!-- <d-abstract>
|
||||
<p>This is the first paragraph of the article. Test a long — dash -- here it is.</p>
|
||||
</d-abstract> -->
|
||||
<p>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.
|
||||
<p>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.
|
||||
<a class="marker" href="#section-1" id="section-1"><span>1</span></a>
|
||||
<h2>A Brief Survey of Techniques</h2>
|
||||
<p>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.</p>
|
||||
<p>This is the first paragraph of the article. Test a long — dash -- here it is.</p>
|
||||
<p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.</p>
|
||||
<aside>Some text in an aside, margin notes, etc...</aside>
|
||||
<p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. Also with configurable katex standards just using inline '$' signs: $$x^2$$ And then there's a block equation:</p>
|
||||
<d-math block>
|
||||
c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
|
||||
c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
|
||||
</d-math>
|
||||
<p>
|
||||
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} } } }
|
||||
</d-math>
|
||||
</p>
|
||||
<a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
|
||||
<h3>Citations</h3>
|
||||
<p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite></p>
|
||||
<p>We should also be testing footnotes<d-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. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
|
||||
<table>
|
||||
@@ -65,6 +69,7 @@
|
||||
<tr><td>234</td><td>54</td><td>23</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<a class="marker" href="#section-2" id="section-2"><span>2</span></a>
|
||||
<h2>Displaying code snippets</h2>
|
||||
<p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code>. And here's a javascript code block.</p>
|
||||
<d-code block language="javascript">
|
||||
@@ -105,18 +110,15 @@
|
||||
});
|
||||
</script>
|
||||
<p>That's it for the example article!</p>
|
||||
<aside>Some text.</aside>
|
||||
|
||||
</d-article>
|
||||
|
||||
<d-appendix>
|
||||
|
||||
<div id='contributions'>
|
||||
<h3>Contributions</h3>
|
||||
<p>Some text describing who did what.</p>
|
||||
<h3>Reviewers</h3>
|
||||
<p>Some text with links describing who reviewed the article.</p>
|
||||
</div>
|
||||
<h3>Contributions</h3>
|
||||
<p>Some text describing who did what.</p>
|
||||
<h3>Reviewers</h3>
|
||||
<p>Some text with links describing who reviewed the article.</p>
|
||||
|
||||
<d-bibliography src="bibliography.bib"></d-bibliography>
|
||||
|
||||
|
||||
+2
-1
@@ -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 */
|
||||
|
||||
@@ -5,10 +5,15 @@ const T = Template('d-abstract', `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
font-size: 23px;
|
||||
font-size: 28px;
|
||||
line-height: 1.7em;
|
||||
margin-top: 64px;
|
||||
margin-bottom: 64px;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
::slotted(p) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
grid-column: text-start / page-end;
|
||||
}
|
||||
${body('d-abstract')}
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
+231
-5
@@ -1,13 +1,238 @@
|
||||
import { Template } from '../mixins/template';
|
||||
import { Controller } from '../controller';
|
||||
|
||||
const T = Template('d-article', `
|
||||
<style>
|
||||
export const style =`
|
||||
d-article {
|
||||
contain: content;
|
||||
line-height: 1.7em;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
`, 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();
|
||||
|
||||
+70
-70
@@ -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 `
|
||||
<div class='byline'>
|
||||
<div class="authors">
|
||||
${frontMatter.authors.map( author => `<div class="author">
|
||||
${author.personalURL ?
|
||||
`<a class="name" href="${author.personalURL}">${author.name}</a>`
|
||||
:
|
||||
`<div class="name">${author.name}</div>`
|
||||
}
|
||||
${author.affiliationURL ?
|
||||
`<a class="affiliation" href="${author.affiliationURL}">${author.affiliation}</a>`
|
||||
:
|
||||
`<div class="affiliation">${author.affiliation}</div>`
|
||||
}
|
||||
</div>`).join('\n')}
|
||||
<div class="byline grid">
|
||||
<div class="authors">
|
||||
<h3>Authors</h3>
|
||||
${frontMatter.authors.map(author => `
|
||||
<div>
|
||||
${author.personalURL
|
||||
? `<a class="name" href="${author.personalURL}">${author.name}</a>`
|
||||
: `<div class="name">${author.name}</div>`
|
||||
}
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
<div class="affiliations">
|
||||
<h3>Affiliations</h3>
|
||||
${frontMatter.authors.map(author => `
|
||||
<div>
|
||||
${author.affiliationURL
|
||||
? `<a class="affiliation" href="${author.affiliationURL}">${author.affiliation}</a>`
|
||||
: `<div class="affiliation">${author.affiliation}</div>`
|
||||
}
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Published</h3>
|
||||
<div>${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Cite as</h3>
|
||||
<div>${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>DOI</h3>
|
||||
<div>${frontMatter.doi}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date">
|
||||
<div class="month">${frontMatter.publishedMonth}. ${frontMatter.publishedDay}</div>
|
||||
<div class="year">${frontMatter.publishedYear}</div>
|
||||
</div>
|
||||
<a class="citation" href="#citation">
|
||||
<div>${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}</div>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,6 +6,10 @@ const T = Template('d-footnote-list', `
|
||||
contain: content;
|
||||
}
|
||||
|
||||
* {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0 0 0 18px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Template } from '../mixins/template';
|
||||
import { body } from '../helpers/layout';
|
||||
|
||||
const T = Template('d-headline', `
|
||||
<style>
|
||||
:host {
|
||||
margin-top: 64px;
|
||||
contain: content;
|
||||
display: block;
|
||||
}
|
||||
.status {
|
||||
grid-column: kicker;
|
||||
font-size: 12px;
|
||||
margin-top: 14px;
|
||||
color: #009688;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.status span {
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
border-top: 1px solid #80cbc4;
|
||||
border-bottom: 1px solid #80cbc4;
|
||||
}
|
||||
::slotted(h1) {
|
||||
grid-column: text-start / page-end;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3em;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
${body('d-headline')}
|
||||
</style>
|
||||
<div class="status kicker"><span>Peer Reviewed</span></div>
|
||||
<slot></slot>
|
||||
`);
|
||||
|
||||
export class Headline extends T(HTMLElement) {
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
|
||||
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user