diff --git a/components/styles-article.css b/components/styles-article.css index 8017765..bb30f37 100644 --- a/components/styles-article.css +++ b/components/styles-article.css @@ -31,7 +31,7 @@ dt-article h1 { } @media(min-width: 1080px) { - dt-article.centered h1 { + .centered h1 { text-align: center; } @@ -40,7 +40,8 @@ dt-article h1 { letter-spacing: -0.02em; } - dt-article > h1:first-of-type { + dt-article > h1:first-of-type, + dt-article section > h1:first-of-type { margin-top: 80px; } } @@ -81,7 +82,7 @@ dt-article h1 + h2 { @media(min-width: 1080px) { - dt-article.centered h1 + h2 { + .centered h1 + h2 { text-align: center; } dt-article h1 + h2 { @@ -239,7 +240,8 @@ dt-article figure figcaption b { color: rgba(0, 0, 0, 1.0); } -dt-article > dt-code { +dt-article > dt-code, +dt-article section > dt-code { display: block; } diff --git a/components/styles-layout.css b/components/styles-layout.css index 06eab7d..861cb3b 100644 --- a/components/styles-layout.css +++ b/components/styles-layout.css @@ -26,7 +26,17 @@ dt-article > h4, dt-article > figure, dt-article > ul, dt-article > dt-byline, -dt-article > dt-code { +dt-article > dt-code, +dt-article section > div, +dt-article section > p, +dt-article section > h1, +dt-article section > h2, +dt-article section > h3, +dt-article section > h4, +dt-article section > figure, +dt-article section > ul, +dt-article section > dt-byline, +dt-article section > dt-code { width: auto; margin-left: 24px; margin-right: 24px; @@ -49,7 +59,17 @@ dt-article > dt-code { dt-article > figure, dt-article > ul, dt-article > dt-byline, - dt-article > dt-code { + dt-article > dt-code, + dt-article section > div, + dt-article section > p, + dt-article section > h1, + dt-article section > h2, + dt-article section > h3, + dt-article section > h4, + dt-article section > figure, + dt-article section > ul, + dt-article section > dt-byline, + dt-article section > dt-code { margin-left: 72px; margin-right: 72px; } @@ -65,7 +85,16 @@ dt-article > dt-code { dt-article > figure, dt-article > ul, dt-article > dt-byline, - dt-article > dt-code { + dt-article > dt-code, + dt-article section > div, + dt-article section > p, + dt-article section > h2, + dt-article section > h3, + dt-article section > h4, + dt-article section > figure, + dt-article section > ul, + dt-article section > dt-byline, + dt-article section > dt-code { margin-left: calc(50% - 984px / 2); width: 648px; } @@ -81,6 +110,7 @@ dt-article > dt-code { margin-right: auto; } dt-article > h1, + dt-article section > h1, .l-page, dt-article .l-page, dt-article.centered .l-page { @@ -183,7 +213,25 @@ dt-article > dt-code { dt-article.centered > figure, dt-article.centered > ul, dt-article.centered > dt-byline, - dt-article.centered > dt-code { + dt-article.centered > dt-code, + dt-article.centered section > div, + dt-article.centered section > p, + dt-article.centered section > h2, + dt-article.centered section > h3, + dt-article.centered section > h4, + dt-article.centered section > figure, + dt-article.centered section > ul, + dt-article.centered section > dt-byline, + dt-article.centered section > dt-code, + dt-article section.centered > div, + dt-article section.centered > p, + dt-article section.centered > h2, + dt-article section.centered > h3, + dt-article section.centered > h4, + dt-article section.centered > figure, + dt-article section.centered > ul, + dt-article section.centered > dt-byline, + dt-article section.centered > dt-code { margin-left: auto; margin-right: auto; width: 648px; @@ -196,6 +244,8 @@ dt-article > dt-code { width: calc(648px + 96px); } dt-article.centered > h1, + dt-article.centered section > h1, + dt-article section.centered > h1, .centered .l-middle, .centered.l-middle, dt-article.centered .l-middle { diff --git a/dist/template.js b/dist/template.js index 7f38fec..7a22931 100644 --- a/dist/template.js +++ b/dist/template.js @@ -26,9 +26,9 @@ 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\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-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 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 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 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"; 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"; diff --git a/examples/tutorial.html b/examples/tutorial.html index 6d49865..38396f2 100644 --- a/examples/tutorial.html +++ b/examples/tutorial.html @@ -21,7 +21,6 @@

How to Create a Distill Article

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

-

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. This reference article details several examples and best practices for how to use both frameworks.

Getting Started

Here is the smallest distill post.

@@ -186,6 +185,9 @@ </dt-article>

You can toggle it on this article by clicking here

+
+ +