wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-08-13 12:40:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Footnote tweaks

Browse Source
This commit is contained in:
Shan Carter
2017-01-13 16:13:21 -08:00
parent b914701d2b
commit 02a6b5f1f1
6 changed files with 45 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/citation.js
+30 -1
View File
@@ -1,4 +1,33 @@
export default function(dom, data) {
let css = `
dt-cite {
color: hsla(206, 90%, 20%, 0.7);
}
dt-cite .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 dt-cite .citation-number {
font-size: 11px;
font-weight: normal;
top: -2px;
line-height: 1em;
}
`;
let style = dom.createElement("style");
style.textContent = css;
dom.querySelector("body").appendChild(style);
let citations = data.citations;
/*if (data.citations) {
citations = Object.keys(data.citations).map(c => data.citations[c]);
@@ -21,7 +50,7 @@ export default function(dom, data) {
cite_hover_str = cite_hover_str.replace(/"/g, "'")
var orig_string = el.innerHTML;
if (orig_string != "") orig_string += " ";
el.innerHTML = `<span id="citation-${n}" data-hover="${cite_hover_str}">${orig_string}${cite_string}</span>`;
el.innerHTML = `<span id="citation-${n}" data-hover="${cite_hover_str}">${orig_string}<span class="citation-number">${cite_string}</span></span>`;
}
});
components/header.js
+1
View File
@@ -50,6 +50,7 @@ dt-header .logo {
font-size: 13px;
font-weight: 300;
text-transform: uppercase;
padding: 28px 0;
}
dt-header .nav {
float: right;
components/hover-box.txt
+2 -1
View File
@@ -27,8 +27,9 @@ function DistillHoverBox(key, pos){
var str = `<div style="position: absolute;
background-color: #FFF;
white-s
opacity: 0.95;
width: ${width}px;
max-width: ${width}px;
top: ${top}px;
left: ${left}px;
padding: ${padding}px;
components/styles-base.css
+1 -1
View File
@@ -1,5 +1,5 @@
html {
font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
background-color: hsl(223, 9%, 25%);
}
dist/template.js
Vendored
+10 -4
View File
@@ -24,7 +24,7 @@ var html = function(dom) {
}
};
var base = "html {\n font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, \"Roboto\", sans-serif;\n background-color: hsl(223, 9%, 25%);\n}\n\nhtml {\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n}\nbody {\n margin: 0;\n background: white;\n}\n\na {\n color: #004276;\n}\n\nfigure {\n margin: 0;\n}\n\nh1 {\n font-family: Cochin, Georgia, serif;\n}\n\n/*\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n\tline-height: 1;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}*/\n";
var base = "html {\n font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, \"Roboto\", Helvetica, sans-serif;\n background-color: hsl(223, 9%, 25%);\n}\n\nhtml {\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n}\nbody {\n margin: 0;\n background: white;\n}\n\na {\n color: #004276;\n}\n\nfigure {\n margin: 0;\n}\n\nh1 {\n font-family: Cochin, Georgia, serif;\n}\n\n/*\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n\tline-height: 1;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}*/\n";
var layout = "/*\n Column: 60px\n Gutter: 24px\n\n Body: 648px\n - 8 columns\n - 7 gutters\n Middle: 816px\n Page: 984px\n - 12 columns\n - 11 gutters\n*/\n\n.l-body,\n.l-body-outset,\n.l-page,\n.l-page-outset,\n.l-middle,\n.l-middle-outset,\ndt-article > div,\ndt-article > p,\ndt-article > h1,\ndt-article > h2,\ndt-article > h3,\ndt-article > h4,\ndt-article > figure,\ndt-article > ul,\ndt-article > dt-byline {\n width: auto;\n margin-left: 24px;\n margin-right: 24px;\n box-sizing: border-box;\n}\n\n@media(min-width: 768px) {\n .l-body,\n .l-body-outset,\n .l-page,\n .l-page-outset,\n .l-middle,\n .l-middle-outset,\n dt-article > div,\n dt-article > p,\n dt-article > h1,\n dt-article > h2,\n dt-article > h3,\n dt-article > h4,\n dt-article > figure,\n dt-article > ul,\n dt-article > dt-byline {\n margin-left: 72px;\n margin-right: 72px;\n }\n}\n\n@media(min-width: 1080px) {\n .l-body,\n dt-article > div,\n dt-article > p,\n dt-article > h1,\n dt-article > h2,\n dt-article > h3,\n dt-article > h4,\n dt-article > figure,\n dt-article > ul,\n dt-article > dt-byline {\n margin-left: calc(50% - 984px / 2);\n width: 648px;\n }\n .l-body-outset,\n dt-article .l-body-outset {\n margin-left: calc(50% - 984px / 2 - 96px/2);\n width: calc(648px + 96px);\n }\n .l-middle,\n dt-article .l-middle {\n width: 816px;\n margin-left: calc(50% - 984px / 2);\n margin-right: auto;\n }\n .l-page,\n dt-article .l-page,\n dt-article.centered .l-page {\n width: 984px;\n margin-left: auto;\n margin-right: auto;\n }\n .l-page-outset,\n dt-article .l-page-outset,\n dt-article.centered .l-page-outset {\n width: 1080px;\n margin-left: auto;\n margin-right: auto;\n }\n .l-screen,\n dt-article .l-screen,\n dt-article.centered .l-screen {\n margin-left: auto;\n margin-right: auto;\n width: auto;\n }\n .l-screen-inset,\n dt-article .l-screen-inset,\n dt-article.centered .l-screen-inset {\n margin-left: 24px;\n margin-right: 24px;\n width: auto;\n }\n .l-gutter,\n dt-article .l-gutter {\n clear: both;\n float: right;\n margin-top: 0;\n margin-left: 24px;\n margin-right: calc((100vw - 984px) / 2);\n width: calc((984px - 648px) - 24px);\n }\n /* Side */\n .side.l-body,\n dt-article .side.l-body {\n clear: both;\n float: right;\n margin-top: 0;\n margin-left: 48px;\n margin-right: calc((100vw - 984px + 648px) / 2);\n width: calc(648px / 2 - 24px);\n }\n .side.l-body-outset,\n dt-article .side.l-body-outset {\n clear: both;\n float: right;\n margin-top: 0;\n margin-left: 48px;\n margin-right: calc((100vw - 984px + 648px - 48px) / 2);\n width: calc(648px / 2 - 48px + 24px);\n }\n\n /* Centered */\n\n .centered .l-body,\n .centered.l-body,\n dt-article.centered > div,\n dt-article.centered > p,\n dt-article.centered > h1,\n dt-article.centered > h2,\n dt-article.centered > h3,\n dt-article.centered > h4,\n dt-article.centered > figure,\n dt-article.centered > ul,\n dt-article.centered > dt-byline {\n margin-left: auto;\n margin-right: auto;\n width: 648px;\n }\n .centered .l-body-outset,\n .centered.l-body-outset,\n dt-article.centered .l-body-outset {\n margin-left: auto;\n margin-right: auto;\n width: calc(648px + 96px);\n }\n .centered .l-middle,\n .centered.l-middle,\n dt-article.centered .l-middle {\n width: 816px;\n margin-left: auto;\n margin-right: auto;\n }\n\n /* page and screen are already centered */\n\n .centered .l-gutter,\n .centered.l-gutter,\n dt-article.centered .l-gutter {\n clear: both;\n float: right;\n margin-top: 0;\n margin-left: 24px;\n margin-right: calc((100vw - 984px) / 2);\n width: calc((984px - 648px) / 2 - 24px);\n }\n /* Side */\n .centered .side.l-body,\n .centered.side.l-body,\n dt-article.centered .side.l-body {\n clear: both;\n float: right;\n margin-top: 0;\n margin-left: 48px;\n margin-right: calc((100vw - 984px) / 2);\n width: 396px;\n }\n}\n";
@@ -5221,7 +5221,7 @@ function citation_meta_content(ref){
var logo = "<svg viewBox=\"-607 419 64 64\">\n <path d=\"M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z\"/>\n</svg>\n";
var html$1 = "\n<style>\ndt-header {\n display: block;\n position: relative;\n height: 60px;\n background-color: hsl(223, 9%, 25%);\n width: 100%;\n box-sizing: border-box;\n z-index: 2;\n color: rgba(0, 0, 0, 0.8);\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);\n}\ndt-header .content {\n height: 70px;\n}\ndt-header a {\n font-size: 16px;\n height: 60px;\n line-height: 60px;\n text-decoration: none;\n color: rgba(255, 255, 255, 0.8);\n}\ndt-header svg {\n width: 24px;\n position: relative;\n top: 4px;\n margin-right: 2px;\n}\n\n@media(min-width: 1080px) {\n dt-header {\n height: 70px;\n }\n dt-header a {\n height: 70px;\n line-height: 70px;\n }\n}\n\ndt-header svg path {\n fill: none;\n stroke: rgba(255, 255, 255, 0.8);\n stroke-width: 3px;\n}\ndt-header .logo {\n font-size: 13px;\n font-weight: 300;\n text-transform: uppercase;\n}\ndt-header .nav {\n float: right;\n font-weight: 300;\n}\ndt-header .nav a {\n font-size: 14px;\n}\n</style>\n\n<div class=\"content l-page\">\n <a href=\"/\" class=\"logo\">\n " + logo + "\n Distill\n </a>\n <div class=\"nav\">\n <a href=\"/faq\">About</a>\n <!-- https://twitter.com/distillpub -->\n </div>\n</div>\n";
var html$1 = "\n<style>\ndt-header {\n display: block;\n position: relative;\n height: 60px;\n background-color: hsl(223, 9%, 25%);\n width: 100%;\n box-sizing: border-box;\n z-index: 2;\n color: rgba(0, 0, 0, 0.8);\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);\n}\ndt-header .content {\n height: 70px;\n}\ndt-header a {\n font-size: 16px;\n height: 60px;\n line-height: 60px;\n text-decoration: none;\n color: rgba(255, 255, 255, 0.8);\n}\ndt-header svg {\n width: 24px;\n position: relative;\n top: 4px;\n margin-right: 2px;\n}\n\n@media(min-width: 1080px) {\n dt-header {\n height: 70px;\n }\n dt-header a {\n height: 70px;\n line-height: 70px;\n }\n}\n\ndt-header svg path {\n fill: none;\n stroke: rgba(255, 255, 255, 0.8);\n stroke-width: 3px;\n}\ndt-header .logo {\n font-size: 13px;\n font-weight: 300;\n text-transform: uppercase;\n padding: 28px 0;\n}\ndt-header .nav {\n float: right;\n font-weight: 300;\n}\ndt-header .nav a {\n font-size: 14px;\n}\n</style>\n\n<div class=\"content l-page\">\n <a href=\"/\" class=\"logo\">\n " + logo + "\n Distill\n </a>\n <div class=\"nav\">\n <a href=\"/faq\">About</a>\n <!-- https://twitter.com/distillpub -->\n </div>\n</div>\n";
var header = function(dom, data) {
var el = dom.querySelector("dt-header");
@@ -5929,6 +5929,12 @@ var footer = function(dom, data) {
};
var citation = function(dom, data) {
var css = "\n dt-cite {\n color: hsla(206, 90%, 20%, 0.7);\n }\n dt-cite .citation-number {\n cursor: default;\n white-space: nowrap;\n font-family: -apple-system, BlinkMacSystemFont, \"Roboto\", Helvetica, sans-serif;\n font-size: 75%;\n color: hsla(206, 90%, 20%, 0.7);\n display: inline-block;\n line-height: 1.1em;\n text-align: center;\n position: relative;\n top: -2px;\n margin: 0 2px;\n }\n figcaption dt-cite .citation-number {\n font-size: 11px;\n font-weight: normal;\n top: -2px;\n line-height: 1em;\n }\n ";
var style = dom.createElement("style");
style.textContent = css;
dom.querySelector("body").appendChild(style);
var citations = data.citations;
/*if (data.citations) {
citations = Object.keys(data.citations).map(c => data.citations[c]);
@@ -5951,7 +5957,7 @@ var citation = function(dom, data) {
cite_hover_str = cite_hover_str.replace(/"/g, "&#39;");
var orig_string = el.innerHTML;
if (orig_string != "") { orig_string += " "; }
el.innerHTML = "<span id=\"citation-" + n + "\" data-hover=\"" + cite_hover_str + "\">" + orig_string + cite_string + "</span>";
el.innerHTML = "<span id=\"citation-" + n + "\" data-hover=\"" + cite_hover_str + "\">" + orig_string + "<span class=\"citation-number\">" + cite_string + "</span></span>";
}
});
@@ -8288,7 +8294,7 @@ var code$1 = function(dom, data) {
});
};
var code$2 = "// DistillHoverBox\n//=====================================\n\nfunction DistillHoverBox(key, pos){\n\n if (!(key in DistillHoverBox.contentMap)){\n console.error(\"No DistillHoverBox content registered for key\", key);\n }\n if (key in DistillHoverBox.liveBoxes) {\n console.error(\"There already exists a DistillHoverBox for key\", key);\n } else {\n for (var k in DistillHoverBox.liveBoxes)\n DistillHoverBox.liveBoxes[k].remove();\n DistillHoverBox.liveBoxes[key] = this;\n }\n this.key = key;\n\n var pretty = window.innerWidth > 600;\n\n var padding = pretty? 18 : 12;\n var outer_padding = pretty ? 18 : 0;\n var bbox = document.querySelector(\"body\").getBoundingClientRect();\n var left = pos[0] - bbox.left, top = pos[1] - bbox.top;\n var width = Math.min(window.innerWidth-2*outer_padding, 648);\n left = Math.min(left, window.innerWidth-width-outer_padding);\n width = width - 2*padding;\n\n var str = `<div style=\"position: absolute;\n background-color: #FFF;\n opacity: 0.95;\n width: ${width}px;\n top: ${top}px;\n left: ${left}px;\n padding: ${padding}px;\n border-radius: ${pretty? 3 : 0}px;\n box-shadow: 0px 0px 18px 3px #777;\n z-index: ${1e6}\" >\n ${DistillHoverBox.contentMap[key]}\n </div>`;\n\n this.div = appendBody(str);\n\n DistillHoverBox.bind (this.div, key);\n}\n\nDistillHoverBox.prototype.remove = function remove(){\n if (this.div) this.div.remove();\n if (this.timeout) clearTimeout(this.timeout);\n delete DistillHoverBox.liveBoxes[this.key];\n}\n\nDistillHoverBox.prototype.stopTimeout = function stopTimeout() {\n if (this.timeout) clearTimeout(this.timeout);\n}\n\nDistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {\n //console.log(\"extend\", T)\n var this_ = this;\n this.stopTimeout();\n this.timeout = setTimeout(() => this_.remove(), T);\n}\n\nDistillHoverBox.liveBoxes = {};\nDistillHoverBox.contentMap = {};\n\nDistillHoverBox.bind = function bind(node, key) {\n if (typeof node == \"string\"){\n node = document.querySelector(node);\n }\n node.addEventListener(\"mouseover\", () => {\n var bbox = node.getBoundingClientRect();\n if (!(key in DistillHoverBox.liveBoxes)){\n new DistillHoverBox(key, [bbox.right, bbox.bottom]);\n }\n DistillHoverBox.liveBoxes[key].stopTimeout();\n });\n node.addEventListener(\"mouseout\", () => {\n if (key in DistillHoverBox.liveBoxes){\n DistillHoverBox.liveBoxes[key].extendTimeout(250);\n }\n });\n\n}\n\n\nfunction appendBody(str){\n var node = nodeFromString(str);\n var body = document.querySelector(\"body\");\n body.appendChild(node);\n return node;\n}\n\nfunction nodeFromString(str) {\n var div = document.createElement(\"div\");\n div.innerHTML = str;\n return div.firstChild;\n}\n\nvar hover_es = document.querySelectorAll(\"span[data-hover]\");\nhover_es = [].slice.apply(hover_es);\nhover_es.forEach((e,n) => {\n var key = \"hover-\"+n;\n var content = e.getAttribute(\"data-hover\");\n DistillHoverBox.contentMap[key] = content;\n DistillHoverBox.bind(e, key);\n});\n";
var code$2 = "// DistillHoverBox\n//=====================================\n\nfunction DistillHoverBox(key, pos){\n\n if (!(key in DistillHoverBox.contentMap)){\n console.error(\"No DistillHoverBox content registered for key\", key);\n }\n if (key in DistillHoverBox.liveBoxes) {\n console.error(\"There already exists a DistillHoverBox for key\", key);\n } else {\n for (var k in DistillHoverBox.liveBoxes)\n DistillHoverBox.liveBoxes[k].remove();\n DistillHoverBox.liveBoxes[key] = this;\n }\n this.key = key;\n\n var pretty = window.innerWidth > 600;\n\n var padding = pretty? 18 : 12;\n var outer_padding = pretty ? 18 : 0;\n var bbox = document.querySelector(\"body\").getBoundingClientRect();\n var left = pos[0] - bbox.left, top = pos[1] - bbox.top;\n var width = Math.min(window.innerWidth-2*outer_padding, 648);\n left = Math.min(left, window.innerWidth-width-outer_padding);\n width = width - 2*padding;\n\n var str = `<div style=\"position: absolute;\n background-color: #FFF;\n white-s\n opacity: 0.95;\n max-width: ${width}px;\n top: ${top}px;\n left: ${left}px;\n padding: ${padding}px;\n border-radius: ${pretty? 3 : 0}px;\n box-shadow: 0px 0px 18px 3px #777;\n z-index: ${1e6}\" >\n ${DistillHoverBox.contentMap[key]}\n </div>`;\n\n this.div = appendBody(str);\n\n DistillHoverBox.bind (this.div, key);\n}\n\nDistillHoverBox.prototype.remove = function remove(){\n if (this.div) this.div.remove();\n if (this.timeout) clearTimeout(this.timeout);\n delete DistillHoverBox.liveBoxes[this.key];\n}\n\nDistillHoverBox.prototype.stopTimeout = function stopTimeout() {\n if (this.timeout) clearTimeout(this.timeout);\n}\n\nDistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {\n //console.log(\"extend\", T)\n var this_ = this;\n this.stopTimeout();\n this.timeout = setTimeout(() => this_.remove(), T);\n}\n\nDistillHoverBox.liveBoxes = {};\nDistillHoverBox.contentMap = {};\n\nDistillHoverBox.bind = function bind(node, key) {\n if (typeof node == \"string\"){\n node = document.querySelector(node);\n }\n node.addEventListener(\"mouseover\", () => {\n var bbox = node.getBoundingClientRect();\n if (!(key in DistillHoverBox.liveBoxes)){\n new DistillHoverBox(key, [bbox.right, bbox.bottom]);\n }\n DistillHoverBox.liveBoxes[key].stopTimeout();\n });\n node.addEventListener(\"mouseout\", () => {\n if (key in DistillHoverBox.liveBoxes){\n DistillHoverBox.liveBoxes[key].extendTimeout(250);\n }\n });\n\n}\n\n\nfunction appendBody(str){\n var node = nodeFromString(str);\n var body = document.querySelector(\"body\");\n body.appendChild(node);\n return node;\n}\n\nfunction nodeFromString(str) {\n var div = document.createElement(\"div\");\n div.innerHTML = str;\n return div.firstChild;\n}\n\nvar hover_es = document.querySelectorAll(\"span[data-hover]\");\nhover_es = [].slice.apply(hover_es);\nhover_es.forEach((e,n) => {\n var key = \"hover-\"+n;\n var content = e.getAttribute(\"data-hover\");\n DistillHoverBox.contentMap[key] = content;\n DistillHoverBox.bind(e, key);\n});\n";
var hoverBox = function(dom) {
var s = dom.createElement("script");
dist/template.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long