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

More work on perf: CSS contain etc.

Browse Source
This commit is contained in:
Ludwig Schubert
2017-08-29 10:34:00 -07:00
parent 9041141bf8
commit 366a3da552
34 changed files with 475 additions and 908 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/styles-layout.css
+1 -223
View File
@@ -42,7 +42,7 @@ distill-footer {
d-appendix,
d-article > d-title,
d-article > d-title > d-byline,
d-article > d-byline,
d-article > distill-footer {
grid-column: start / end;
}
@@ -89,228 +89,6 @@ aside {
line-height: 1.3;
}
}
/*
.l-body,
.l-page,
.l-middle,
d-article > div,
d-article > p,
d-article > h1,
d-article > h2,
d-article > h3,
d-article > h4,
d-article > figure,
d-article > ul,
d-article > d-abstract,
d-article > d-code,
d-article > d-math,
d-article > table,
d-article section > div,
d-article section > p,
d-article section > h1,
d-article section > h2,
d-article section > h3,
d-article section > h4,
d-article section > figure,
d-article section > ul,
d-article section > d-abstract,
d-article section > d-code,
d-article section > d-math,
d-article section > table {
width: calc(100% - 32px);
margin-left: 16px;
margin-right: 16px;
box-sizing: border-box;
}
.l-body-outset,
.l-page-outset,
.l-middle-outset {
width: calc(100% - 16px);
margin-left: 8px;
margin-right: 8px;
}
.l-screen {
margin-left: 0px;
margin-right: 0px;
width: 100%;
background-color: #F8F8FC;
border-top: 1px solid #E8E8EC;
border-bottom: 1px solid #E8E8EC;
}
@media(min-width: 768px) {
.l-body,
d-article > div,
d-article > p,
d-article > h1,
d-article > h2,
d-article > h3,
d-article > h4,
d-article > figure,
d-article > ul,
d-article > d-abstract,
d-article > d-code,
d-article > d-math,
d-article > d-math,
d-article section > div,
d-article section > p,
d-article section > h1,
d-article section > h2,
d-article section > h3,
d-article section > h4,
d-article section > figure,
d-article section > ul,
d-article section > d-abstract,
d-article section > d-code,
d-article section > d-math,
d-article section > table {
margin-left: 64px;
width: calc((100% - 2 * 64px - 3 * 16px)/4*3 + 2*16px );
}
.l-body-outset {
margin-left: 32px;
width: calc((100% - 2 * 64px - 3 * 16px)/4*3 + 2*16px + 64px );;
}
.l-middle,
.l-middle-outset,
.l-page {
margin-left: 64px;
margin-right: 64px;
width: calc(100% - 2*64px);
}
.l-page-outset {
margin-left: 32px;
margin-right: 32px;
width: calc(100% - 64px);
}
.margin {
font-size: 14px;
line-height: normal;
clear: both;
float: right;
margin-top: 0;
margin-left: 0;
margin-right: 64px;
width: calc((100% - 2 * 64px - 3 * 16px)/4);
}
}
@media(min-width: 1024px) {
.l-body,
d-article > div,
d-article > p,
d-article > h2,
d-article > h3,
d-article > h4,
d-article > figure,
d-article > ul,
d-article > d-abstract,
d-article > d-code,
d-article > d-math,
d-article > table,
d-article section > div,
d-article section > p,
d-article section > h2,
d-article section > h3,
d-article section > h4,
d-article section > figure,
d-article section > ul,
d-article section > d-abstract,
d-article section > d-code,
d-article section > d-math,
d-article section > table {
margin-left: calc(50% - (1024px - 2*64px) / 2);
width: 668px;
}
.l-body-outset {
margin-left: calc((50% - (1024px - 2*64px) / 2) - 32px);
width: calc(668px + 64px)
}
.l-middle,
.l-middle-outset,
.l-page {
margin-left: calc(50% - (1024px - 2*64px) / 2);
width: calc(100% - 2* (50% - (1024px - 2*64px) / 2));
}
.l-page-outset {
margin-left: calc((50% - (1024px - 2*64px) / 2) - 32px);
width: calc(100% - 2* (50% - (1024px - 2*64px) / 2) + 64px);
}
.margin {
font-size: 14px;
line-height: normal;
clear: both;
float: right;
margin-top: 0;
margin-left: 0;
margin-right: calc(50% - (1024px - 2*64px) / 2);
width: 206px;
}
/* Side */
/*
.side.l-body,
d-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,
d-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,
d-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,
d-article .side.l-middle-outset {
clear: both;
float: right;
width: 456px;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2 + 168px);
}
.side.l-page,
d-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,
d-article .side.l-page-outset {
clear: both;
float: right;
width: 624px;
margin-right: calc((100vw - 984px) / 2);
}
}*/
/* Rows and Columns */