147 lines
2.6 KiB
CSS
147 lines
2.6 KiB
CSS
/**
|
|
* @file
|
|
* Positioning for responsive layout.
|
|
*
|
|
* Define CSS classes to create a table-free, right column layout.
|
|
*/
|
|
|
|
|
|
/*
|
|
* Center the page.
|
|
*/
|
|
#header,
|
|
#main-wrapper,
|
|
#navigation-top .section,
|
|
#navigation .section,
|
|
#page-title .section,
|
|
#footer .section,
|
|
#socket .section,
|
|
.region-bottom {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 1240px; /* For screen sizes larger than 1240px, prevent
|
|
long lines of text by setting a max-width. */
|
|
}
|
|
|
|
/*
|
|
* Apply the shared properties of grid items in a single, efficient ruleset.
|
|
*/
|
|
#header,
|
|
#main-content,
|
|
#navigation .section,
|
|
#page-title .section,
|
|
#footer .section,
|
|
.region-sidebar-main {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
word-wrap: break-word;
|
|
}
|
|
#header,
|
|
#navigation-top .section,
|
|
#navigation .section,
|
|
#page-title .section {
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
#main-content {
|
|
padding-left: 30px;
|
|
padding-right: 20px;
|
|
}
|
|
#main-content .section {
|
|
margin-top: 0;
|
|
padding: 0 0 1em;
|
|
min-height: 360px;
|
|
}
|
|
#footer .section {
|
|
padding-top: 30px;
|
|
}
|
|
#footer .section,
|
|
#socket .section {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.region-sidebar-main {
|
|
padding-left: 20px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
/*
|
|
* Containers for grid items and flow items.
|
|
*/
|
|
#header:before,
|
|
#header:after,
|
|
#main:before,
|
|
#main:after,
|
|
#footer:before,
|
|
#footer:after {
|
|
content: "";
|
|
display: table;
|
|
}
|
|
#header:after,
|
|
#main:after,
|
|
#footer:after {
|
|
clear: both;
|
|
}
|
|
|
|
/*
|
|
* Main layout.
|
|
*/
|
|
@media (max-width: 1269px) {
|
|
#footer .section,
|
|
#socket .section {
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
#footer .section,
|
|
#socket .section,
|
|
#main-content,
|
|
.region-sidebar-main {
|
|
padding-left: 4%;
|
|
padding-right: 4%;
|
|
}
|
|
}
|
|
@media (max-width: 529px) { /* MINW = 530px */
|
|
#header,
|
|
#navigation-top .section,
|
|
#navigation .section,
|
|
#page-title .section,
|
|
#main-content .section {
|
|
padding-left: 4%;
|
|
padding-right: 4%;
|
|
}
|
|
#main-content {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.sidebar-main #main-content {
|
|
float: left;
|
|
width: 66.667%;
|
|
margin-left: 0%;
|
|
margin-right: -66.667%;
|
|
}
|
|
.sidebar-main .region-sidebar-main {
|
|
float: left;
|
|
width: 33.333%;
|
|
margin-left: 66.667%;
|
|
margin-right: -100%;
|
|
}
|
|
}
|
|
@media (min-width: 960px) {
|
|
.sidebar-main #main-content {
|
|
width: 71%;
|
|
margin-right: -71%;
|
|
}
|
|
.sidebar-main .region-sidebar-main {
|
|
width: 29%;
|
|
margin-left: 71%;
|
|
}
|
|
}
|
|
.sidebar-main .region-sidebar-main {
|
|
margin-bottom: 1em;
|
|
}
|