diff --git a/css/custom.css b/css/custom.css index c6af9e2..cfbb667 100644 --- a/css/custom.css +++ b/css/custom.css @@ -54,7 +54,6 @@ .code-example-body { white-space: pre; word-wrap: break-word } - .example { position: relative; margin-top: 4rem; } @@ -82,7 +81,6 @@ right: 5px; bottom: 5px; left: 5px; } - .navbar { display: none; } diff --git a/dist/css/skeleton.css b/dist/css/skeleton.css index 2cd5d2b..3a8bd66 100644 --- a/dist/css/skeleton.css +++ b/dist/css/skeleton.css @@ -1,10 +1,10 @@ /* -* Skeleton V2.0.1 +* Skeleton V2.0.2 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 12/11/2014 +* 12/15/2014 */ @@ -30,64 +30,85 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative; - width: 80%; + width: 100%; max-width: 960px; margin: 0 auto; - padding: 0; } -.container .column, -.container .columns { - float: left; - width: 100%; + padding: 0 20px; box-sizing: border-box; } -.row { - margin-bottom: 2rem; } -.row .column:first-child, -.row .columns:first-child { - margin-left: 0; } +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } +} /* For devices larger than 550px */ @media (min-width: 550px) { - - .container .column, - .container .columns { + .container { + width: 80%; } + .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%; } } @@ -110,9 +131,9 @@ body { /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { - font-weight: 300; margin-top: 0; - margin-bottom: 2rem; } + margin-bottom: 2rem; + font-weight: 300; } 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; } @@ -150,21 +171,21 @@ input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; - background-color: transparent; - border-radius: 4px; + height: 38px; + padding: 0 30px; color: #555; text-align: center; 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; + text-decoration: none; white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; box-sizing: border-box; } .button:hover, button:hover, @@ -176,8 +197,8 @@ button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { - border-color: #888; color: #333; + border-color: #888; outline: 0; } .button.button-primary, button.button-primary, @@ -185,8 +206,8 @@ input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; - border-color: #33C3F0; - background-color: #33C3F0; } + background-color: #33C3F0; + border-color: #33C3F0; } .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, @@ -197,9 +218,9 @@ button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { + color: #FFF; background-color: #1EAEDB; - border-color: #1EAEDB; - color: #FFF; } + border-color: #1EAEDB; } /* Forms @@ -207,19 +228,25 @@ input[type="button"].button-primary:focus { input[type="email"], input[type="search"], input[type="text"], +input[type="tel"], +input[type="url"], input[type="password"], textarea, select { - border: 1px solid #D1D1D1; - height: 36px; + height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; - background: #fff; } -/* Removes awkard default styles on some inputs */ + box-sizing: border-box; } +/* Removes awkard default styles on some inputs for iOS */ input[type="email"], input[type="search"], input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; @@ -232,6 +259,8 @@ textarea { input[type="email"]:focus, input[type="search"]:focus, input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { @@ -240,18 +269,18 @@ select:focus { label, legend { display: block; - font-weight: 600; - margin-bottom: .5rem; } + margin-bottom: .5rem; + font-weight: 600; } fieldset { - border-width: 0; - padding: 0; } + padding: 0; + border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; - font-weight: normal; - margin-left: .5rem; } + margin-left: .5rem; + font-weight: normal; } /* Lists @@ -261,8 +290,8 @@ ul { ol { list-style: decimal inside; } ol, ul { - margin-top: 0; - padding-left: 0; } + padding-left: 0; + margin-top: 0; } ul ul, ul ol, ol ol, @@ -279,10 +308,10 @@ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; + white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; - border-radius: 4px; - white-space: nowrap; } + border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; @@ -387,4 +416,4 @@ there. @media (min-width: 1000px) {} /* Larger than Desktop HD */ -@media (min-width: 1200px) {} \ No newline at end of file +@media (min-width: 1200px) {}