mirror of
https://github.com/wassname/template.git
synced 2026-06-27 17:50:45 +08:00
Shan Carter
139 lines
2.7 KiB
CSS
139 lines
2.7 KiB
CSS
@supports not (display: grid) {
|
|
distill-header,
|
|
d-title,
|
|
d-abstract,
|
|
d-article,
|
|
d-appendix,
|
|
d-byline,
|
|
d-footnote-list,
|
|
distill-footer {
|
|
display: block;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
distill-header,
|
|
d-title,
|
|
d-abstract,
|
|
d-article,
|
|
d-appendix,
|
|
d-byline,
|
|
d-footnote-list,
|
|
distill-footer {
|
|
display: grid;
|
|
justify-items: stretch;
|
|
grid-template-columns: [screen-start] 0.5fr [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 0.5fr [screen-end];
|
|
grid-column-gap: 30px;
|
|
}
|
|
|
|
@media(min-width: 768px) {
|
|
distill-header,
|
|
d-title,
|
|
d-abstract,
|
|
d-article,
|
|
d-appendix,
|
|
d-byline,
|
|
d-footnote-list,
|
|
distill-footer {
|
|
grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] 45px 45px 45px 45px 45px 45px 45px 45px [ kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end];
|
|
grid-column-gap: 30px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 1000px) {
|
|
distill-header,
|
|
d-title,
|
|
d-abstract,
|
|
d-article,
|
|
d-appendix,
|
|
d-byline,
|
|
d-footnote-list,
|
|
distill-footer {
|
|
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end];
|
|
grid-column-gap: 30px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 1280px) {
|
|
distill-header,
|
|
d-title,
|
|
d-abstract,
|
|
d-article,
|
|
d-appendix,
|
|
d-byline,
|
|
d-footnote-list,
|
|
distill-footer {
|
|
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];
|
|
grid-column-gap: 30px;
|
|
}
|
|
}
|
|
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-column-gap: 30px;
|
|
}
|
|
|
|
.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-title > *,
|
|
d-figure {
|
|
grid-column: page;
|
|
} */
|
|
|
|
.l-body-outset {
|
|
grid-column: left-outset / right-outset;
|
|
}
|
|
|
|
.l-page-outset {
|
|
grid-column: left-outset / right-outset;
|
|
}
|
|
|
|
.l-screen {
|
|
grid-column: start / end;
|
|
}
|
|
|
|
.l-screen-inset {
|
|
grid-column: start / end;
|
|
padding-left: 16px;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
|
|
/* Aside */
|
|
|
|
d-article aside {
|
|
grid-column: gutter;
|
|
}
|
|
|
|
@media(min-width: 768px) {
|
|
aside {
|
|
grid-column: right-outset / right-page;
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.side {
|
|
margin-left: 24px;
|
|
float: right;
|
|
width: 50%;
|
|
}
|
|
}
|