wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-08-15 12:54:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

New design

Browse Source
This commit is contained in:
Shan Carter
2017-10-04 17:51:42 -07:00
parent e6202c5442
commit 44414a5a67
13 changed files with 459 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/styles-layout.css
+54 -38
View File
@@ -1,20 +1,25 @@
@supports not (display: grid) {
d-headline,
d-abstract,
d-article,
d-appendix,
d-byline,
d-footnote-list,
distill-footer {
display: block;
padding: 8px;
}
}
d-headline,
d-abstract,
d-article,
d-appendix,
d-byline,
d-footnote-list,
distill-footer {
display: grid;
justify-items: stretch;
grid-template-columns: [start] 8px [left-outset] 8px [left] 1fr [text] 0px [page] 8px [text-outset] 0px [page-outset] 8px [end];
}
/*
@media(min-width: 768px) {
@@ -26,39 +31,69 @@ distill-footer {
grid-template-columns: [start] 32px [left-outset] 32px [left] 3fr [text] 32px [text-outset] 1fr [page] 32px [page-outset] 32px [end];
}
}*/
@media(min-width: 768px) {
/* @media(min-width: 768px) {
d-headline,
d-abstract,
d-article,
d-appendix,
d-byline,
d-footnote-list,
distill-footer {
grid-template-columns: [start] 1fr [left-outset] 32px [left] 672px [text] 32px [text-outset] 224px [page] 32px [page-outset] 1fr [end];
grid-template-columns: [screen-start] 0 [page-start] 1fr [text-start] 1fr 1fr 1fr 1fr [text-end] 1fr [page-end] 0 [screen-end];
grid-column-gap: 30px;
}
} */
@media(min-width: 1060px) {
d-headline,
d-abstract,
d-article,
d-appendix,
d-byline,
d-footnote-list,
distill-footer {
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px 50px [page-end gutter-end] 1fr [screen-end];
/* grid-template-columns: [screen-start] 1fr [page-start] 130px [text-start] 130px 130px 130px 130px [text-end] 130px [page-end] 1fr [screen-end]; */
grid-column-gap: 30px;
}
}
d-article,
d-appendix,
d-article > d-byline,
d-article > distill-footer {
grid-column: start / end;
.grid {
display: grid;
grid-column-gap: 30px;
}
.l-body,
d-article > * {
grid-column: left / text;
.col-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
}
.col-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 30px;
}
/* .l-body,
d-article > * {
grid-column: text;
}
.l-page,
d-headline > *,
d-figure {
grid-column: left / page;
}
grid-column: page;
} */
.l-body-outset {
grid-column: left-outset / text-outset;
grid-column: left-outset / right-outset;
}
.l-page-outset {
grid-column: left-outset / page-outset;
grid-column: left-outset / right-outset;
}
.l-screen {
@@ -74,13 +109,13 @@ d-figure {
/* Aside */
aside {
grid-column: left / text;
d-article aside {
grid-column: gutter;
}
@media(min-width: 768px) {
aside {
grid-column: text-outset / page;
grid-column: right-outset / right-page;
font-size: 14px;
line-height: 1.3;
}
@@ -91,22 +126,3 @@ aside {
width: 50%;
}
}
/* Rows and Columns */
.row {
display: flex;
}
.column {
flex: 1;
box-sizing: border-box;
margin-right: 24px;
margin-left: 24px;
}
.row > .column:first-of-type {
margin-left: 0;
}
.row > .column:last-of-type {
margin-right: 0;
}