Permalink
Fetching contributors…
Cannot retrieve contributors at this time
233 lines (183 sloc) 3.04 KB
.site-container {
background: #fff;
margin: 0 auto;
max-width: 1300px;
@media only screen and (min-width: $break-large) {
box-shadow: 0 4px 56px rgba(50,50,93,.11), 0 1px 13px rgba(0,0,0,.08);
}
}
.tech-notice {
background: $linkDefault;
color: #fff;
display: none;
font-size: 0.8em;
text-align: center;
padding: 10px 40px;
a {
text-decoration: underline;
&,
a:focus,
a:hover {
color: #fff;
}
}
p {
margin: 0;
}
@media only screen and (min-width: $break-medium) {
display: block;
@supports (display:grid) {
display: none;
}
}
}
.site-inner,
.wrap,
.site-footer {
margin: 0 auto;
padding: 0;
width: 100%;
}
.site-inner {
clear: both;
@media only screen and (min-width: $break-medium) {
clear: none;
float: right;
width: 80%;
}
}
.site-header {
background: $default;
color: $colorLight;
@media only screen and (min-width: $break-medium) {
float: left;
height: 100vh;
width: 20%;
}
> .wrap {
padding: 20px;
@media only screen and (min-width: $break-small) {
padding: 40px;
}
}
}
.title-area {
float: left;
@media only screen and (min-width: $break-medium) {
float: none;
margin-bottom: 40px;
text-align: left;
}
}
@supports (display: grid) {
@media only screen and (max-width: $break-medium) {
.site-header > .wrap {
display: inline-grid;
align-items: center;
}
.title-area {
grid-column: 1 / 2;
}
.menu-toggle {
grid-column: 2 / 3;
}
.nav-primary {
grid-column: 1 / 3;
}
}
@media only screen and (min-width: $break-small) {
.site-header,
.site-inner,
.content,
.sidebar-primary {
min-width: 100%;
height: auto;
}
.grid-wrapper,
.content-sidebar-wrap {
display: grid;
grid-template-columns: repeat(3, minmax(75px, 1fr)) repeat(9, 1fr);
}
.site-header,
.site-inner {
grid-column: 1 / 13;
}
.content-sidebar-wrap {
grid-template-columns: minmax(450px, 35.5em) 1fr;
}
.content,
.sidebar {
grid-column: span 1;
}
.site-footer {
grid-column: 1 / 13;
}
}
@media only screen and (min-width: $break-medium) {
.site-header {
grid-column: 1 / 4;
}
.site-inner {
grid-column: 4 / 13;
}
.archive-description,
.pagination {
grid-column: span 8;
}
}
}
@media screen and (min-width: $break-large) {
.site-inner {
margin-top: 0;
}
.content {
float: right;
}
.content-sidebar .content {
float: left;
}
// Columns.
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}
.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}
.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;
}
.first {
clear: both;
margin-left: 0;
}
}