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

Real CSS, inline SVG

Browse Source
This commit is contained in:
Shan Carter
2017-01-04 15:25:57 -08:00
parent 4c6ba1b1c3
commit 902696214f
15 changed files with 33 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/styles-layout.css
+95
View File
@@ -0,0 +1,95 @@
.l-body,
.l-page,
dt-article > * {
margin-left: 24px;
margin-right: 24px;
box-sizing: border-box;
}
@media(min-width: 768px) {
.l-body,
.l-page,
dt-article > * {
margin-left: 72px;
margin-right: 72px;
}
}
@media(min-width: 1080px) {
.l-body,
dt-article > * {
margin-left: calc(50% - 984px / 2);
width: 648px;
}
.l-body-outset,
dt-article .l-body-outset {
margin-left: calc(50% - 984px / 2 - 24px);
width: calc(648px + 48px);
}
.l-middle,
dt-article .l-middle {
width: 816px;
margin-left: calc(50% - 984px / 2);
}
.l-page,
dt-article .l-page {
width: 984px;
margin-left: auto;
margin-right: auto;
}
.l-page-outset,
dt-article .l-page-outset {
width: 1080px;
margin-left: auto;
margin-right: auto;
}
.l-screen,
dt-article .l-screen {
margin-left: auto;
margin-right: auto;
width: auto;
}
.l-screen-inset,
dt-article .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 - 960px) / 2);
width: calc((984px - 648px) / 2 - 24px);
}
/* 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);
}
.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-page,
dt-article .side.l-page {
clear: both;
float: right;
margin-top: 0;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2);
width: calc(960px / 2 - 48px);
}
}