UNPKG

distill-template/components/styles-layout.css

Version:

1/*
Column: 60px
Gutter: 24px
4
Body: 648px
  - 8 columns
  - 7 gutters
Middle: 816px
Page: 984px
  - 12 columns
  - 11 gutters
12*/
13
l-body,
l-body-outset,
l-page,
l-page-outset,
l-middle,
l-middle-outset,
20dt-article > div,
21dt-article > p,
22dt-article > h1,
23dt-article > h2,
24dt-article > h3,
25dt-article > h4,
26dt-article > figure,
27dt-article > ul,
28dt-article > dt-byline,
29dt-article > dt-code,
30dt-article section > div,
31dt-article section > p,
32dt-article section > h1,
33dt-article section > h2,
34dt-article section > h3,
35dt-article section > h4,
36dt-article section > figure,
37dt-article section > ul,
38dt-article section > dt-byline,
39dt-article section > dt-code {
width: auto;
margin-left: 24px;
margin-right: 24px;
box-sizing: border-box;
44}
45
46@media(min-width: 768px) {
.l-body,
.l-body-outset,
.l-page,
.l-page-outset,
.l-middle,
.l-middle-outset,
dt-article > div,
dt-article > p,
dt-article > h1,
dt-article > h2,
dt-article > h3,
dt-article > h4,
dt-article > figure,
dt-article > ul,
dt-article > dt-byline,
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;
}
76}
77
78@media(min-width: 1080px) {
.l-body,
dt-article > div,
dt-article > p,
dt-article > h2,
dt-article > h3,
dt-article > h4,
dt-article > figure,
dt-article > ul,
dt-article > dt-byline,
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;
}
.l-body-outset,
dt-article .l-body-outset {
  margin-left: calc(50% - 984px / 2 - 96px/2);
  width: calc(648px + 96px);
}
.l-middle,
dt-article .l-middle {
  width: 816px;
  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,
dt-article .l-page,
dt-article.centered .l-page {
  width: 984px;
  margin-left: auto;
  margin-right: auto;
}
.l-page-outset,
dt-article .l-page-outset,
dt-article.centered .l-page-outset {
  width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.l-screen,
dt-article .l-screen,
dt-article.centered .l-screen {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.l-screen-inset,
dt-article .l-screen-inset,
dt-article.centered .l-screen-inset {
  margin-left: 24px;
  margin-right: 24px;
  width: auto;
}
.l-gutter,
dt-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);
}
157
/* Side */
.side.l-body,
dt-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,
dt-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,
dt-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,
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 {
  clear: both;
  float: right;
  margin-left: 48px;
  width: calc(624px - 84px);
  margin-right: calc((100vw - 984px) / 2);
}
.side.l-page-outset,
dt-article .side.l-page-outset {
  clear: both;
  float: right;
  width: 624px;
  margin-right: calc((100vw - 984px) / 2);
}
208}
209
210/* Centered */
211
212@media(min-width: 1080px) {
.centered .l-body,
.centered.l-body,
dt-article.centered > div,
dt-article.centered > p,
dt-article.centered > h2,
dt-article.centered > h3,
dt-article.centered > h4,
dt-article.centered > figure,
dt-article.centered > ul,
dt-article.centered > dt-byline,
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;
}
.centered .l-body-outset,
.centered.l-body-outset,
dt-article.centered .l-body-outset {
  margin-left: auto;
  margin-right: auto;
  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 {
  width: 816px;
  margin-left: auto;
  margin-right: auto;
}
263
.centered .l-middle-outset,
.centered.l-middle-outset,
dt-article.centered .l-middle-outset {
  width: calc(816px + 96px);
  margin-left: auto;
  margin-right: auto;
}
271
/* page and screen are already centered */
273
/* Side */
275
.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 {
  clear: both;
  float: right;
  margin-top: 0;
  margin-left: 24px;
  margin-right: calc((100vw - 984px) / 2);
  width: calc((984px - 648px) / 2 - 24px);
}
334
335}
336
337/* Rows and Columns */
338
row {
display: flex;
341}
column {
flex: 1;
box-sizing: border-box;
margin-right: 24px;
margin-left: 24px;
347}
row > .column:first-of-type {
margin-left: 0;
350}
row > .column:last-of-type {
margin-right: 0;
353}

