diff --git a/css/skeleton.css b/css/skeleton.css index 27d4b0a..e7b7d1a 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -4,7 +4,7 @@ * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 11/25/2014 +* 12/9/2014 */ @@ -28,23 +28,22 @@ /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ - .container { - position: relative; - width: 80%; - max-width: 960px; - margin: 0 auto; - padding: 0; } + position: relative; + width: 80%; + max-width: 960px; + margin: 0 auto; + padding: 0; } .container .column, .container .columns { - float: left; - width: 100%; - box-sizing: border-box; } + float: left; + width: 100%; + box-sizing: border-box; } .row { - margin-bottom: 20px; } + margin-bottom: 2rem; } .row .column:first-child, .row .columns:first-child { - margin-left: 0; } + margin-left: 0; } /* For devices larger than 550px */ @media (min-width: 550px) { @@ -72,6 +71,25 @@ .container .one-half.column { width: 48%; } + /* Offsets */ + .container .offset-by-one.column, + .container .offset-by-one.columns { margin-left: 8.66666666667%; } + .container .offset-by-two.column { margin-left: 17.3333333333%; } + .container .offset-by-three.column { margin-left: 26%; } + .container .offset-by-four.column { margin-left: 34.6666666667%; } + .container .offset-by-five.column { margin-left: 43.3333333333%; } + .container .offset-by-six.column { margin-left: 52%; } + .container .offset-by-seven.column { margin-left: 60.6666666667%; } + .container .offset-by-eight.column { margin-left: 69.3333333333%; } + .container .offset-by-nine.column { margin-left: 78.0%; } + .container .offset-by-ten.column { margin-left: 86.6666666667%; } + .container .offset-by-eleven.column { margin-left: 95.3333333333%; } + + .container .offset-by-one-third.column { margin-left: 34.6666666667%; } + .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; } + + .container .offset-by-one-half.column { margin-left: 52%; } + } @@ -81,22 +99,21 @@ html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { - font-size: 62.5%; } + font-size: 62.5%; } body { - background: #fff; - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { - font-weight: 300; - margin-top: 0; - margin-bottom: 2rem; } + font-weight: 300; + margin-top: 0; + margin-bottom: 2rem; } h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } @@ -114,13 +131,16 @@ h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } h6 { font-size: 1.5rem; } } +p { + margin-top: 0; } + /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { - color: #1EAEDB; } + color: #1EAEDB; } a:hover { - color: #0FA0CE; } + color: #0FA0CE; } /* Buttons @@ -191,11 +211,11 @@ input[type="text"], input[type="password"], textarea, select { - border: 1px solid #D1D1D1; - height: 36px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - border-radius: 4px; - box-shadow: none; + border: 1px solid #D1D1D1; + height: 36px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + border-radius: 4px; + box-shadow: none; background: #fff; } /* Removes awkard default styles on some inputs */ input[type="email"], @@ -207,63 +227,63 @@ textarea { appearance: none; } textarea { - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } input[type="email"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { - border: 1px solid #33C3F0; - outline: 0; } + border: 1px solid #33C3F0; + outline: 0; } label, legend { display: block; font-weight: 600; margin-bottom: .5rem; } fieldset { - border-width: 0; - padding: 0; } + border-width: 0; + padding: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { + display: inline-block; font-weight: normal; - margin-left: .5rem; - display: inline-block; } + margin-left: .5rem; } /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul { - list-style: circle inside; } + list-style: circle inside; } ol { - list-style: decimal inside; } + list-style: decimal inside; } ol, ul { margin-top: 0; - padding-left: 0; } + padding-left: 0; } ul ul, ul ol, ol ol, ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } li { - margin-bottom: 1rem; } + margin-bottom: 1rem; } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; - white-space: nowrap; } + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; + white-space: nowrap; } pre > code { display: block; padding: 1rem 1.5rem; @@ -274,28 +294,27 @@ pre > code { –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } th:first-child, td:first-child { - padding-left: 0; } + padding-left: 0; } th:last-child, td:last-child { - padding-right: 0; } + padding-right: 0; } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { - margin-bottom: 1rem; } + margin-bottom: 1rem; } input, textarea, select, fieldset { - margin-bottom: 1.5rem; } -p, + margin-bottom: 1.5rem; } pre, blockquote, form, @@ -306,7 +325,9 @@ p, ul, ol, form { - margin-bottom: 2.5rem; } + margin-bottom: 2.5rem; } +p { + margin-top: 0; } @@ -319,9 +340,9 @@ form { max-width: 100%; box-sizing: border-box; } .u-pull-right { - float: right; } + float: right; } .u-pull-left { - float: left; } + float: left; } /* Misc @@ -340,7 +361,7 @@ hr { .container:after, .row:after, .u-cf { - content: ""; + content: ""; display: table; clear: both; } @@ -358,7 +379,7 @@ there. /* Larger than mobile */ @media (min-width: 400px) {} -/* Larger than phablet */ +/* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @@ -368,19 +389,4 @@ there. @media (min-width: 1000px) {} /* Larger than Desktop HD */ -@media (min-width: 1200px) {} - -/* Smaller than Desktop HD */ -@media (max-width: 1199px) {} - -/* Smaller than desktop */ -@media (max-width: 999px) {} - -/* Smaller than tablet */ -@media (max-width: 749px) {} - -/* Smaller than phablet */ -@media (max-width: 549px) {} - -/* Smaller than mobile */ -@media (max-width: 399px) {} \ No newline at end of file +@media (min-width: 1200px) {} \ No newline at end of file