diff --git a/css/skeleton.css b/css/skeleton.css index e7b7d1a..77e39d9 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -29,16 +29,18 @@ /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { + margin: 0 auto; + max-width: 960px; + padding: 0; position: relative; - width: 80%; - max-width: 960px; - margin: 0 auto; - padding: 0; } + width: 80%; } + .container .column, .container .columns { + box-sizing: border-box; float: left; - width: 100%; - box-sizing: border-box; } + width: 100%; } + .row { margin-bottom: 2rem; } .row .column:first-child, @@ -89,7 +91,6 @@ .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; } .container .offset-by-one-half.column { margin-left: 52%; } - } @@ -100,20 +101,22 @@ 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%; } + body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; + color: #222; 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 */ + font-weight: 400; + line-height: 1.6; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { font-weight: 300; - margin-top: 0; - margin-bottom: 2rem; } + margin-bottom: 2rem; + margin-top: 0; } + 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; } @@ -139,6 +142,7 @@ p { –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { color: #1EAEDB; } + a:hover { color: #0FA0CE; } @@ -150,54 +154,57 @@ button, input[type="submit"], input[type="reset"], input[type="button"] { - display: inline-block; background-color: transparent; + border: 1px solid #bbb; border-radius: 4px; + box-sizing: border-box; color: #555; - text-align: center; + cursor: pointer; + display: inline-block; font-size: 11px; font-weight: 600; - text-decoration: none; - cursor: pointer; - border: 1px solid #bbb; height: 38px; line-height: 38px; - padding: 0 30px; letter-spacing: .1rem; - text-transform: uppercase; - white-space: nowrap; - box-sizing: border-box; } + padding: 0 30px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; } + .button:hover, button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, input[type="button"]:hover, +input[type="reset"]:hover, +input[type="submit"]:hover, .button:focus, button:focus, -input[type="submit"]:focus, +input[type="button"]:focus input[type="reset"]:focus, -input[type="button"]:focus { +input[type="submit"]:focus { border-color: #888; color: #333; outline: 0; } + .button.button-primary, button.button-primary, -input[type="submit"].button-primary, +input[type="button"].button-primary, input[type="reset"].button-primary, -input[type="button"].button-primary { - color: #FFF; +input[type="submit"].button-primary { + background-color: #33C3F0; border-color: #33C3F0; - background-color: #33C3F0; } + color: #FFF; } + .button.button-primary:hover, button.button-primary:hover, -input[type="submit"].button-primary:hover, -input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="submit"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, -input[type="submit"].button-primary:focus, +input[type="button"].button-primary:focus, input[type="reset"].button-primary:focus, -input[type="button"].button-primary:focus { +input[type="submit"].button-primary:focus { background-color: #1EAEDB; border-color: #1EAEDB; color: #FFF; } @@ -206,49 +213,55 @@ input[type="button"].button-primary:focus { /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], +input[type="password"], input[type="search"], input[type="text"], -input[type="password"], -textarea, -select { +select, +textarea { + background: #fff; 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; } + height: 36px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ } + /* Removes awkard default styles on some inputs */ input[type="email"], input[type="search"], input[type="text"], textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; } + textarea { min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } + padding-bottom: 6px; + padding-top: 6px; } + input[type="email"]:focus, +input[type="password"]:focus, input[type="search"]:focus, input[type="text"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { +select:focus, +textarea:focus { border: 1px solid #33C3F0; outline: 0; } + label, legend { display: block; font-weight: 600; margin-bottom: .5rem; } + fieldset { border-width: 0; padding: 0; } + input[type="checkbox"], input[type="radio"] { display: inline; } + label > .label-body { display: inline-block; font-weight: normal; @@ -257,19 +270,23 @@ label > .label-body { /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { - list-style: circle inside; } ol { list-style: decimal inside; } + +ul { + list-style: circle inside; } + ol, ul { margin-top: 0; padding-left: 0; } + +ol ol, +ol ul, ul ul, -ul ol, -ol ol, -ol ul { +ul ol { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } + li { margin-bottom: 1rem; } @@ -277,13 +294,14 @@ li { /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; + font-size: 90%; + margin: 0 .2rem; + padding: .2rem .5rem; white-space: nowrap; } + pre > code { display: block; padding: 1rem 1.5rem; @@ -294,12 +312,14 @@ pre > code { –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td { + border-bottom: 1px solid #E1E1E1; padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } + text-align: left; } + th:first-child, td:first-child { padding-left: 0; } + th:last-child, td:last-child { padding-right: 0; } @@ -310,37 +330,42 @@ td:last-child { button, .button { margin-bottom: 1rem; } + +fieldset, input, -textarea, select, -fieldset { +textarea + { margin-bottom: 1.5rem; } -pre, + blockquote, -form, dl, figure, -table, -p, -ul, +form, ol, -form { +p, +pre, +table, +ul { margin-bottom: 2.5rem; } + p { margin-top: 0; } - /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { - width: 100%; - box-sizing: border-box; } + box-sizing: border-box; + width: 100%; } + .u-max-full-width { - max-width: 100%; - box-sizing: border-box; } + box-sizing: border-box; + max-width: 100%; } + .u-pull-right { float: right; } + .u-pull-left { float: left; } @@ -348,11 +373,11 @@ p { /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; border-top: 1px solid #E1E1E1; -} + border-width: 0; + margin-bottom: 3.5rem; + margin-top: 3rem; } + /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -361,9 +386,9 @@ hr { .container:after, .row:after, .u-cf { + clear: both; content: ""; - display: table; - clear: both; } + display: table; } /* Media Queries