mirror of
https://github.com/wassname/template.git
synced 2026-08-03 13:20:32 +08:00
New design
This commit is contained in:
Shan Carter
@@ -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) {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user