diff --git a/css/fonts.css b/css/fonts.css new file mode 100644 index 0000000..1426f6e --- /dev/null +++ b/css/fonts.css @@ -0,0 +1,41 @@ +@font-face { + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: 700; + src: url(../fonts/raleway/Raleway-Bold.woff2) format('woff2'), url(../fonts/raleway/Raleway-Bold.woff) format('woff') +} + +@font-face { + font-family: 'Raleway', sans-serif; + font-style: italic; + font-weight: 700; + src: url(../fonts/raleway/Raleway-BoldItalic.woff2) format('woff2'), url(../fonts/raleway/Raleway-BoldItalic.woff) format('woff') +} + +@font-face { + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: 400; + src: url(../fonts/raleway/Raleway-Regular.woff2) format('woff2'), url(../fonts/raleway/Raleway-Regular.woff) format('woff') +} + +@font-face { + font-family: 'Raleway', sans-serif; + font-style: italic; + font-weight: 400; + src: url(../fonts/raleway/Raleway-Italic.woff2) format('woff2'), url(../fonts/raleway/Raleway-Italic.woff) format('woff') +} + +@font-face { + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: 300; + src: url(../fonts/raleway/Raleway-Light.woff2) format('woff2'), url(../fonts/raleway/Raleway-Light.woff) format('woff') +} + +@font-face { + font-family: 'Raleway', sans-serif; + font-style: italic; + font-weight: 300; + src: url(../fonts/raleway/Raleway-LightItalic.woff2) format('woff2'), url(../fonts/raleway/Raleway-LightItalic.woff) format('woff') +} diff --git a/css/skeleton.css b/css/skeleton.css index f28bf6c..37933ee 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -25,91 +25,90 @@ - Media Queries */ +@import "fonts.css"; /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} + .column, .columns { - width: 100%; - float: left; - box-sizing: border-box; } + width: 100%; + float: left; + box-sizing: border-box; +} /* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } +@media screen and (min-width: 400px) { + .container { + width: 85%; + padding: 0; + } } /* For devices larger than 550px */ @media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 4%; } - .column:first-child, - .columns:first-child { - margin-left: 0; } + .container { width: 80%; } - .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; } + .column, + .columns { margin-left: 4%; } - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } + .column:first-child, + .columns:first-child { margin-left: 0; } - .one-half.column { width: 48%; } + .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; } + .one-third.column { width: 30.6666666667%; } + .two-thirds.column { width: 65.3333333333%; } + .one-half.column { width: 48%; } /* Offsets */ - .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%; } - - .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%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - + .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%; } + .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%; } + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } } @@ -118,22 +117,24 @@ /* NOTE 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; - font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } +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; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; +} /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 2rem; - font-weight: 300; } + margin-top: 0; + 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; } @@ -142,26 +143,23 @@ h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } /* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } +@media screen and (min-width: 550px) { + h1 { font-size: 5.0rem; } + h2 { font-size: 4.2rem; } + h3 { font-size: 3.6rem; } + h4 { font-size: 3.0rem; } + h5 { font-size: 2.4rem; } + h6 { font-size: 1.5rem; } } -p { - margin-top: 0; } - +p { margin-top: 0; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { - color: #1EAEDB; } -a:hover { - color: #0FA0CE; } +a { color: #1EAEDB; } +a:hover, +a:focus { color: #0FA0CE; } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -170,23 +168,25 @@ button, input[type="submit"], input[type="reset"], input[type="button"] { - display: inline-block; - height: 38px; - padding: 0 30px; - color: #555; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - 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; } + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + 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, input[type="submit"]:hover, @@ -197,17 +197,21 @@ button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { - color: #333; - border-color: #888; - outline: 0; } + color: #333; + border-color: #888; + outline: 0; +} + .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { - color: #FFF; - background-color: #33C3F0; - border-color: #33C3F0; } + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; +} + .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, @@ -218,9 +222,10 @@ 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; + background-color: #1EAEDB; + border-color: #1EAEDB; +} /* Forms @@ -234,13 +239,15 @@ input[type="url"], input[type="password"], textarea, select { - 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; - box-sizing: border-box; } + 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; + box-sizing: border-box; +} + /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], @@ -250,13 +257,17 @@ input[type="tel"], input[type="url"], input[type="password"], textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } + -webkit-appearance: none; + -moz-appearance: none; + 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="number"]:focus, input[type="search"]:focus, @@ -266,85 +277,97 @@ input[type="url"]: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; - margin-bottom: .5rem; - font-weight: 600; } + display: block; + margin-bottom: .5rem; + font-weight: 600; +} + fieldset { - padding: 0; - border-width: 0; } + padding: 0; + border-width: 0; +} + input[type="checkbox"], -input[type="radio"] { - display: inline; } +input[type="radio"] { display: inline; } + label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; } + display: inline-block; + margin-left: .5rem; + font-weight: normal; +} /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { - list-style: circle inside; } -ol { - list-style: decimal inside; } +ul { list-style: circle inside; } + +ol { list-style: decimal inside; } + ol, ul { - padding-left: 0; - margin-top: 0; } + padding-left: 0; + margin-top: 0; +} + ul ul, ul ol, ol ol, ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } -li { - margin-bottom: 1rem; } + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; +} + +li { margin-bottom: 1rem; } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; +} +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; +} /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } -th:first-child, -td:first-child { - padding-left: 0; } -th:last-child, -td:last-child { - padding-right: 0; } + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; +} +th:first-child, +td:first-child { padding-left: 0; } + +th:last-child, +td:last-child { padding-right: 0; } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, -.button { - margin-bottom: 1rem; } +.button { margin-bottom: 1rem; } + input, textarea, select, -fieldset { - margin-bottom: 1.5rem; } +fieldset { margin-bottom: 1.5rem; } + pre, blockquote, dl, @@ -353,32 +376,32 @@ table, p, ul, ol, -form { - margin-bottom: 2.5rem; } - +form { margin-bottom: 2.5rem; } /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } + width: 100%; + box-sizing: border-box; +} +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; +} + +.u-pull-right { float: right; } + +.u-pull-left { float: left; } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; +} /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -387,10 +410,10 @@ hr { .container:after, .row:after, .u-cf { - content: ""; - display: table; - clear: both; } - + content: ""; + display: table; + clear: both; +} /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -401,18 +424,17 @@ on small devices, paste the mobile query code up in the buttons section and styl there. */ - /* Larger than mobile */ -@media (min-width: 400px) {} +@media screen and (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ -@media (min-width: 550px) {} +@media screen and (min-width: 550px) {} /* Larger than tablet */ -@media (min-width: 750px) {} +@media screen and (min-width: 750px) {} /* Larger than desktop */ -@media (min-width: 1000px) {} +@media screen and (min-width: 1000px) {} /* Larger than Desktop HD */ -@media (min-width: 1200px) {} +@media screen and (min-width: 1200px) {} diff --git a/fonts/raleway/Raleway-Bold.woff b/fonts/raleway/Raleway-Bold.woff new file mode 100644 index 0000000..4e9c4e6 Binary files /dev/null and b/fonts/raleway/Raleway-Bold.woff differ diff --git a/fonts/raleway/Raleway-Bold.woff2 b/fonts/raleway/Raleway-Bold.woff2 new file mode 100644 index 0000000..92cade2 Binary files /dev/null and b/fonts/raleway/Raleway-Bold.woff2 differ diff --git a/fonts/raleway/Raleway-BoldItalic.woff b/fonts/raleway/Raleway-BoldItalic.woff new file mode 100644 index 0000000..2db96fb Binary files /dev/null and b/fonts/raleway/Raleway-BoldItalic.woff differ diff --git a/fonts/raleway/Raleway-BoldItalic.woff2 b/fonts/raleway/Raleway-BoldItalic.woff2 new file mode 100644 index 0000000..cc091e6 Binary files /dev/null and b/fonts/raleway/Raleway-BoldItalic.woff2 differ diff --git a/fonts/raleway/Raleway-Italic.woff b/fonts/raleway/Raleway-Italic.woff new file mode 100644 index 0000000..bf1b50e Binary files /dev/null and b/fonts/raleway/Raleway-Italic.woff differ diff --git a/fonts/raleway/Raleway-Italic.woff2 b/fonts/raleway/Raleway-Italic.woff2 new file mode 100644 index 0000000..b4a4a7a Binary files /dev/null and b/fonts/raleway/Raleway-Italic.woff2 differ diff --git a/fonts/raleway/Raleway-Light.woff b/fonts/raleway/Raleway-Light.woff new file mode 100644 index 0000000..ab48a3e Binary files /dev/null and b/fonts/raleway/Raleway-Light.woff differ diff --git a/fonts/raleway/Raleway-Light.woff2 b/fonts/raleway/Raleway-Light.woff2 new file mode 100644 index 0000000..d26abc5 Binary files /dev/null and b/fonts/raleway/Raleway-Light.woff2 differ diff --git a/fonts/raleway/Raleway-LightItalic.woff b/fonts/raleway/Raleway-LightItalic.woff new file mode 100644 index 0000000..c99725e Binary files /dev/null and b/fonts/raleway/Raleway-LightItalic.woff differ diff --git a/fonts/raleway/Raleway-LightItalic.woff2 b/fonts/raleway/Raleway-LightItalic.woff2 new file mode 100644 index 0000000..8acc067 Binary files /dev/null and b/fonts/raleway/Raleway-LightItalic.woff2 differ diff --git a/fonts/raleway/Raleway-Regular.woff b/fonts/raleway/Raleway-Regular.woff new file mode 100644 index 0000000..31ff506 Binary files /dev/null and b/fonts/raleway/Raleway-Regular.woff differ diff --git a/fonts/raleway/Raleway-Regular.woff2 b/fonts/raleway/Raleway-Regular.woff2 new file mode 100644 index 0000000..65b1b36 Binary files /dev/null and b/fonts/raleway/Raleway-Regular.woff2 differ diff --git a/index.html b/index.html index c81c190..7dd8ae6 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,38 @@ - + - - - Your page title here :) - - + + + Your page title here :) + + - - + + - - + + - - - + + + - - + + - - +
+
+
+

Basic Page

+

This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.

+
+
+
- -
-
-
-

Basic Page

-

This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.

-
-
-
- - - +