diff --git a/css/skeleton.css b/css/skeleton.css index 244e2f2..88940dd 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -30,64 +30,78 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative; - width: 80%; + width: 100%; max-width: 960px; margin: 0 auto; - padding: 0; } -.container .column, -.container .columns { + padding: 0 20px; + box-sizing: border-box; } +.column, +.columns { float: left; width: 100%; box-sizing: border-box; } -.row { - margin-bottom: 2rem; } -.row .column:first-child, -.row .columns:first-child { - margin-left: 0; } /* For devices larger than 550px */ @media (min-width: 550px) { - .container .column, - .container .columns { + .column, + .columns { margin-left: 4%; } + + .column:first-child, + .columns:first-child { + margin-left: 0; } - .container .one.column, - .container .one.columns { width: 4.66666666667%; } - .container .two.columns { width: 13.3333333333%; } - .container .three.columns { width: 22%; } - .container .four.columns { width: 30.6666666667%; } - .container .five.columns { width: 39.3333333333%; } - .container .six.columns { width: 48%; } - .container .seven.columns { width: 56.6666666667%; } - .container .eight.columns { width: 65.3333333333%; } - .container .nine.columns { width: 74.0%; } - .container .ten.columns { width: 82.6666666667%; } - .container .eleven.columns { width: 91.3333333333%; } - .container .twelve.columns { width: 100%; margin-left: 0; } + .one.column, + .one.columns { width: 4.66666666667%; } + .two.columns { width: 13.3333333333%; } + .three.columns { width: 22%; } + .four.columns { width: 30.6666666667%; } + .five.columns { width: 39.3333333333%; } + .six.columns { width: 48%; } + .seven.columns { width: 56.6666666667%; } + .eight.columns { width: 65.3333333333%; } + .nine.columns { width: 74.0%; } + .ten.columns { width: 82.6666666667%; } + .eleven.columns { width: 91.3333333333%; } + .twelve.columns { width: 100%; margin-left: 0; } - .container .one-third.column { width: 30.6666666667%; } - .container .two-thirds.column { width: 65.3333333333%; } + .one-third.column { width: 30.6666666667%; } + .two-thirds.column { width: 65.3333333333%; } - .container .one-half.column { width: 48%; } + .one-half.column { width: 48%; } /* Offsets */ - .container .row .offset-by-one { margin-left: 8.66666666667%; } - .container .row .offset-by-two { margin-left: 17.3333333333%; } - .container .row .offset-by-three { margin-left: 26%; } - .container .row .offset-by-four { margin-left: 34.6666666667%; } - .container .row .offset-by-five { margin-left: 43.3333333333%; } - .container .row .offset-by-six { margin-left: 52%; } - .container .row .offset-by-seven { margin-left: 60.6666666667%; } - .container .row .offset-by-eight { margin-left: 69.3333333333%; } - .container .row .offset-by-nine { margin-left: 78.0%; } - .container .row .offset-by-ten { margin-left: 86.6666666667%; } - .container .row .offset-by-eleven { margin-left: 95.3333333333%; } + .offset-by-one.column, + .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { margin-left: 95.3333333333%; } - .container .row .offset-by-one-third { margin-left: 34.6666666667%; } - .container .row .offset-by-two-thirds { margin-left: 69.3333333333%; } + .offset-by-one-third.column, + .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - .container .row .offset-by-one-half { margin-left: 52%; } + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } }