mirror of
https://github.com/wassname/template.git
synced 2026-08-19 12:40:25 +08:00
Slider checkpoint
This commit is contained in:
Shan Carter
+18
-17
@@ -3,29 +3,30 @@ import { makeStyleTag } from './styles/styles';
|
||||
makeStyleTag(document);
|
||||
|
||||
/* Components */
|
||||
import { Abstract } from './components/d-abstract';
|
||||
import { Appendix } from './components/d-appendix';
|
||||
import { Article } from './components/d-article';
|
||||
import { Bibliography } from './components/d-bibliography';
|
||||
import { Byline } from './components/d-byline';
|
||||
import { Cite } from './components/d-cite';
|
||||
import { CitationList } from './components/d-citation-list';
|
||||
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 { Title } from './components/d-title';
|
||||
import { DMath } from './components/d-math';
|
||||
import { References } from './components/d-references';
|
||||
import { TOC } from './components/d-toc';
|
||||
import { Figure } from './components/d-figure';
|
||||
import { Abstract } from './components/d-abstract';
|
||||
import { Appendix } from './components/d-appendix';
|
||||
import { Article } from './components/d-article';
|
||||
import { Bibliography } from './components/d-bibliography';
|
||||
import { Byline } from './components/d-byline';
|
||||
import { Cite } from './components/d-cite';
|
||||
import { CitationList } from './components/d-citation-list';
|
||||
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 { Title } from './components/d-title';
|
||||
import { DMath } from './components/d-math';
|
||||
import { References } from './components/d-references';
|
||||
import { TOC } from './components/d-toc';
|
||||
import { Figure } from './components/d-figure';
|
||||
import { Interstitial } from './components/d-interstitial';
|
||||
|
||||
import { Slider } from './ui/d-slider';
|
||||
|
||||
const components = [
|
||||
Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
|
||||
Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
|
||||
Slider
|
||||
Slider, Interstitial
|
||||
];
|
||||
|
||||
/* Distill website specific components */
|
||||
|
||||
+1
-241
@@ -1,246 +1,6 @@
|
||||
import { Template } from '../mixins/template';
|
||||
import { Controller } from '../controller';
|
||||
|
||||
export const style =`
|
||||
d-article {
|
||||
contain: content;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 2rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
d-article > * {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-article {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* H2 */
|
||||
|
||||
|
||||
d-article .marker {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
counter-reset: section;
|
||||
grid-column: kicker;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
d-article .marker:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
d-article .marker span {
|
||||
padding: 0 3px 4px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
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: page-end;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.25em;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
@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 {
|
||||
font-family: georgia, serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.7em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
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;
|
||||
// if (title) {
|
||||
// const titleTag = document.querySelector()
|
||||
//
|
||||
// }
|
||||
// }
|
||||
import style from '../styles/d-article.css';
|
||||
|
||||
const isOnlyWhitespace = /^\s*$/;
|
||||
|
||||
|
||||
@@ -1,49 +1,4 @@
|
||||
export const style = `
|
||||
d-byline {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
contain: content;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.8em;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
d-byline .byline {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
d-byline h3 {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
d-byline p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
d-byline a,
|
||||
d-article d-byline a {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-article d-byline a:hover {
|
||||
text-decoration: underline;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-byline .authors p {
|
||||
font-weight: 600;
|
||||
}
|
||||
d-byline .affiliations {
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
import style from '../styles/d-byline.css';
|
||||
|
||||
export function bylineTemplate(frontMatter) {
|
||||
return `
|
||||
|
||||
+47
-35
@@ -4,31 +4,55 @@ import { HoverBox } from '../helpers/hover-box';
|
||||
|
||||
const T = Template('d-cite', `
|
||||
<style>
|
||||
.citation {
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
}
|
||||
.citation-number {
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
|
||||
font-size: 75%;
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
display: inline-block;
|
||||
line-height: 1.1em;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
figcaption .citation-number {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
top: -2px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.citation {
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
}
|
||||
|
||||
.citation-number {
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
|
||||
font-size: 75%;
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
display: inline-block;
|
||||
line-height: 1.1em;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
figcaption .citation-number {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
top: -2px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.dt-hover-box {
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
max-width: 700px;
|
||||
background-color: #FFF;
|
||||
opacity: 0.95;
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
padding: 8px 16px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="hover-box" class="dt-hover-box">
|
||||
<div class="container">
|
||||
<div id="hover-box" class="dt-hover-box"></div>
|
||||
</div>
|
||||
|
||||
<span id="citation-" class="citation">
|
||||
@@ -37,18 +61,6 @@ const T = Template('d-cite', `
|
||||
</span>
|
||||
`);
|
||||
|
||||
export function collectCitations(dom=document) {
|
||||
const citations = new Set();
|
||||
const citeTags = dom.querySelectorAll('d-cite');
|
||||
for (const tag of citeTags) {
|
||||
const keys = tag.getAttribute('key').split(',');
|
||||
for (const key of keys) {
|
||||
citations.add(key);
|
||||
}
|
||||
}
|
||||
return [...citations];
|
||||
}
|
||||
|
||||
export class Cite extends T(HTMLElement) {
|
||||
|
||||
/* Lifecycle */
|
||||
|
||||
@@ -8,14 +8,16 @@ d-math[block] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
sup {
|
||||
line-height: 1em;
|
||||
font-size: 0.75em;
|
||||
position: relative;
|
||||
top: 0;
|
||||
top: -.5em;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -23,13 +25,36 @@ span {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.dt-hover-box {
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
max-width: 700px;
|
||||
background-color: #FFF;
|
||||
opacity: 0.95;
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
padding: 8px 16px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="hover-box" class="dt-hover-box">
|
||||
<slot id="slot"></slot>
|
||||
<div class="container">
|
||||
<div id="hover-box" class="dt-hover-box">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<sup><span id="fn-" data-hover-ref=""></span></sup>
|
||||
<sup>
|
||||
<span id="fn-" data-hover-ref=""></span>
|
||||
</sup>
|
||||
|
||||
`);
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ export function parseFrontmatter(element) {
|
||||
const content = scriptTag.textContent;
|
||||
return JSON.parse(content);
|
||||
} else {
|
||||
console.error('Distill only supoprts JSON frontmatter tags anymore; no more YAML.');
|
||||
console.error('Distill only supports JSON frontmatter tags anymore; no more YAML.');
|
||||
}
|
||||
} else {
|
||||
console.error('You added a frontmatter tag but did not provide a script tag with front matter data in it. Please take a look at our templates.');
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Template } from '../mixins/template';
|
||||
|
||||
// This overlay is not secure.
|
||||
// It is only meant as a social deterrent.
|
||||
|
||||
const T = Template('d-interstitial', `
|
||||
<style>
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: white;
|
||||
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
z-index: 2147483647 /* MaxInt32 */
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: hsl(0,100%,40%);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-border-radius: none;
|
||||
-moz-border-radius: none;
|
||||
-ms-border-radius: none;
|
||||
-o-border-radius: none;
|
||||
border-radius: none;
|
||||
outline: none;
|
||||
|
||||
font-size: 18px;
|
||||
background: none;
|
||||
width: 25%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-bottom: solid 2px #999;
|
||||
transition: border .3s;
|
||||
}
|
||||
|
||||
input[type="password"]:focus {
|
||||
border-bottom: solid 2px #333;
|
||||
}
|
||||
|
||||
input[type="password"].wrong {
|
||||
border-bottom: solid 2px hsl(0,100%,40%);
|
||||
}
|
||||
|
||||
p small {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="container">
|
||||
<h1>This article is in review.</h1>
|
||||
<p>Do not share this URL, or the contents of this article. Thank you!</p>
|
||||
<input id="interstitial-password-input" type="password" name="password" autofocus/>
|
||||
<p><small>Enter the password we shared with you as part of the review process to view the article.</small></p>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
export class Interstitial extends T(HTMLElement) {
|
||||
|
||||
connectedCallback() {
|
||||
const passwordInput = this.root.querySelector('#interstitial-password-input');
|
||||
passwordInput.oninput = (event) => this.passwordChanged(event);
|
||||
}
|
||||
|
||||
passwordChanged(event) {
|
||||
const entered = event.target.value;
|
||||
if (entered === this.password) {
|
||||
console.log('Correct password entered.');
|
||||
event.target.classList.add('correct');
|
||||
this.parentElement.removeChild(this);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -31,7 +31,7 @@ const T = Template('d-title', `
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="status"><span>✓ Peer Reviewed</span></div>
|
||||
<!-- <div class="status"><span>✓ Peer Reviewed</span></div> -->
|
||||
<slot></slot>
|
||||
`);
|
||||
|
||||
|
||||
+8
-3
@@ -1,6 +1,6 @@
|
||||
import { FrontMatter } from './front-matter';
|
||||
import { DMath } from './components/d-math';
|
||||
import { collectCitations } from './components/d-cite';
|
||||
import { collect_citations } from './helpers/citation.js';
|
||||
import { parseFrontmatter } from './components/d-front-matter';
|
||||
import optionalComponents from './transforms/optional-components';
|
||||
|
||||
@@ -42,7 +42,7 @@ export const Controller = {
|
||||
// const [citeTag, keys] = event.detail;
|
||||
|
||||
// update citations
|
||||
frontMatter.citations = collectCitations();
|
||||
frontMatter.citations = collect_citations();
|
||||
frontMatter.citationsCollected = true;
|
||||
for (const waitingCallback of Controller.waitingOn.citations.slice()) {
|
||||
waitingCallback();
|
||||
@@ -109,6 +109,11 @@ export const Controller = {
|
||||
const data = event.detail;
|
||||
frontMatter.mergeFromYMLFrontmatter(data);
|
||||
|
||||
const interstitial = document.querySelector('d-interstitial');
|
||||
if (interstitial) {
|
||||
interstitial.password = frontMatter.password;
|
||||
}
|
||||
|
||||
const prerendered = document.body.hasAttribute('distill-prerendered');
|
||||
if (!prerendered) {
|
||||
optionalComponents(document, frontMatter);
|
||||
@@ -138,7 +143,7 @@ export const Controller = {
|
||||
Controller.listeners.onFrontMatterChanged({detail: data});
|
||||
|
||||
// console.debug('Resolving "citations" dependency due to initial DOM load.');
|
||||
frontMatter.citations = collectCitations();
|
||||
frontMatter.citations = collect_citations();
|
||||
frontMatter.citationsCollected = true;
|
||||
for (const waitingCallback of Controller.waitingOn.citations.slice()) {
|
||||
waitingCallback();
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { collectCitations } from '../components/d-cite';
|
||||
import { collect_citations } from '../helpers/citation.js';
|
||||
|
||||
export default function(dom, data) {
|
||||
data.citations = collectCitations(dom);
|
||||
data.citations = collect_citations(dom);
|
||||
}
|
||||
|
||||
@@ -124,6 +124,7 @@ export class FrontMatter {
|
||||
this.description = data.description;
|
||||
this.authors = data.authors.map( (authorObject) => new Author(authorObject));
|
||||
this.katex = data.katex;
|
||||
this.password = data.password;
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
@@ -1,3 +1,15 @@
|
||||
export function collect_citations(dom=document) {
|
||||
const citations = new Set();
|
||||
const citeTags = dom.querySelectorAll('d-cite');
|
||||
for (const tag of citeTags) {
|
||||
const keys = tag.getAttribute('key').split(',');
|
||||
for (const key of keys) {
|
||||
citations.add(key);
|
||||
}
|
||||
}
|
||||
return [...citations];
|
||||
}
|
||||
|
||||
export function inline_cite_short(keys){
|
||||
function cite_string(key){
|
||||
if (key in data.bibliography){
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
function make_hover_css(pos) {
|
||||
function make_hover_css(target_node, pos) {
|
||||
const pretty = window.innerWidth > 600;
|
||||
const padding = pretty? 18 : 12;
|
||||
const outer_padding = pretty ? 18 : 0;
|
||||
const bbox = document.querySelector('body').getBoundingClientRect();
|
||||
// const bbox = document.querySelector('body').getBoundingClientRect();
|
||||
const bbox = target_node.offsetParent.getBoundingClientRect();
|
||||
let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
|
||||
let width = Math.min(window.innerWidth-2*outer_padding, 648);
|
||||
left = Math.min(left, window.innerWidth-width-outer_padding);
|
||||
@@ -77,8 +78,8 @@ export class HoverBox {
|
||||
|
||||
show(position) {
|
||||
this.visible = true;
|
||||
const css = make_hover_css(position);
|
||||
this.div.setAttribute('style', css );
|
||||
// const css = make_hover_css(this.triggerElement, position);
|
||||
this.div.setAttribute('style', 'display: block;' );
|
||||
}
|
||||
|
||||
showAtNode(node) {
|
||||
@@ -88,7 +89,7 @@ export class HoverBox {
|
||||
|
||||
hide() {
|
||||
this.visible = false;
|
||||
this.div.setAttribute('style', 'display:none');
|
||||
this.div.setAttribute('style', 'display: none;');
|
||||
this.stopTimeout();
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
d-article {
|
||||
contain: content;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 2rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
d-article > * {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-article {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* H2 */
|
||||
|
||||
|
||||
d-article .marker {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
counter-reset: section;
|
||||
grid-column: kicker;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
d-article .marker:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
d-article .marker span {
|
||||
padding: 0 3px 4px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
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: page-end;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.25em;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
@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 {
|
||||
/*font-family: georgia, serif;*/
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.7em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
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 {
|
||||
grid-column: screen;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
d-article span.equation-mimic {
|
||||
font-family: georgia;
|
||||
font-size: 115%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
d-byline {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
contain: content;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.8em;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
d-byline .byline {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
d-byline h3 {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
d-byline p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
d-byline a,
|
||||
d-article d-byline a {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-article d-byline a:hover {
|
||||
text-decoration: underline;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-byline .authors p {
|
||||
font-weight: 600;
|
||||
}
|
||||
d-byline .affiliations {
|
||||
|
||||
}
|
||||
@@ -52,3 +52,48 @@ pre {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
/* Figure */
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
figure img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure svg text,
|
||||
figure svg tspan {
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
figure figcaption {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
figure figcaption a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
figure figcaption b {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import base from './styles-base.css';
|
||||
import layout from './styles-layout.css';
|
||||
import print from './styles-print.css';
|
||||
import { style as byline } from '../components/d-byline';
|
||||
import { style as article } from '../components/d-article';
|
||||
import byline from './d-byline.css';
|
||||
import article from './d-article.css';
|
||||
import math from './d-math.css';
|
||||
|
||||
export const styles = base + layout + byline + article + math + print;
|
||||
|
||||
@@ -9,7 +9,14 @@
|
||||
|
||||
export default function(dom, data) {
|
||||
const article = dom.querySelector('d-article');
|
||||
const abstract = dom.querySelector('d-abstract');
|
||||
// const abstract = dom.querySelector('d-abstract');
|
||||
|
||||
let interstitial = dom.querySelector('d-interstitial');
|
||||
if (!interstitial && data.password) {
|
||||
interstitial = dom.createElement('d-interstitial');
|
||||
interstitial.password = data.password;
|
||||
dom.body.insertBefore(interstitial, dom.body.firstChild);
|
||||
}
|
||||
|
||||
// let h1 = dom.querySelector('h1');
|
||||
// if (h1) {
|
||||
@@ -17,18 +24,18 @@ export default function(dom, data) {
|
||||
// data.title = h1.textContent;
|
||||
// }
|
||||
// } else {
|
||||
if (data.title) {
|
||||
let headline = dom.createElement('d-title');
|
||||
let h1 = dom.createElement('h1');
|
||||
headline.appendChild(h1);
|
||||
h1.textContent = data.title;
|
||||
abstract.parentNode.insertBefore(headline, abstract);
|
||||
}
|
||||
// if (data.description) {
|
||||
// const h2 = dom.createElement('h2');
|
||||
// h2.textContent = data.description;
|
||||
// article.insertBefore(h2, h1.nextSibling);
|
||||
// }
|
||||
// if (data.title) {
|
||||
// let headline = dom.createElement('d-title');
|
||||
// let h1 = dom.createElement('h1');
|
||||
// headline.appendChild(h1);
|
||||
// h1.textContent = data.title;
|
||||
// abstract.parentNode.insertBefore(headline, abstract);
|
||||
// }
|
||||
// if (data.description) {
|
||||
// const h2 = dom.createElement('h2');
|
||||
// h2.textContent = data.description;
|
||||
// article.insertBefore(h2, h1.nextSibling);
|
||||
// }
|
||||
// }
|
||||
|
||||
let byline = dom.querySelector('d-byline');
|
||||
|
||||
Reference in New Issue
Block a user