1	`/*`
2	`Column: 60px`
3	`Gutter: 24px`
4
5	`Body: 648px`
6	`- 8 columns`
7	`- 7 gutters`
8	`Middle: 816px`
9	`Page: 984px`
10	`- 12 columns`
11	`- 11 gutters`
12	`*/`
13
14	`.l-body,`
15	`.l-body-outset,`
16	`.l-page,`
17	`.l-page-outset,`
18	`.l-middle,`
19	`.l-middle-outset,`
20	`dt-article > div,`
21	`dt-article > p,`
22	`dt-article > h1,`
23	`dt-article > h2,`
24	`dt-article > h3,`
25	`dt-article > h4,`
26	`dt-article > figure,`
27	`dt-article > ul,`
28	`dt-article > dt-byline,`
29	`dt-article > dt-code,`
30	`dt-article section > div,`
31	`dt-article section > p,`
32	`dt-article section > h1,`
33	`dt-article section > h2,`
34	`dt-article section > h3,`
35	`dt-article section > h4,`
36	`dt-article section > figure,`
37	`dt-article section > ul,`
38	`dt-article section > dt-byline,`
39	`dt-article section > dt-code {`
40	`width: auto;`
41	`margin-left: 24px;`
42	`margin-right: 24px;`
43	`box-sizing: border-box;`
44	`}`
45
46	`@media(min-width: 768px) {`
47	`.l-body,`
48	`.l-body-outset,`
49	`.l-page,`
50	`.l-page-outset,`
51	`.l-middle,`
52	`.l-middle-outset,`
53	`dt-article > div,`
54	`dt-article > p,`
55	`dt-article > h1,`
56	`dt-article > h2,`
57	`dt-article > h3,`
58	`dt-article > h4,`
59	`dt-article > figure,`
60	`dt-article > ul,`
61	`dt-article > dt-byline,`
62	`dt-article > dt-code,`
63	`dt-article section > div,`
64	`dt-article section > p,`
65	`dt-article section > h1,`
66	`dt-article section > h2,`
67	`dt-article section > h3,`
68	`dt-article section > h4,`
69	`dt-article section > figure,`
70	`dt-article section > ul,`
71	`dt-article section > dt-byline,`
72	`dt-article section > dt-code {`
73	`margin-left: 72px;`
74	`margin-right: 72px;`
75	`}`
76	`}`
77
78	`@media(min-width: 1080px) {`
79	`.l-body,`
80	`dt-article > div,`
81	`dt-article > p,`
82	`dt-article > h2,`
83	`dt-article > h3,`
84	`dt-article > h4,`
85	`dt-article > figure,`
86	`dt-article > ul,`
87	`dt-article > dt-byline,`
88	`dt-article > dt-code,`
89	`dt-article section > div,`
90	`dt-article section > p,`
91	`dt-article section > h2,`
92	`dt-article section > h3,`
93	`dt-article section > h4,`
94	`dt-article section > figure,`
95	`dt-article section > ul,`
96	`dt-article section > dt-byline,`
97	`dt-article section > dt-code {`
98	`margin-left: calc(50% - 984px / 2);`
99	`width: 648px;`
100	`}`
101	`.l-body-outset,`
102	`dt-article .l-body-outset {`
103	`margin-left: calc(50% - 984px / 2 - 96px/2);`
104	`width: calc(648px + 96px);`
105	`}`
106	`.l-middle,`
107	`dt-article .l-middle {`
108	`width: 816px;`
109	`margin-left: calc(50% - 984px / 2);`
110	`margin-right: auto;`
111	`}`
112	`.l-middle-outset,`
113	`dt-article .l-middle-outset {`
114	`width: calc(816px + 96px);`
115	`margin-left: calc(50% - 984px / 2 - 48px);`
116	`margin-right: auto;`
117	`}`
118	`dt-article > h1,`
119	`dt-article section > h1,`
120	`.l-page,`
121	`dt-article .l-page,`
122	`dt-article.centered .l-page {`
123	`width: 984px;`
124	`margin-left: auto;`
125	`margin-right: auto;`
126	`}`
127	`.l-page-outset,`
128	`dt-article .l-page-outset,`
129	`dt-article.centered .l-page-outset {`
130	`width: 1080px;`
131	`margin-left: auto;`
132	`margin-right: auto;`
133	`}`
134	`.l-screen,`
135	`dt-article .l-screen,`
136	`dt-article.centered .l-screen {`
137	`margin-left: auto;`
138	`margin-right: auto;`
139	`width: auto;`
140	`}`
141	`.l-screen-inset,`
142	`dt-article .l-screen-inset,`
143	`dt-article.centered .l-screen-inset {`
144	`margin-left: 24px;`
145	`margin-right: 24px;`
146	`width: auto;`
147	`}`
148	`.l-gutter,`
149	`dt-article .l-gutter {`
150	`clear: both;`
151	`float: right;`
152	`margin-top: 0;`
153	`margin-left: 24px;`
154	`margin-right: calc((100vw - 984px) / 2 + 168px);`
155	`width: calc((984px - 648px) / 2 - 24px);`
156	`}`
157
158	`/* Side */`
159	`.side.l-body,`
160	`dt-article .side.l-body {`
161	`clear: both;`
162	`float: right;`
163	`margin-top: 0;`
164	`margin-left: 48px;`
165	`margin-right: calc((100vw - 984px + 648px) / 2);`
166	`width: calc(648px / 2 - 24px - 84px);`
167	`}`
168	`.side.l-body-outset,`
169	`dt-article .side.l-body-outset {`
170	`clear: both;`
171	`float: right;`
172	`margin-top: 0;`
173	`margin-left: 48px;`
174	`margin-right: calc((100vw - 984px + 648px - 48px) / 2);`
175	`width: calc(648px / 2 - 48px + 24px);`
176	`}`
177	`.side.l-middle,`
178	`dt-article .side.l-middle {`
179	`clear: both;`
180	`float: right;`
181	`width: calc(456px - 84px);`
182	`margin-left: 48px;`
183	`margin-right: calc((100vw - 984px) / 2 + 168px);`
184	`}`
185	`.side.l-middle-outset,`
186	`dt-article .side.l-middle-outset {`
187	`clear: both;`
188	`float: right;`
189	`width: 456px;`
190	`margin-left: 48px;`
191	`margin-right: calc((100vw - 984px) / 2 + 168px);`
192	`}`
193	`.side.l-page,`
194	`dt-article .side.l-page {`
195	`clear: both;`
196	`float: right;`
197	`margin-left: 48px;`
198	`width: calc(624px - 84px);`
199	`margin-right: calc((100vw - 984px) / 2);`
200	`}`
201	`.side.l-page-outset,`
202	`dt-article .side.l-page-outset {`
203	`clear: both;`
204	`float: right;`
205	`width: 624px;`
206	`margin-right: calc((100vw - 984px) / 2);`
207	`}`
208	`}`
209
210	`/* Centered */`
211
212	`@media(min-width: 1080px) {`
213	`.centered .l-body,`
214	`.centered.l-body,`
215	`dt-article.centered > div,`
216	`dt-article.centered > p,`
217	`dt-article.centered > h2,`
218	`dt-article.centered > h3,`
219	`dt-article.centered > h4,`
220	`dt-article.centered > figure,`
221	`dt-article.centered > ul,`
222	`dt-article.centered > dt-byline,`
223	`dt-article.centered > dt-code,`
224	`dt-article.centered section > div,`
225	`dt-article.centered section > p,`
226	`dt-article.centered section > h2,`
227	`dt-article.centered section > h3,`
228	`dt-article.centered section > h4,`
229	`dt-article.centered section > figure,`
230	`dt-article.centered section > ul,`
231	`dt-article.centered section > dt-byline,`
232	`dt-article.centered section > dt-code,`
233	`dt-article section.centered > div,`
234	`dt-article section.centered > p,`
235	`dt-article section.centered > h2,`
236	`dt-article section.centered > h3,`
237	`dt-article section.centered > h4,`
238	`dt-article section.centered > figure,`
239	`dt-article section.centered > ul,`
240	`dt-article section.centered > dt-byline,`
241	`dt-article section.centered > dt-code {`
242	`margin-left: auto;`
243	`margin-right: auto;`
244	`width: 648px;`
245	`}`
246	`.centered .l-body-outset,`
247	`.centered.l-body-outset,`
248	`dt-article.centered .l-body-outset {`
249	`margin-left: auto;`
250	`margin-right: auto;`
251	`width: calc(648px + 96px);`
252	`}`
253	`dt-article.centered > h1,`
254	`dt-article.centered section > h1,`
255	`dt-article section.centered > h1,`
256	`.centered .l-middle,`
257	`.centered.l-middle,`
258	`dt-article.centered .l-middle {`
259	`width: 816px;`
260	`margin-left: auto;`
261	`margin-right: auto;`
262	`}`
263
264	`.centered .l-middle-outset,`
265	`.centered.l-middle-outset,`
266	`dt-article.centered .l-middle-outset {`
267	`width: calc(816px + 96px);`
268	`margin-left: auto;`
269	`margin-right: auto;`
270	`}`
271
272	`/* page and screen are already centered */`
273
274	`/* Side */`
275
276	`.centered .side.l-body,`
277	`.centered dt-article .side.l-body {`
278	`clear: both;`
279	`float: right;`
280	`margin-top: 0;`
281	`margin-left: 48px;`
282	`margin-right: calc((100vw - 648px) / 2);`
283	`width: calc(4 * 60px + 3 * 24px);`
284	`}`
285	`.centered .side.l-body-outset,`
286	`.centered dt-article .side.l-body-outset {`
287	`clear: both;`
288	`float: right;`
289	`margin-top: 0;`
290	`margin-left: 48px;`
291	`margin-right: calc((100vw - 648px) / 2);`
292	`width: calc(4 * 60px + 3 * 24px);`
293	`}`
294	`.centered .side.l-middle,`
295	`.centered dt-article .side.l-middle {`
296	`clear: both;`
297	`float: right;`
298	`width: 396px;`
299	`margin-left: 48px;`
300	`margin-right: calc((100vw - 984px) / 2 + 168px / 2);`
301	`}`
302	`.centered .side.l-middle-outset,`
303	`.centered dt-article .side.l-middle-outset {`
304	`clear: both;`
305	`float: right;`
306	`width: 456px;`
307	`margin-left: 48px;`
308	`margin-right: calc((100vw - 984px) / 2 + 168px);`
309	`}`
310	`.centered .side.l-page,`
311	`.centered dt-article .side.l-page {`
312	`clear: both;`
313	`float: right;`
314	`width: 480px;`
315	`margin-right: calc((100vw - 984px) / 2);`
316	`}`
317	`.centered .side.l-page-outset,`
318	`.centered dt-article .side.l-page-outset {`
319	`clear: both;`
320	`float: right;`
321	`width: 480px;`
322	`margin-right: calc((100vw - 984px) / 2);`
323	`}`
324	`.centered .l-gutter,`
325	`.centered.l-gutter,`
326	`dt-article.centered .l-gutter {`
327	`clear: both;`
328	`float: right;`
329	`margin-top: 0;`
330	`margin-left: 24px;`
331	`margin-right: calc((100vw - 984px) / 2);`
332	`width: calc((984px - 648px) / 2 - 24px);`
333	`}`
334
335	`}`
336
337	`/* Rows and Columns */`
338
339	`.row {`
340	`display: flex;`
341	`}`
342	`.column {`
343	`flex: 1;`
344	`box-sizing: border-box;`
345	`margin-right: 24px;`
346	`margin-left: 24px;`
347	`}`
348	`.row > .column:first-of-type {`
349	`margin-left: 0;`
350	`}`
351	`.row > .column:last-of-type {`
352	`margin-right: 0;`
353	`}`