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

Support for sections

Browse Source
This commit is contained in:
Shan Carter
2017-01-19 16:02:03 -08:00
parent cc02e9aa20
commit 9e76725bc6
4 changed files with 65 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/styles-article.css
+6 -4
View File
@@ -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;
}
components/styles-layout.css
+54 -4
View File
@@ -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 {
dist/template.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/tutorial.html
+3 -1
View File
@@ -21,7 +21,6 @@
<dt-article>
<h1>How to Create a Distill Article</h1>
<h2>A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
<p>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.</p>
<hr>
<h2>Getting Started</h2>
<p>Here is the smallest distill post.</p>
@@ -186,6 +185,9 @@
&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>
<section class="centered">
</section>
<!--
<hr>
<h2>Including External Files</h2> -->