mirror of
https://github.com/wassname/template.git
synced 2026-08-08 11:28:20 +08:00
New design
This commit is contained in:
Shan Carter
+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