mirror of
https://github.com/wassname/template.git
synced 2026-06-27 19:17:15 +08:00
Style fixes and cleanup for appendix
This commit is contained in:
Ludwig Schubert
@@ -15,8 +15,6 @@ program
|
||||
.option('-o, --output-path <path>', 'path to write rendered HTML file to.')
|
||||
.parse(process.argv);
|
||||
|
||||
console.warn(program);
|
||||
|
||||
const virtualConsole = new jsdom.VirtualConsole();
|
||||
// omitJSDOMErrors as JSDOM routinely can't parse modern CSS
|
||||
virtualConsole.sendTo(console, { omitJSDOMErrors: true });
|
||||
|
||||
@@ -19,12 +19,22 @@ d-appendix h3 {
|
||||
grid-column: page-start / text-start;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0;
|
||||
color: rgba(0,0,0,0.65);
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
d-appendix ol {
|
||||
margin-top: 15px;
|
||||
padding: 0 0 0 30px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
d-appendix li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
d-appendix a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
@@ -33,6 +43,12 @@ d-appendix > * {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
d-appendix > d-footnote-list,
|
||||
d-appendix > d-citation-list,
|
||||
d-appendix > distill-appendix {
|
||||
grid-column: screen;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
`, false);
|
||||
|
||||
@@ -14,9 +14,9 @@ export class Article extends HTMLElement {
|
||||
for (const mutation of mutations) {
|
||||
for (const addedNode of mutation.addedNodes) {
|
||||
switch (addedNode.nodeName) {
|
||||
case 'HR':
|
||||
console.warn('Use of <hr> tags in distill articles is discouraged as they interfere with layout! To separate sections, please just use h2 or h3 tags.');
|
||||
break;
|
||||
// case 'HR':
|
||||
// console.warn('Use of <hr> tags in distill articles is discouraged as they interfere with layout! To separate sections, please just use h2 or h3 tags.');
|
||||
// break;
|
||||
case '#text': { // usually text nodes are only linebreaks.
|
||||
const text = addedNode.nodeValue;
|
||||
if (!isOnlyWhitespace.test(text)) {
|
||||
|
||||
@@ -4,44 +4,31 @@ import { bibliography_cite } from '../helpers/citation';
|
||||
const T = Template('d-citation-list', `
|
||||
<style>
|
||||
|
||||
:host {
|
||||
d-citation-list {
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
.references {
|
||||
|
||||
d-citation-list .references {
|
||||
grid-column: text;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.title {
|
||||
|
||||
d-citation-list .references .title {
|
||||
font-weight: 600;
|
||||
}
|
||||
ol {
|
||||
padding: 0 0 0 18px;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0;
|
||||
color: rgba(0,0,0,0.65);
|
||||
line-height: 1em;
|
||||
}
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<h3>References</h3>
|
||||
<ol class='references' id='references-list' ></ol>
|
||||
`);
|
||||
<ol class='references' id='references-list'></ol>
|
||||
`, false);
|
||||
|
||||
export function renderCitationList(element, entries) {
|
||||
if (entries.size > 0) {
|
||||
element.host.style.display = 'initial';
|
||||
const list = element.querySelector('#references-list');
|
||||
element.style.display = '';
|
||||
const list = document.getElementById('references-list');
|
||||
list.innerHTML = '';
|
||||
|
||||
for (const [key, entry] of entries) {
|
||||
@@ -51,14 +38,16 @@ export function renderCitationList(element, entries) {
|
||||
list.appendChild(listItem);
|
||||
}
|
||||
} else {
|
||||
element.host.style.display = 'none';
|
||||
element.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
export class CitationList extends T(HTMLElement) {
|
||||
|
||||
connectedCallback() {
|
||||
this.root.host.style.display = 'none';
|
||||
super.connectedCallback();
|
||||
|
||||
this.root.style.display = 'none';
|
||||
}
|
||||
|
||||
set citations(citations) {
|
||||
|
||||
@@ -5,6 +5,10 @@ import { HoverBox } from '../helpers/hover-box';
|
||||
const T = Template('d-cite', `
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.citation {
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
}
|
||||
@@ -55,10 +59,7 @@ figcaption .citation-number {
|
||||
<div id="hover-box" class="dt-hover-box"></div>
|
||||
</div>
|
||||
|
||||
<span id="citation-" class="citation">
|
||||
<slot></slot>
|
||||
<span class="citation-number"></span>
|
||||
</span>
|
||||
<span id="citation-" class="citation"><slot></slot><span class="citation-number"></span></span>
|
||||
`);
|
||||
|
||||
export class Cite extends T(HTMLElement) {
|
||||
|
||||
@@ -2,50 +2,35 @@ import { Template } from '../mixins/template';
|
||||
|
||||
const T = Template('d-footnote-list', `
|
||||
<style>
|
||||
:host {
|
||||
|
||||
d-footnote-list {
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
d-footnote-list > * {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0 0 0 18px;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0;
|
||||
color: rgba(0,0,0,0.65);
|
||||
line-height: 1em;
|
||||
}
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
a.footnote-backlink {
|
||||
d-footnote-list a.footnote-backlink {
|
||||
color: rgba(0,0,0,0.3);
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<h3>Footnotes</h3>
|
||||
<ol></ol>
|
||||
`);
|
||||
`, false);
|
||||
|
||||
export class FootnoteList extends T(HTMLElement) {
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
this.list = this.root.querySelector('ol');
|
||||
// footnotes list is initially hidden
|
||||
this.root.host.style.display = 'none';
|
||||
this.root.style.display = 'none';
|
||||
// look through document and register existing footnotes
|
||||
// Store.subscribeTo('footnotes', (footnote) => {
|
||||
// this.renderFootnote(footnote);
|
||||
@@ -57,7 +42,7 @@ export class FootnoteList extends T(HTMLElement) {
|
||||
this.list.innerHTML = '';
|
||||
if (footnotes.length) {
|
||||
// ensure footnote list is visible
|
||||
this.root.host.style.display = 'initial';
|
||||
this.root.style.display = '';
|
||||
|
||||
for (const footnote of footnotes) {
|
||||
// construct and append list item to show footnote
|
||||
@@ -75,7 +60,7 @@ export class FootnoteList extends T(HTMLElement) {
|
||||
}
|
||||
} else {
|
||||
// ensure footnote list is invisible
|
||||
this.shadowRoot.host.style.display = 'none';
|
||||
this.root.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ span {
|
||||
|
||||
<div class="container">
|
||||
<div id="hover-box" class="dt-hover-box">
|
||||
<slot></slot>
|
||||
<slot id="slot"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,6 +77,7 @@ export class Footnote extends T(HTMLElement) {
|
||||
connectedCallback() {
|
||||
// listen and notify about changes to slotted content
|
||||
// const slot = this.shadowRoot.querySelector('#slot');
|
||||
// console.warn(slot.textContent);
|
||||
// slot.addEventListener('slotchange', this.notify);
|
||||
|
||||
// create numeric ID
|
||||
|
||||
@@ -4,22 +4,9 @@ const styles = `
|
||||
<style>
|
||||
distill-appendix {
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
distill-appendix h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0;
|
||||
color: rgba(0,0,0,0.65);
|
||||
line-height: 1em;
|
||||
}
|
||||
distill-appendix a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
distill-appendix ol,
|
||||
distill-appendix ul {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
distill-appendix .citation {
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
@@ -35,6 +22,10 @@ const styles = `
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
distill-appendix > * {
|
||||
grid-column: text;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
@@ -46,7 +37,7 @@ export function appendixTemplate(frontMatter) {
|
||||
<p><a href="">View all changes</a> to this article since it was first published. If you see mistakes or want to suggest changes, please <a href="${frontMatter.githubUrl + '/issues/new'}">create an issue on GitHub</a>. </p>
|
||||
|
||||
<h3 id="reuse">Reuse</h3>
|
||||
<p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a> with the <a class="github" href="${frontMatter.githubUrl}">source available on GitHub</a>, unless noted otherwise. The figures that have been reused from other sources don’t fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
|
||||
<p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> with the <a class="github" href="${frontMatter.githubUrl}">source available on GitHub</a>, unless noted otherwise. The figures that have been reused from other sources don’t fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
|
||||
|
||||
<h3 id="citation">Citation</h3>
|
||||
<p>For attribution in academic contexts, please cite this work as</p>
|
||||
|
||||
@@ -175,7 +175,6 @@ d-include {
|
||||
d-figure {
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* KaTeX */
|
||||
|
||||
@@ -69,14 +69,14 @@ figure svg text,
|
||||
figure svg tspan {
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
figcaption {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
figure figcaption {
|
||||
figcaption {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@@ -89,11 +89,11 @@ figure.external img {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
figure figcaption a {
|
||||
figcaption a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
figure figcaption b {
|
||||
figcaption b {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
|
||||
@@ -1,39 +1,48 @@
|
||||
@supports not (display: grid) {
|
||||
.base-grid,
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
distill-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
d-citation-list,
|
||||
distill-footer {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.base-grid,
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
distill-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
d-citation-list,
|
||||
distill-footer {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
grid-template-columns: [screen-start] 0.5fr [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 0.5fr [screen-end];
|
||||
grid-template-columns: [screen-start] 8px [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 8px [screen-end];
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.base-grid,
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
distill-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
d-citation-list,
|
||||
distill-footer {
|
||||
grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] 45px 45px 45px 45px 45px 45px 45px 45px [ kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end];
|
||||
grid-column-gap: 30px;
|
||||
@@ -41,13 +50,16 @@ distill-footer {
|
||||
}
|
||||
|
||||
@media(min-width: 1000px) {
|
||||
.base-grid,
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
distill-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
d-citation-list,
|
||||
distill-footer {
|
||||
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end];
|
||||
grid-column-gap: 30px;
|
||||
@@ -55,13 +67,16 @@ distill-footer {
|
||||
}
|
||||
|
||||
@media(min-width: 1280px) {
|
||||
.base-grid,
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
distill-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
d-citation-list,
|
||||
distill-footer {
|
||||
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];
|
||||
grid-column-gap: 30px;
|
||||
@@ -74,19 +89,10 @@ distill-footer {
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 30px;
|
||||
.base-grid {
|
||||
grid-column: screen;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* .l-body,
|
||||
d-article > * {
|
||||
grid-column: text;
|
||||
@@ -99,19 +105,19 @@ d-figure {
|
||||
} */
|
||||
|
||||
.l-body-outset {
|
||||
grid-column: left-outset / right-outset;
|
||||
grid-column: middle;
|
||||
}
|
||||
|
||||
.l-page-outset {
|
||||
grid-column: left-outset / right-outset;
|
||||
grid-column: page;
|
||||
}
|
||||
|
||||
.l-screen {
|
||||
grid-column: start / end;
|
||||
grid-column: screen;
|
||||
}
|
||||
|
||||
.l-screen-inset {
|
||||
grid-column: start / end;
|
||||
grid-column: screen;
|
||||
padding-left: 16px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user