Mercurial > hg > mpiwgzen_wide
view css/layouts/responsive.css @ 0:a3750d724105 default tip
initital
author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
---|---|
date | Tue, 02 Jun 2015 09:16:36 +0200 |
parents | |
children |
line wrap: on
line source
/** * @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 */ /* extensionm for page layout */ #content h1#page-title{ font-size: 20px; } /* extensions for field display */ .field-label { display: inline; } .field-item { display: inline; margin-left: 4em; } .field-item p { display: block; margin-left: 0em; } .main-group { width:100%; } .main-left { float: left; } .main-right { float: right; } /** * 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: 75em; /* 900px */ background-color: #F7F7F7; border-right: solid 1px #efefef; border-left: solid 1px #efefef; padding: 0.5em 3.333em 0.833em 1.667em; /* 6px 40px 10px 20px */ } /* Apply the shared properties of grid items in a single, efficient ruleset. */ #header, #content, #navigation, .region-sidebar-first, .region-sidebar-second, #footer { padding-left: 0px; padding-right: 0px; -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: 2.833em; position: relative; } #navigation { /* Move the navbar up inside #main's padding. */ position: absolute; top: 0; height: 2.833em; 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: 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 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; } /** * Adding outermost left sidebar * TODO: what behavior? also: make percent */ .two-sidebars .region-sidebar-left { display: none; } /* 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: 55.5em; /*666px*/ width:80%; /*666px*/ margin-left: 19.5em; /*216+18px*/ margin-right: -100%; } /* Span 1 column, starting in 1st column from left. */ .sidebar-first .region-sidebar-first { float: left; width: 18em; margin-left: 0%; margin-right: -18em; } /** * Adding outermost sidebar on left sidebar */ .sidebar-first .region-sidebar-left { float: left; width: 12.5em; margin-left: -7.1em; margin-right: -5.4em; } /** * 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: 55.5em;*/ width: 70%; margin-left: 19.5em; margin-right: -80%; } /* Span 1 column, starting in 5th column from left. */ .sidebar-second .region-sidebar-second { float: left; width: 18em; margin-left: 84.5%; margin-right: -15.5%; } /** * The layout when there are two sidebars. */ /* Span 3 columns, starting in 2nd column from left. */ .two-sidebars #content { float: left; width: 70% margin-left: 19.5em; margin-right: -36%; } /* Span 1 column, starting in 1st column from left. */ .two-sidebars .region-sidebar-first { float: left; width: 15%; margin-left: -50%; margin-right: -3em; } /* Span 1 column, starting in 5th column from left. */ .two-sidebars .region-sidebar-second { float: left; width: 18em; margin-left: 38.5%; margin-right: -100%; } /** * Adding outermost left sidebar */ .two-sidebars .region-sidebar-left { float: left; width: 12.5em; margin-left: -14.6em; margin-right: 0%; } }