mirror of
https://github.com/wassname/template.git
synced 2026-07-10 07:01:13 +08:00
v2 start
This commit is contained in:
Shan Carter
@@ -0,0 +1,17 @@
|
||||
import {Template} from "../mixins/template";
|
||||
|
||||
const T = Template("d-abstract", `
|
||||
<style>
|
||||
d-abstract {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
export default class Abstract extends T(HTMLElement) {
|
||||
static get is() { return "d-abstract"; }
|
||||
}
|
||||
|
||||
customElements.define(Abstract.is, Abstract);
|
||||
@@ -0,0 +1,235 @@
|
||||
import {Template} from "../mixins/template";
|
||||
|
||||
const T = Template("d-article", `
|
||||
<style>
|
||||
d-article {
|
||||
display: block;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
padding-top: 36px;
|
||||
padding-bottom: 72px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
min-height: calc(100vh - 70px - 182px);
|
||||
font-size: 20px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H2 */
|
||||
|
||||
d-article h2 {
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 1.25em;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h2 {
|
||||
margin-top: 48px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
d-article h1 + h2 {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 8px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media(min-width: 1080px) {
|
||||
.centered h1 + h2 {
|
||||
text-align: center;
|
||||
}
|
||||
d-article h1 + h2 {
|
||||
margin-top: 12px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H3 */
|
||||
|
||||
d-article h3 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 18px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
d-article h1 + h3 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h3 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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-bottom: 24px;
|
||||
}
|
||||
|
||||
d-article p b,
|
||||
d-article ul b,
|
||||
d-article ol b {
|
||||
-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-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article figure {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
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 .citation {
|
||||
color: #668;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
d-include {
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
export default class Article extends T(HTMLElement) {
|
||||
static get is() { return "d-article"; }
|
||||
}
|
||||
|
||||
customElements.define(Article.is, Article);
|
||||
@@ -0,0 +1,161 @@
|
||||
import mustache from "mustache";
|
||||
import {Template} from "../mixins/template";
|
||||
import {page} from "./layout";
|
||||
|
||||
const T = Template("d-byline", `
|
||||
<style>
|
||||
d-byline {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
background-color: grey;
|
||||
}
|
||||
${page("d-byline .byline")}
|
||||
d-article.centered d-byline {
|
||||
text-align: center;
|
||||
}
|
||||
d-byline a,
|
||||
d-article d-byline a {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
d-article d-byline a:hover {
|
||||
text-decoration: underline;
|
||||
border-bottom: none;
|
||||
}
|
||||
d-byline .authors {
|
||||
text-align: left;
|
||||
}
|
||||
d-byline .name {
|
||||
display: inline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
d-byline .affiliation {
|
||||
display: inline;
|
||||
}
|
||||
d-byline .date {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
d-byline .year, d-byline .month {
|
||||
display: inline;
|
||||
}
|
||||
d-byline .citation {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
d-byline .citation div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-byline {
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1080px) {
|
||||
d-byline {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-byline a:hover {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
d-byline .authors {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
d-byline .author {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
/*padding-left: 20px;*/
|
||||
/*border-left: 1px solid #ddd;*/
|
||||
}
|
||||
|
||||
d-byline .affiliation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-byline .author:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
d-byline .name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-byline .date {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-left: 15px;
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
d-byline .year, d-byline .month {
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-byline .citation {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.15);
|
||||
padding-left: 15px;
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
d-byline .citation div {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
const mustacheTemplate = `
|
||||
<div class="byline">
|
||||
<div class="authors">
|
||||
{{#authors}}
|
||||
<div class="author">
|
||||
{{#personalURL}}
|
||||
<a class="name" href="{{personalURL}}">{{name}}</a>
|
||||
{{/personalURL}}
|
||||
{{^personalURL}}
|
||||
<div class="name">{{name}}</div>
|
||||
{{/personalURL}}
|
||||
{{#affiliation}}
|
||||
{{#affiliationURL}}
|
||||
<a class="affiliation" href="{{affiliationURL}}">{{affiliation}}</a>
|
||||
{{/affiliationURL}}
|
||||
{{^affiliationURL}}
|
||||
<div class="affiliation">{{affiliation}}</div>
|
||||
{{/affiliationURL}}
|
||||
{{/affiliation}}
|
||||
</div>
|
||||
{{/authors}}
|
||||
</div>
|
||||
<div class="date">
|
||||
<div class="month">{{publishedMonth}}. {{publishedDay}}</div>
|
||||
<div class="year">{{publishedYear}}</div>
|
||||
</div>
|
||||
<a class="citation" href="#citation">
|
||||
<div>Citation:</div>
|
||||
<div>{{concatenatedAuthors}}, {{publishedYear}}</div>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class Byline extends T(HTMLElement) {
|
||||
static get is() {
|
||||
return "d-byline";
|
||||
}
|
||||
render(data) {
|
||||
this.innerHTML = mustache.render(mustacheTemplate, data);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(Byline.is, Byline);
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import ymlParse from "js-yaml";
|
||||
|
||||
export default class FrontMatter extends HTMLElement {
|
||||
static get is() { return "d-front-matter"; }
|
||||
constructor() {
|
||||
super();
|
||||
this.data = {};
|
||||
}
|
||||
connectedCallback() {
|
||||
let el = this.querySelector("script");
|
||||
if (el) {
|
||||
let text = el.textContent;
|
||||
this.parse(ymlParse.safeLoad(text));
|
||||
}
|
||||
}
|
||||
parse(localData) {
|
||||
this.data.title = localData.title ? localData.title : "Untitled";
|
||||
this.data.description = localData.description ? localData.description : "No description.";
|
||||
|
||||
this.data.authors = localData.authors ? localData.authors : [];
|
||||
|
||||
this.data.authors = this.data.authors.map((author, i) =>{
|
||||
let a = {};
|
||||
let name = Object.keys(author)[0];
|
||||
if ((typeof author) === "string") {
|
||||
name = author;
|
||||
} else {
|
||||
a.personalURL = author[name];
|
||||
}
|
||||
let names = name.split(" ");
|
||||
a.name = name;
|
||||
a.firstName = names.slice(0, names.length - 1).join(" ");
|
||||
a.lastName = names[names.length -1];
|
||||
if(localData.affiliations[i]) {
|
||||
let affiliation = Object.keys(localData.affiliations[i])[0];
|
||||
if ((typeof localData.affiliations[i]) === "string") {
|
||||
affiliation = localData.affiliations[i]
|
||||
} else {
|
||||
a.affiliationURL = localData.affiliations[i][affiliation];
|
||||
}
|
||||
a.affiliation = affiliation;
|
||||
}
|
||||
return a;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(FrontMatter.is, FrontMatter);
|
||||
@@ -0,0 +1,36 @@
|
||||
import {Template} from "../mixins/template";
|
||||
import {body} from "./layout";
|
||||
|
||||
const T = Template("d-title", `
|
||||
<style>
|
||||
d-title {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: hsl(200, 0%, 95%);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
d-title h1 {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 36px;
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
font-size: 60px;
|
||||
font-weight: 400;
|
||||
}
|
||||
${body("d-title h1")}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
export default class Title extends T(HTMLElement) {
|
||||
static get is() { return "d-title"; }
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.byline = document.createElement("d-byline");
|
||||
let frontMatter = document.querySelector("d-front-matter");
|
||||
this.byline.render(frontMatter.data);
|
||||
this.appendChild(this.byline);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(Title.is, Title);
|
||||
@@ -0,0 +1,17 @@
|
||||
import {Template} from "../mixins/template";
|
||||
|
||||
const T = Template("d-toc", `
|
||||
<style>
|
||||
d-toc {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
export default class Toc extends T(HTMLElement) {
|
||||
static get is() {
|
||||
return "d-toc";
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(Toc.is, Toc);
|
||||
@@ -1,91 +0,0 @@
|
||||
import {Template} from './mixins/template';
|
||||
|
||||
// import logo from "./distill-logo.svg";
|
||||
var logo = "";
|
||||
|
||||
const T = Template('dt-header', `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
background-color: hsl(200, 60%, 15%);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.content {
|
||||
height: 70px;
|
||||
}
|
||||
a {
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 22px 0;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@media(min-width: 1080px) {
|
||||
:host {
|
||||
height: 70px;
|
||||
}
|
||||
a {
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
padding: 28px 0;
|
||||
}
|
||||
.logo {
|
||||
}
|
||||
}
|
||||
svg path {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
.logo {
|
||||
font-size: 17px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.nav {
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
}
|
||||
.nav a {
|
||||
font-size: 12px;
|
||||
margin-left: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="content l-page">
|
||||
<a href="/" class="logo">
|
||||
${logo}
|
||||
Distill
|
||||
</a>
|
||||
<div class="nav">
|
||||
<a href="/faq">About</a>
|
||||
<a href="https://github.com/distillpub">GitHub</a>
|
||||
<!-- https://twitter.com/distillpub -->
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
export default class DTHeader extends T(HTMLElement) {
|
||||
static get is() {
|
||||
return 'dt-header';
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(DTHeader.is, DTHeader);
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
export function body(selector) {
|
||||
return `${selector} {
|
||||
width: auto;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media(min-width: 768px) {
|
||||
${selector} {
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1080px) {
|
||||
${selector} {
|
||||
margin-left: calc(50% - 984px / 2);
|
||||
width: 648px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
export function page(selector) {
|
||||
return `${selector} {
|
||||
width: auto;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media(min-width: 768px) {
|
||||
${selector} {
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1080px) {
|
||||
${selector} {
|
||||
width: 984px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
export function screen(selector) {
|
||||
return `${selector} {
|
||||
width: auto;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media(min-width: 768px) {
|
||||
${selector} {
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1080px) {
|
||||
${selector} {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
export function propName(attr) {
|
||||
return attr.replace(/(\-[a-z])/g, (s) => s.toUpperCase().replace('-', ''));
|
||||
}
|
||||
|
||||
export function attrName(prop) {
|
||||
return prop.replace(/([A-Z])/g, (s) => '-' + s.toLowerCase());
|
||||
}
|
||||
|
||||
export function deserializeAttribute(value, type) {
|
||||
switch (type) {
|
||||
case String:
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {
|
||||
}
|
||||
break;
|
||||
case Boolean:
|
||||
value = value != 'false' && value != '0' && value;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
const immediately = window.setImmediate || function(fn, args) {
|
||||
window.setTimeout(function() {
|
||||
fn.apply(this, args);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
export const Properties = (properties) => {
|
||||
const keys = Object.keys(properties);
|
||||
const attrs = keys.map((k) => attrName(k));
|
||||
return (superclass) => {
|
||||
const cls = class extends superclass {
|
||||
static get observedAttributes() {
|
||||
return attrs;
|
||||
}
|
||||
attributeChangedCallback(attr, oldValue, newValue) {
|
||||
const prop = propName(attr);
|
||||
const value = deserializeAttribute(newValue, properties[prop].type);
|
||||
this[prop] = value;
|
||||
}
|
||||
_propertiesChanged() {
|
||||
if (!this.propertiesChangedCallback) {
|
||||
return;
|
||||
}
|
||||
clearTimeout(this._propertiesChangedTimeout);
|
||||
this._propertiesChangedTimeout = immediately(() => {
|
||||
this.propertiesChangedCallback(this);
|
||||
});
|
||||
}
|
||||
}
|
||||
keys.forEach(function(k) {
|
||||
const secret = `_${k}`;
|
||||
const callback = `${k}Changed`;
|
||||
const defaultValue = properties[k].value;
|
||||
Object.defineProperty(cls.prototype, k, {
|
||||
get: function() {
|
||||
let value = this[secret];
|
||||
if (value) {
|
||||
return value;
|
||||
}
|
||||
if (defaultValue && typeof defaultValue == 'function') {
|
||||
this[secret] = defaultValue();
|
||||
} else {
|
||||
this[secret] = defaultValue;
|
||||
}
|
||||
return this[secret];
|
||||
},
|
||||
set: function(value) {
|
||||
const oldValue = this[secret];
|
||||
this[secret] = value;
|
||||
if (this[callback]) {
|
||||
this[callback](value, oldValue);
|
||||
}
|
||||
this._propertiesChanged();
|
||||
}
|
||||
});
|
||||
});
|
||||
return cls;
|
||||
};
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
// import '@webcomponents/shadycss/scoping-shim';
|
||||
|
||||
export const Template = (name, templateString, useShadow = true) => {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = templateString;
|
||||
// ShadyCSS.prepareTemplate(template, name);
|
||||
|
||||
return (superclass) => {
|
||||
return class extends superclass {
|
||||
constructor() {
|
||||
super();
|
||||
const clone = document.importNode(template.content, true);
|
||||
if (useShadow) {
|
||||
// ShadyCSS.applyStyle(this);
|
||||
this.shadow_ = this.attachShadow({mode: 'open'});
|
||||
this.shadow_.appendChild(clone);
|
||||
} else {
|
||||
this.appendChild(clone);
|
||||
}
|
||||
}
|
||||
get root() {
|
||||
if (useShadow) {
|
||||
return this.shadow_;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
$(query) {
|
||||
return this.root.querySelector(query);
|
||||
}
|
||||
$$(query) {
|
||||
return this.root.querySelectorAll(query);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
html {
|
||||
font-size: 20px;
|
||||
line-height: 1rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/*background-color: hsl(223, 9%, 25%);*/
|
||||
}
|
||||
|
||||
a {
|
||||
color: #004276;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}*/
|
||||
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code {
|
||||
white-space: nowrap;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border-radius: 2px;
|
||||
padding: 4px 7px;
|
||||
font-size: 15px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
background: white;
|
||||
border-left: 3px solid rgba(0, 0, 0, 0.05);
|
||||
padding: 0 0 0 24px;
|
||||
}
|
||||
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
/*
|
||||
Column: 60px
|
||||
Gutter: 24px
|
||||
|
||||
Body: 648px
|
||||
- 8 columns
|
||||
- 7 gutters
|
||||
Middle: 816px
|
||||
Page: 984px
|
||||
- 12 columns
|
||||
- 11 gutters
|
||||
*/
|
||||
|
||||
.l-body,
|
||||
.l-body-outset,
|
||||
.l-page,
|
||||
.l-page-outset,
|
||||
.l-middle,
|
||||
.l-middle-outset,
|
||||
d-article > div,
|
||||
d-article > p,
|
||||
d-article > h1,
|
||||
d-article > h2,
|
||||
d-article > h3,
|
||||
d-article > h4,
|
||||
d-article > figure,
|
||||
d-article > ul,
|
||||
d-article > d-abstract,
|
||||
d-article > d-code,
|
||||
d-article section > div,
|
||||
d-article section > p,
|
||||
d-article section > h1,
|
||||
d-article section > h2,
|
||||
d-article section > h3,
|
||||
d-article section > h4,
|
||||
d-article section > figure,
|
||||
d-article section > ul,
|
||||
d-article section > d-abstract,
|
||||
d-article section > d-code {
|
||||
width: auto;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.l-body,
|
||||
.l-body-outset,
|
||||
.l-page,
|
||||
.l-page-outset,
|
||||
.l-middle,
|
||||
.l-middle-outset,
|
||||
d-article > div,
|
||||
d-article > p,
|
||||
d-article > h1,
|
||||
d-article > h2,
|
||||
d-article > h3,
|
||||
d-article > h4,
|
||||
d-article > figure,
|
||||
d-article > ul,
|
||||
d-article > d-abstract,
|
||||
d-article > d-code,
|
||||
d-article section > div,
|
||||
d-article section > p,
|
||||
d-article section > h1,
|
||||
d-article section > h2,
|
||||
d-article section > h3,
|
||||
d-article section > h4,
|
||||
d-article section > figure,
|
||||
d-article section > ul,
|
||||
d-article section > d-abstract,
|
||||
d-article section > d-code {
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1080px) {
|
||||
.l-body,
|
||||
d-article > div,
|
||||
d-article > p,
|
||||
d-article > h2,
|
||||
d-article > h3,
|
||||
d-article > h4,
|
||||
d-article > figure,
|
||||
d-article > ul,
|
||||
d-article > d-abstract,
|
||||
d-article > d-code,
|
||||
d-article section > div,
|
||||
d-article section > p,
|
||||
d-article section > h2,
|
||||
d-article section > h3,
|
||||
d-article section > h4,
|
||||
d-article section > figure,
|
||||
d-article section > ul,
|
||||
d-article section > d-abstract,
|
||||
d-article section > d-code {
|
||||
margin-left: calc(50% - 984px / 2);
|
||||
width: 648px;
|
||||
}
|
||||
.l-body-outset,
|
||||
d-article .l-body-outset {
|
||||
margin-left: calc(50% - 984px / 2 - 96px/2);
|
||||
width: calc(648px + 96px);
|
||||
}
|
||||
.l-middle,
|
||||
d-article .l-middle {
|
||||
width: 816px;
|
||||
margin-left: calc(50% - 984px / 2);
|
||||
margin-right: auto;
|
||||
}
|
||||
.l-middle-outset,
|
||||
d-article .l-middle-outset {
|
||||
width: calc(816px + 96px);
|
||||
margin-left: calc(50% - 984px / 2 - 48px);
|
||||
margin-right: auto;
|
||||
}
|
||||
d-article > h1,
|
||||
d-article section > h1,
|
||||
.l-page,
|
||||
d-article .l-page,
|
||||
d-article.centered .l-page {
|
||||
width: 984px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.l-page-outset,
|
||||
d-article .l-page-outset,
|
||||
d-article.centered .l-page-outset {
|
||||
width: 1080px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.l-screen,
|
||||
d-article .l-screen,
|
||||
d-article.centered .l-screen {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
}
|
||||
.l-screen-inset,
|
||||
d-article .l-screen-inset,
|
||||
d-article.centered .l-screen-inset {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
width: auto;
|
||||
}
|
||||
.l-gutter,
|
||||
d-article .l-gutter {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 24px;
|
||||
margin-right: calc((100vw - 984px) / 2 + 168px);
|
||||
width: calc((984px - 648px) / 2 - 24px);
|
||||
}
|
||||
|
||||
/* Side */
|
||||
.side.l-body,
|
||||
d-article .side.l-body {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 48px;
|
||||
margin-right: calc((100vw - 984px + 648px) / 2);
|
||||
width: calc(648px / 2 - 24px - 84px);
|
||||
}
|
||||
.side.l-body-outset,
|
||||
d-article .side.l-body-outset {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 48px;
|
||||
margin-right: calc((100vw - 984px + 648px - 48px) / 2);
|
||||
width: calc(648px / 2 - 48px + 24px);
|
||||
}
|
||||
.side.l-middle,
|
||||
d-article .side.l-middle {
|
||||
clear: both;
|
||||
float: right;
|
||||
width: calc(456px - 84px);
|
||||
margin-left: 48px;
|
||||
margin-right: calc((100vw - 984px) / 2 + 168px);
|
||||
}
|
||||
.side.l-middle-outset,
|
||||
d-article .side.l-middle-outset {
|
||||
clear: both;
|
||||
float: right;
|
||||
width: 456px;
|
||||
margin-left: 48px;
|
||||
margin-right: calc((100vw - 984px) / 2 + 168px);
|
||||
}
|
||||
.side.l-page,
|
||||
d-article .side.l-page {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-left: 48px;
|
||||
width: calc(624px - 84px);
|
||||
margin-right: calc((100vw - 984px) / 2);
|
||||
}
|
||||
.side.l-page-outset,
|
||||
d-article .side.l-page-outset {
|
||||
clear: both;
|
||||
float: right;
|
||||
width: 624px;
|
||||
margin-right: calc((100vw - 984px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
size: 8in 11in;
|
||||
}
|
||||
html {
|
||||
}
|
||||
p, code {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
h2, h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
d-header {
|
||||
visibility: hidden;
|
||||
}
|
||||
d-footer {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import base from "./styles-base.css";
|
||||
import layout from "./styles-layout.css";
|
||||
import article from "./styles-article.css";
|
||||
import code from "./styles-code.css";
|
||||
import print from "./styles-print.css";
|
||||
|
||||
let s = document.createElement("style");
|
||||
s.textContent = base + layout + code + print;
|
||||
document.querySelector("head").appendChild(s);
|
||||
export default s;
|
||||
Reference in New Issue
Block a user