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

Centered side layouts

Browse Source
This commit is contained in:
Shan Carter committed 2017-01-19 14:40:40 -08:00
1 parent a411a2a3ed
commit 50b73d8e35
4 files changed
+73 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/styles-code.css
+1 -1
View File
@@ -5,7 +5,7 @@
*/
code {
white-space:pre-wrap;
white-space: nowrap;
background: rgba(0, 0, 0, 0.04);
border-radius: 2px;
padding: 4px 7px;
components/styles-layout.css
+56 -11
View File
@@ -118,6 +118,7 @@ dt-article > dt-code {
margin-right: calc((100vw - 984px) / 2);
width: calc((984px - 648px) - 24px);
}
/* Side */
.side.l-body,
dt-article .side.l-body {
@@ -149,6 +150,9 @@ dt-article > dt-code {
dt-article .side.l-middle-outset {
clear: both;
float: right;
width: 456px;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2 + 168px);
}
.side.l-page,
dt-article .side.l-page {
@@ -161,6 +165,8 @@ dt-article > dt-code {
dt-article .side.l-page-outset {
clear: both;
float: right;
width: 624px;
margin-right: calc((100vw - 984px) / 2);
}
}
@@ -200,6 +206,56 @@ dt-article > dt-code {
/* page and screen are already centered */
/* Side */
.centered .side.l-body,
.centered dt-article .side.l-body {
clear: both;
float: right;
margin-top: 0;
margin-left: 48px;
margin-right: calc((100vw - 648px) / 2);
width: calc(4 * 60px + 3 * 24px);
}
.centered .side.l-body-outset,
.centered dt-article .side.l-body-outset {
clear: both;
float: right;
margin-top: 0;
margin-left: 48px;
margin-right: calc((100vw - 648px) / 2);
width: calc(4 * 60px + 3 * 24px);
}
.centered .side.l-middle,
.centered dt-article .side.l-middle {
clear: both;
float: right;
width: 396px;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2 + 168px / 2);
}
.centered .side.l-middle-outset,
.centered dt-article .side.l-middle-outset {
clear: both;
float: right;
width: 456px;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2 + 168px);
}
.centered .side.l-page,
.centered dt-article .side.l-page {
clear: both;
float: right;
width: 480px;
margin-right: calc((100vw - 984px) / 2);
}
.centered .side.l-page-outset,
.centered dt-article .side.l-page-outset {
clear: both;
float: right;
width: 480px;
margin-right: calc((100vw - 984px) / 2);
}
.centered .l-gutter,
.centered.l-gutter,
dt-article.centered .l-gutter {
@@ -210,16 +266,5 @@ dt-article > dt-code {
margin-right: calc((100vw - 984px) / 2);
width: calc((984px - 648px) / 2 - 24px);
}
/* Side */
.centered .side.l-body,
.centered.side.l-body,
dt-article.centered .side.l-body {
clear: both;
float: right;
margin-top: 0;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2);
width: 396px;
}
}
dist/template.js
Vendored
+2 -2
View File
@@ -26,11 +26,11 @@ var html = function(dom) {
var base = "html {\n font: 400 16px/1.55em -apple-system, BlinkMacSystemFont, \"Roboto\", Helvetica, sans-serif;\n /*background-color: hsl(223, 9%, 25%);*/\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n}\nbody {\n margin: 0;\n /*background-color: hsl(223, 9%, 25%);*/\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,\ndt-article > dt-code {\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 dt-article > dt-code {\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 > h2,\n dt-article > h3,\n dt-article > h4,\n dt-article > figure,\n dt-article > ul,\n dt-article > dt-byline,\n dt-article > dt-code {\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 dt-article > h1,\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 .side.l-middle,\n dt-article .side.l-middle {\n clear: both;\n float: right;\n width: 456px;\n margin-left: 48px;\n margin-right: calc((100vw - 984px) / 2 + 168px);\n }\n .side.l-middle-outset,\n dt-article .side.l-middle-outset {\n clear: both;\n float: right;\n }\n .side.l-page,\n dt-article .side.l-page {\n clear: both;\n float: right;\n width: 624px;\n margin-right: calc((100vw - 984px) / 2);\n }\n .side.l-page-outset,\n dt-article .side.l-page-outset {\n clear: both;\n float: right;\n }\n}\n\n/* Centered */\n\n@media(min-width: 1080px) {\n .centered .l-body,\n .centered.l-body,\n dt-article.centered > div,\n dt-article.centered > p,\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 dt-article.centered > dt-code {\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 dt-article.centered > h1,\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}\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,\ndt-article > dt-code {\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 dt-article > dt-code {\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 > h2,\n dt-article > h3,\n dt-article > h4,\n dt-article > figure,\n dt-article > ul,\n dt-article > dt-byline,\n dt-article > dt-code {\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 dt-article > h1,\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\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 .side.l-middle,\n dt-article .side.l-middle {\n clear: both;\n float: right;\n width: 456px;\n margin-left: 48px;\n margin-right: calc((100vw - 984px) / 2 + 168px);\n }\n .side.l-middle-outset,\n dt-article .side.l-middle-outset {\n clear: both;\n float: right;\n width: 456px;\n margin-left: 48px;\n margin-right: calc((100vw - 984px) / 2 + 168px);\n }\n .side.l-page,\n dt-article .side.l-page {\n clear: both;\n float: right;\n width: 624px;\n margin-right: calc((100vw - 984px) / 2);\n }\n .side.l-page-outset,\n dt-article .side.l-page-outset {\n clear: both;\n float: right;\n width: 624px;\n margin-right: calc((100vw - 984px) / 2);\n }\n}\n\n/* Centered */\n\n@media(min-width: 1080px) {\n .centered .l-body,\n .centered.l-body,\n dt-article.centered > div,\n dt-article.centered > p,\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 dt-article.centered > dt-code {\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 dt-article.centered > h1,\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 /* Side */\n\n .centered .side.l-body,\n .centered dt-article .side.l-body {\n clear: both;\n float: right;\n margin-top: 0;\n margin-left: 48px;\n margin-right: calc((100vw - 648px) / 2);\n width: calc(4 * 60px + 3 * 24px);\n }\n .centered .side.l-body-outset,\n .centered 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 - 648px) / 2);\n width: calc(4 * 60px + 3 * 24px);\n }\n .centered .side.l-middle,\n .centered dt-article .side.l-midLine truncated
var article = "dt-article {\n display: block;\n color: rgba(0, 0, 0, 0.8);\n font: 17px/1.55em -apple-system, BlinkMacSystemFont, \"Roboto\", sans-serif;\n padding-bottom: 72px;\n overflow: hidden;\n background: white;\n}\n\n@media(min-width: 1024px) {\n dt-article {\n font-size: 20px;\n }\n}\n\n/* H1 */\n\ndt-article h1 {\n margin-top: 18px;\n font-weight: 400;\n font-size: 40px;\n line-height: 1em;\n font-family: HoeflerText-Regular, Cochin, Georgia, serif;\n}\n@media(min-width: 768px) {\n dt-article h1 {\n font-size: 46px;\n margin-top: 48px;\n margin-bottom: 12px;\n }\n}\n\n@media(min-width: 1080px) {\n dt-article.centered h1 {\n text-align: center;\n }\n\n dt-article h1 {\n font-size: 50px;\n letter-spacing: -0.02em;\n }\n\n dt-article > h1:first-of-type {\n margin-top: 80px;\n }\n}\n\n\n@media(min-width: 1200px) {\n dt-article h1 {\n font-size: 54px;\n }\n\n dt-article > h1:first-of-type {\n margin-top: 100px;\n }\n}\n\n/* H2 */\n\ndt-article h2 {\n font-weight: 700;\n font-size: 22px;\n line-height: 1.25em;\n margin-top: 12px;\n margin-bottom: 24px;\n}\n\n@media(min-width: 1024px) {\n dt-article h2 {\n font-size: 24px;\n }\n}\n\ndt-article h1 + h2 {\n font-weight: 300;\n font-size: 20px;\n line-height: 1.5em;\n margin-top: 8px;\n}\n\n\n@media(min-width: 1080px) {\n dt-article.centered h1 + h2 {\n text-align: center;\n }\n dt-article h1 + h2 {\n margin-top: 12px;\n font-size: 24px;\n letter-spacing: 0.015em;\n }\n}\n\n/* H3 */\n\ndt-article h3 {\n font-weight: 700;\n font-size: 13px;\n line-height: 1.4em;\n margin-top: 36px;\n margin-bottom: 18px;\n text-transform: uppercase;\n letter-spacing: -0.03em;\n}\n\ndt-article h1 + h3 {\n margin-top: 48px;\n}\n\n@media(min-width: 1024px) {\n dt-article h3 {\n font-size: 16px;\n }\n}\n\n/* H4 */\n\ndt-article h4 {\n font-weight: 600;\n text-transform: uppercase;\n font-size: 14px;\n line-height: 1.4em;\n}\n\ndt-article a {\n color: inherit;\n}\n\ndt-article p {\n margin-bottom: 24px;\n -webkit-font-smoothing: antialiased;\n font-family: Georgia, serif;\n}\n\ndt-article p a {\n border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n text-decoration: none;\n}\n\ndt-article p a:hover {\n border-bottom: 1px solid rgba(0, 0, 0, 0.8);\n}\n\ndt-article p .link {\n text-decoration: underline;\n cursor: pointer;\n}\n\ndt-article ul {\n padding-left: 20px;\n}\n\ndt-article li {\n /*margin-bottom: 24px;*/\n}\n\ndt-article pre {\n font-size: 14px;\n margin-bottom: 20px;\n}\n\n\ndt-article hr {\n border: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n margin-top: 60px;\n margin-bottom: 60px;\n}\n\ndt-article section {\n margin-top: 60px;\n margin-bottom: 60px;\n}\n\n\n/* Figure */\n\ndt-article figure {\n position: relative;\n margin-top: 30px;\n margin-bottom: 30px;\n}\n\n@media(min-width: 1024px) {\n dt-article figure {\n margin-top: 48px;\n margin-bottom: 48px;\n }\n}\n\ndt-article figure img {\n width: 100%;\n}\n\ndt-article figure svg text,\ndt-article figure svg tspan {\n}\n\ndt-article figure figcaption {\n color: rgba(0, 0, 0, 0.6);\n font-size: 12px;\n line-height: 1.5em;\n}\n@media(min-width: 1024px) {\n dt-article figure figcaption {\n font-size: 13px;\n }\n}\n\ndt-article figure.external img {\n background: white;\n border: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);\n padding: 18px;\n box-sizing: border-box;\n}\n\ndt-article figure figcaption a {\n color: rgba(0, 0, 0, 0.6);\n}\n\n/*dt-article figure figcaption::before {\n position: relative;\n display: block;\n top: -20px;\n content: \"\";\n width: 25px;\n border-top: 1px solid rgba(0, 0, 0, 0.3);\n}*/\n\ndt-article span.equation-mimic {\n font-family: georgia;\n font-size: 115%;\n font-style: italic;\n}\n\ndt-article figure figcaption b {\n font-weight: 600;\n color: rgba(0, 0, 0, 1.0);\n}\n\ndt-article > dt-code {\n display: block;\n}\n\ndt-article .citation {\n color: #668;\n cursor: pointer;\n}\n\ndt-include {\n width: auto;\n display: block;\n}\n";
var code = "/**\n * prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou\n */\n\ncode {\n white-space:pre-wrap;\n background: rgba(0, 0, 0, 0.04);\n border-radius: 2px;\n padding: 4px 7px;\n font-size: 15px;\n color: rgba(0, 0, 0, 0.6);\n}\n\npre code {\n display: block;\n background: white;\n border-left: 3px solid rgba(0, 0, 0, 0.05);\n padding: 0 0 0 24px;\n}\n\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n text-shadow: 0 1px white;\n font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n}\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n text-shadow: none;\n background: #b3d4fc;\n}\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n text-shadow: none;\n background: #b3d4fc;\n}\n\n@media print {\n code[class*=\"language-\"],\n pre[class*=\"language-\"] {\n text-shadow: none;\n }\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n overflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n color: slategray;\n}\n\n.token.punctuation {\n color: #999;\n}\n\n.namespace {\n opacity: .7;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n color: #905;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n color: #690;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n color: #a67f59;\n background: hsla(0, 0%, 100%, .5);\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n color: #07a;\n}\n\n.token.function {\n color: #DD4A68;\n}\n\n.token.regex,\n.token.important,\n.token.variable {\n color: #e90;\n}\n\n.token.important,\n.token.bold {\n font-weight: bold;\n}\n.token.italic {\n font-style: italic;\n}\n\n.token.entity {\n cursor: help;\n}\n";
var code = "/**\n * prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou\n */\n\ncode {\n white-space: nowrap;\n background: rgba(0, 0, 0, 0.04);\n border-radius: 2px;\n padding: 4px 7px;\n font-size: 15px;\n color: rgba(0, 0, 0, 0.6);\n}\n\npre code {\n display: block;\n background: white;\n border-left: 3px solid rgba(0, 0, 0, 0.05);\n padding: 0 0 0 24px;\n}\n\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n text-shadow: 0 1px white;\n font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n}\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n text-shadow: none;\n background: #b3d4fc;\n}\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n text-shadow: none;\n background: #b3d4fc;\n}\n\n@media print {\n code[class*=\"language-\"],\n pre[class*=\"language-\"] {\n text-shadow: none;\n }\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n overflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n color: slategray;\n}\n\n.token.punctuation {\n color: #999;\n}\n\n.namespace {\n opacity: .7;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n color: #905;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n color: #690;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n color: #a67f59;\n background: hsla(0, 0%, 100%, .5);\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n color: #07a;\n}\n\n.token.function {\n color: #DD4A68;\n}\n\n.token.regex,\n.token.important,\n.token.variable {\n color: #e90;\n}\n\n.token.important,\n.token.bold {\n font-weight: bold;\n}\n.token.italic {\n font-style: italic;\n}\n\n.token.entity {\n cursor: help;\n}\n";
var styles = function(dom) {
var s = dom.createElement("style");
examples/tutorial.html
+14 -3
View File
@@ -11,8 +11,9 @@
.fake-img p {
font-family: monospace;
color: white;
text-align: center;
text-align: left;
margin: 12px 0;
text-align: center;
font-size: 16px;
}
</style>
@@ -158,18 +159,28 @@
<h2>Layouts</h2>
<p>The main text column is referred to as the body. It is the assumed layout of any direct descendents of the <code>dt-article</code> element.</p>
<div class="fake-img l-body"><p>.l-body</p></div>
<p>For images you want to display a little larger, try these:</p>
<div class="fake-img l-middle"><p>.l-middle</p></div>
<div class="fake-img l-page"><p>.l-page</p></div>
<p>Occasionally you’ll want to use the full browser width. For this, use screen. You can also inset the element a little from the edge of the browser by appending, you guessed it, <code>inset</code>.</p>
<p>All of these have an <dt-code>outset</dt-code> variant if you want to poke out from the body text a little bit. For instance:</p>
<div class="fake-img l-body-outset"><p>.l-body-outset</p></div>
<p>Occasionally you’ll want to use the full browser width. For this, use <dt-code>.l-screen</dt-code>. You can also inset the element a little from the edge of the browser by using the inset variant.</p>
<div class="fake-img l-screen"><p>.l-screen</p></div>
<div class="fake-img l-screen-inset"><p>.l-screen-inset</p></div>
<p>Often you want to position smaller images so as not to completely interrupt the flow of your text. Or perhaps you want to put some text in the margin as an aside or to signal that it’s optional content. For these cases we’ll use the float-based <code>.side</code> layouts.</p>
<p>Often you want to position smaller images so as not to completely interrupt the flow of your text. Or perhaps you want to put some text in the margin as an aside or to signal that it’s optional content. For these cases we’ll use the float-based layouts.</p>
<div class="fake-img l-body side"><p>.l-body.side</p></div>
<div class="fake-img l-middle side"><p>.l-middle.side</p></div>
<div class="fake-img l-page side"><p>.l-page.side</p></div>
<p>They are all floated to the right and anchored to the right-hand edge of the position you specify. By default, each will take up approximately half of the width of the standard layout position, but you can override the width with a more specific selector. </p>
<div class="fake-img l-gutter"><p>.l-gutter</p></div>
<p>The final layout is for marginalia, asides, and footnotes. It does not interrupt the normal flow of <code>.l-body</code> sized text except on mobile screen sizes.</p>
<p>You can also use an alternate centered layout by adding a <dt-code>centered</dt-code> class to the <dt-code>dt-article</dt-code> element.</p>
<dt-code block language="html">
&lt;dt-article class="centered"&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/dt-article&gt;
</dt-code>
<p>You can toggle it on this article by <a onclick="document.querySelector('dt-article').classList.toggle('centered');">clicking here</a></p>
<!--
<hr>
<h2>Including External Files</h2> -->