Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * @file
- * Positioning for a responsive layout.
- *
- * Define CSS classes to create a fluid grid layout with optional sidebars
- * depending on whether blocks are placed in the left or right sidebars.
- *
- * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
- */
- /**
- * Center the page.
- *
- * For screen sizes larger than 1200px, prevent excessively long lines of text
- * by setting a max-width.
- */
- #page,
- .region-bottom {
- margin-left: auto;
- margin-right: auto;
- max-width: 1200px;
- }
- /* Apply the shared properties of grid items in a single, efficient ruleset. */
- #header,
- #content,
- #navigation,
- .region-sidebar-first,
- .region-sidebar-second,
- #footer {
- padding-left: 10px;
- padding-right: 10px;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -ms-box-sizing: border-box;
- box-sizing: border-box;
- word-wrap: break-word;
- *behavior: url("/path/to/boxsizing.htc");
- _display: inline;
- _overflow: hidden;
- _overflow-y: visible;
- }
- /* Containers for grid items and flow items. */
- #header,
- #main,
- #footer {
- *position: relative;
- *zoom: 1;
- }
- #header:before,
- #header:after,
- #main:before,
- #main:after,
- #footer:before,
- #footer:after {
- content: "";
- display: table;
- }
- #header:after,
- #main:after,
- #footer:after {
- clear: both;
- }
- /* Navigation bar */
- @media all and (min-width: 480px) {
- #main {
- /* Move all the children of #main down to make room. */
- padding-top: 3em;
- position: relative;
- }
- #navigation {
- /* Move the navbar up inside #main's padding. */
- position: absolute;
- top: 0;
- height: 3em;
- width: 100%;
- }
- }
- /**
- * Use 3 grid columns for smaller screens.
- */
- @media all and (min-width: 480px) and (max-width: 959px) {
- /**
- * The layout when there is only one sidebar, the left one.
- */
- /* Span 2 columns, starting in 2nd column from left. */
- .sidebar-first #content {
- float: left;
- width: 66.66667%;
- margin-left: 33.33333%;
- margin-right: -100%;
- }
- /* Span 1 column, starting in 1st column from left. */
- .sidebar-first .region-sidebar-first {
- float: left;
- width: 33.33333%;
- margin-left: 0%;
- margin-right: -33.33333%;
- }
- /**
- * The layout when there is only one sidebar, the right one.
- */
- /* Span 2 columns, starting in 1st column from left. */
- .sidebar-second #content {
- float: left;
- width: 66.66667%;
- margin-left: 0%;
- margin-right: -66.66667%;
- }
- /* Span 1 column, starting in 3rd column from left. */
- .sidebar-second .region-sidebar-second {
- float: left;
- width: 33.33333%;
- margin-left: 66.66667%;
- margin-right: -100%;
- }
- /**
- * The layout when there are two sidebars.
- */
- /* Span 2 columns, starting in 2nd column from left. */
- .two-sidebars #content {
- float: left;
- width: 66.66667%;
- margin-left: 33.33333%;
- margin-right: -100%;
- }
- /* Span 1 column, starting in 1st column from left. */
- .two-sidebars .region-sidebar-first {
- float: left;
- width: 33.33333%;
- margin-left: 0%;
- margin-right: -33.33333%;
- }
- /* Start a new row and span all 3 columns. */
- .two-sidebars .region-sidebar-second {
- float: left;
- width: 100%;
- margin-left: 0%;
- margin-right: -100%;
- padding-left: 0;
- padding-right: 0;
- clear: left;
- }
- /* Apply the shared properties of grid items in a single, efficient ruleset. */
- .two-sidebars .region-sidebar-second .block {
- padding-left: 10px;
- padding-right: 10px;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -ms-box-sizing: border-box;
- box-sizing: border-box;
- word-wrap: break-word;
- *behavior: url("/path/to/boxsizing.htc");
- _display: inline;
- _overflow: hidden;
- _overflow-y: visible;
- }
- /* Span 1 column, starting in the 1st column from left. */
- .two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
- float: left;
- width: 33.33333%;
- margin-left: 0%;
- margin-right: -33.33333%;
- clear: left;
- }
- /* Span 1 column, starting in the 2nd column from left. */
- .two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
- float: left;
- width: 33.33333%;
- margin-left: 33.33333%;
- margin-right: -66.66667%;
- }
- /* Span 1 column, starting in the 3rd column from left. */
- .two-sidebars .region-sidebar-second .block:nth-child(3n) {
- float: left;
- width: 33.33333%;
- margin-left: 66.66667%;
- margin-right: -100%;
- }
- }
- /**
- * Use 5 grid columns for larger screens.
- */
- @media all and (min-width: 960px) {
- /**
- * The layout when there is only one sidebar, the left one.
- */
- /* Span 4 columns, starting in 2nd column from left. */
- .sidebar-first #content {
- float: left;
- width: 80%;
- margin-left: 20%;
- margin-right: -100%;
- }
- /* Span 1 column, starting in 1st column from left. */
- .sidebar-first .region-sidebar-first {
- float: left;
- width: 20%;
- margin-left: 0%;
- margin-right: -20%;
- }
- /**
- * The layout when there is only one sidebar, the right one.
- */
- /* Span 4 columns, starting in 1st column from left. */
- .sidebar-second #content {
- float: left;
- width: 80%;
- margin-left: 0%;
- margin-right: -80%;
- }
- /* Span 1 column, starting in 5th column from left. */
- .sidebar-second .region-sidebar-second {
- float: left;
- width: 20%;
- margin-left: 80%;
- margin-right: -100%;
- }
- /**
- * The layout when there are two sidebars.
- */
- /* Span 3 columns, starting in 2nd column from left. */
- .two-sidebars #content {
- float: left;
- width: 60%;
- margin-left: 20%;
- margin-right: -80%;
- }
- /* Span 1 column, starting in 1st column from left. */
- .two-sidebars .region-sidebar-first {
- float: left;
- width: 20%;
- margin-left: 0%;
- margin-right: -20%;
- }
- /* Span 1 column, starting in 5th column from left. */
- .two-sidebars .region-sidebar-second {
- float: left;
- width: 20%;
- margin-left: 80%;
- margin-right: -100%;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement