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

Centered side layouts

Browse Source
This commit is contained in:
Shan Carter
2017-01-19 14:40:40 -08:00
parent a411a2a3ed
commit 50b73d8e35
4 changed files with 73 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/styles-layout.css
+56 -11
View File
@@ -118,6 +118,7 @@ dt-article > dt-code {
margin-right: calc((100vw - 984px) / 2);
width: calc((984px - 648px) - 24px);
}
/* Side */
.side.l-body,
dt-article .side.l-body {
@@ -149,6 +150,9 @@ dt-article > dt-code {
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 {
@@ -161,6 +165,8 @@ dt-article > dt-code {
dt-article .side.l-page-outset {
clear: both;
float: right;
width: 624px;
margin-right: calc((100vw - 984px) / 2);
}
}
@@ -200,6 +206,56 @@ dt-article > dt-code {
/* page and screen are already centered */
/* Side */
.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 {
@@ -210,16 +266,5 @@ dt-article > dt-code {
margin-right: calc((100vw - 984px) / 2);
width: calc((984px - 648px) / 2 - 24px);
}
/* Side */
.centered .side.l-body,
.centered.side.l-body,
dt-article.centered .side.l-body {
clear: both;
float: right;
margin-top: 0;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2);
width: 396px;
}
}