From f549e6e2bdfdc1f565c31809f9caa33475b82bc5 Mon Sep 17 00:00:00 2001 From: Shan Carter Date: Thu, 19 Jan 2017 16:27:57 -0800 Subject: [PATCH] middle-outset --- components/styles-layout.css | 6 +++++ dist/template.js | 2 +- examples/tutorial.html | 49 ++++++++++++++++++++++++++++-------- 3 files changed, 46 insertions(+), 11 deletions(-) diff --git a/components/styles-layout.css b/components/styles-layout.css index 861cb3b..738b5c7 100644 --- a/components/styles-layout.css +++ b/components/styles-layout.css @@ -109,6 +109,12 @@ dt-article section > dt-code { margin-left: calc(50% - 984px / 2); margin-right: auto; } + .l-middle-outset, + dt-article .l-middle-outset { + width: calc(816px + 96px); + margin-left: calc(50% - 984px / 2 - 48px); + margin-right: auto; + } dt-article > h1, dt-article section > h1, .l-page, diff --git a/dist/template.js b/dist/template.js index 7a22931..fc7971f 100644 --- a/dist/template.js +++ b/dist/template.js @@ -26,7 +26,7 @@ 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,\ndt-article section > div,\ndt-article section > p,\ndt-article section > h1,\ndt-article section > h2,\ndt-article section > h3,\ndt-article section > h4,\ndt-article section > figure,\ndt-article section > ul,\ndt-article section > dt-byline,\ndt-article section > 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 dt-article section > div,\n dt-article section > p,\n dt-article section > h1,\n dt-article section > h2,\n dt-article section > h3,\n dt-article section > h4,\n dt-article section > figure,\n dt-article section > ul,\n dt-article section > dt-byline,\n dt-article section > 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 dt-article section > div,\n dt-article section > p,\n dt-article section > h2,\n dt-article section > h3,\n dt-article section > h4,\n dt-article section > figure,\n dt-article section > ul,\n dt-article section > dt-byline,\n dt-article section > 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 dt-article section > 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 dt-article.centered section > div,\n dt-article.centered section > p,\n dt-article.centered section > h2,\n dt-article.centered section > h3,\n dt-article.centered section > h4,\n dt-article.centered section > figure,\n dt-article.centered section > ul,\n dt-article.centered section > dt-byline,\n dt-article.centered section > dt-code,\n dt-article section.centered > div,\n dt-article section.centered > p,\n dt-article section.centered > h2,\n dt-article section.centered > h3,\n dt-article section.centered > h4,\n dt-article section.centered > figure,\n dt-article section.centered > ul,\n dt-article section.centered > dt-byline,\n dt-article section.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 dt-article.centered section > h1,\n dt-article section.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-middle {\n clear: both;\n float: right;\n width: 396px;\n margin-left: 48px;\n margin-right: calc((100vw - 984px) / 2 + 168px / 2);\n }\n .centered .side.l-middle-outset,\n .centered 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 .centered .side.l-page,\n .centered dt-article .side.l-page {\n clear: both;\n float: right;\n width: 480px;\n margin-right: calc((100vw - 984px) / 2);\n }\n .centered .side.l-page-outset,\n .centered dt-article .side.l-page-outset {\n clear: both;\n float: right;\n width: 480px;\n margin-right: calc((100vw - 984px) / 2);\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\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,\ndt-article section > div,\ndt-article section > p,\ndt-article section > h1,\ndt-article section > h2,\ndt-article section > h3,\ndt-article section > h4,\ndt-article section > figure,\ndt-article section > ul,\ndt-article section > dt-byline,\ndt-article section > 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 dt-article section > div,\n dt-article section > p,\n dt-article section > h1,\n dt-article section > h2,\n dt-article section > h3,\n dt-article section > h4,\n dt-article section > figure,\n dt-article section > ul,\n dt-article section > dt-byline,\n dt-article section > 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 dt-article section > div,\n dt-article section > p,\n dt-article section > h2,\n dt-article section > h3,\n dt-article section > h4,\n dt-article section > figure,\n dt-article section > ul,\n dt-article section > dt-byline,\n dt-article section > 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 .l-middle-outset,\n dt-article .l-middle-outset {\n width: calc(816px + 96px);\n margin-left: calc(50% - 984px / 2 - 48px);\n margin-right: auto;\n }\n dt-article > h1,\n dt-article section > 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 dt-article.centered section > div,\n dt-article.centered section > p,\n dt-article.centered section > h2,\n dt-article.centered section > h3,\n dt-article.centered section > h4,\n dt-article.centered section > figure,\n dt-article.centered section > ul,\n dt-article.centered section > dt-byline,\n dt-article.centered section > dt-code,\n dt-article section.centered > div,\n dt-article section.centered > p,\n dt-article section.centered > h2,\n dt-article section.centered > h3,\n dt-article section.centered > h4,\n dt-article section.centered > figure,\n dt-article section.centered > ul,\n dt-article section.centered > dt-byline,\n dt-article section.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 dt-article.centered section > h1,\n dt-article section.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-middle {\n clear: both;\n float: right;\n width: 396px;\n margin-left: 48px;\n margin-right: calc((100vw - 984px) / 2 + 168px / 2);\n }\n .centered .side.l-middle-outset,\n .centered 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 .centered .side.l-page,\n .centered dt-article .side.l-page {\n clear: both;\n float: right;\n width: 480px;\n margin-right: calc((100vw - 984px) / 2);\n }\n .centered .side.l-page-outset,\n .centered dt-article .side.l-page-outset {\n clear: both;\n float: right;\n width: 480px;\n margin-right: calc((100vw - 984px) / 2);\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\n}\n"; 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 .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 dt-article section > 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 .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,\ndt-article section > 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"; diff --git a/examples/tutorial.html b/examples/tutorial.html index 38396f2..fd4bce7 100644 --- a/examples/tutorial.html +++ b/examples/tutorial.html @@ -23,7 +23,7 @@

A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework

Getting Started

-

Here is the smallest distill post.

+

Distill ships with a CSS framework and a collection of custom web components that make building interactive academic articles easier than with raw HTML, CSS and JavaScript. At its simplest, each distill post is just a single HTML file with one special script tag.

<!doctype html> <meta charset="utf-8"> @@ -33,7 +33,8 @@ <h1>Hello World</h1> </dt-article> -

A typical distill post will be quite a bit longer than this though. Below is a more complete example. Don’t worry if some of the tags don’t make sense, they’re all documented further in this post.

+

This script tag will modify your post in your browser, adding the distill styling and functionality. When we publish your article, we will bake in these transformations, but during development it’s handy to be able to preview it locally (It even works without a web server).

+

A typical distill post will be quite a bit longer than the one above. Below is a more complete example. Don’t worry if some of the tags don’t make sense, they’re all documented further in this post.

<!doctype html> <meta charset="utf-8"> @@ -85,6 +86,28 @@ <script type="text/bibliography"></script>

We use marked as the rendering engine, with github flavored markdown and smartypants enabled. In development mode the markdown is translated in the client after the dom content has loaded, but when published, the translation is precompiled.

--> + +
+

Project Structure

+

Because all the templating is delivered via a script tag, you are generally free to develop however you are most comfortable. The only requirements are that each article must be its own Github repository. The simplest setup would be a repository that contained a single HTML file, along with any additional assets, like images or javascript files. Note, in this default setup, all files in the root of the repository will be published. Note, also, in this configuration you generally will not even need to run a static local webserver. You can just open the index.html file in your browser to preview.

+ + + image.jpg + index.html + script.js + + +

If you have a more complicated build process, or have files you don’t want published, put your output in a public folder and we will only publish its contents.

+ + + build/ + _index.html + package.json + public/ + index.html + image.jpg + +

Front Matter

You’ll need to describe some data about you post — title, description, authors, etc. For this use the <script type="text/front-matter"> tag.

@@ -136,6 +159,14 @@ <dt-cite key="gregor2015draw"></dt-cite> +
+

Footnotes

+

Just wrap the text you would like to show up in a footnote in a dt-fn tag. The number of the footnote will be automatically generated. This text will be shown on hover.

+ + <dt-fn>This will become a hoverable footnote.</dt-fn> + + +

Code Blocks

Syntax highlighting is provided within <dt-code> tags. An example of inline code snippets: <dt-code language="html">let x = 10;</dt-code>. For larger blocks of code, add a block attribute:

@@ -148,13 +179,6 @@ </dt-code> -
-

Footnotes

-

Just wrap the text you would like to show up in a footnote in a dt-fn tag. The number of the footnote will be automatically generated. This text will be shown on hover.

- - <dt-fn>This will become a hoverable footnote.</dt-fn> - -