add raleway font in dir

This commit is contained in:
Alexandre Pereira 2018-03-18 20:38:16 +00:00
parent 88f03612b0
commit 9071d97a77
15 changed files with 296 additions and 241 deletions

41
css/fonts.css Normal file
View File

@ -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')
}

186
css/skeleton.css vendored
View File

@ -25,6 +25,7 @@
- Media Queries - Media Queries
*/ */
@import "fonts.css";
/* Grid /* Grid
*/ */
@ -34,30 +35,33 @@
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; } box-sizing: border-box;
}
.column, .column,
.columns { .columns {
width: 100%; width: 100%;
float: left; float: left;
box-sizing: border-box; } box-sizing: border-box;
}
/* For devices larger than 400px */ /* For devices larger than 400px */
@media (min-width: 400px) { @media screen and (min-width: 400px) {
.container { .container {
width: 85%; width: 85%;
padding: 0; } padding: 0;
}
} }
/* For devices larger than 550px */ /* For devices larger than 550px */
@media (min-width: 550px) { @media (min-width: 550px) {
.container { .container { width: 80%; }
width: 80%; }
.column, .column,
.columns { .columns { margin-left: 4%; }
margin-left: 4%; }
.column:first-child, .column:first-child,
.columns:first-child { .columns:first-child { margin-left: 0; }
margin-left: 0; }
.one.column, .one.column,
.one.columns { width: 4.66666666667%; } .one.columns { width: 4.66666666667%; }
@ -72,10 +76,8 @@
.ten.columns { width: 82.6666666667%; } .ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; } .eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; } .twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; } .one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; } .two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; } .one-half.column { width: 48%; }
/* Offsets */ /* Offsets */
@ -101,15 +103,12 @@
.offset-by-ten.columns { margin-left: 86.6666666667%; } .offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column, .offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; } .offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column, .offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; } .offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column, .offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; } .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column, .offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; } .offset-by-one-half.columns { margin-left: 52%; }
} }
@ -118,22 +117,24 @@
/* NOTE /* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */ are based on 10px sizing. So basically 1.5rem = 15px :) */
html { html { font-size: 62.5%; }
font-size: 62.5%; }
body { body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6; line-height: 1.6;
font-weight: 400; font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222; } color: #222;
}
/* Typography /* Typography
*/ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 2rem; margin-bottom: 2rem;
font-weight: 300; } font-weight: 300;
}
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; 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; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
@ -142,7 +143,7 @@ h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Larger than phablet */ /* Larger than phablet */
@media (min-width: 550px) { @media screen and (min-width: 550px) {
h1 { font-size: 5.0rem; } h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; } h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; } h3 { font-size: 3.6rem; }
@ -151,17 +152,14 @@ h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
h6 { font-size: 1.5rem; } h6 { font-size: 1.5rem; }
} }
p { p { margin-top: 0; }
margin-top: 0; }
/* Links /* Links
*/ */
a { a { color: #1EAEDB; }
color: #1EAEDB; }
a:hover {
color: #0FA0CE; }
a:hover,
a:focus { color: #0FA0CE; }
/* Buttons /* Buttons
*/ */
@ -186,7 +184,9 @@ input[type="button"] {
border-radius: 4px; border-radius: 4px;
border: 1px solid #bbb; border: 1px solid #bbb;
cursor: pointer; cursor: pointer;
box-sizing: border-box; } box-sizing: border-box;
}
.button:hover, .button:hover,
button:hover, button:hover,
input[type="submit"]:hover, input[type="submit"]:hover,
@ -199,7 +199,9 @@ input[type="reset"]:focus,
input[type="button"]:focus { input[type="button"]:focus {
color: #333; color: #333;
border-color: #888; border-color: #888;
outline: 0; } outline: 0;
}
.button.button-primary, .button.button-primary,
button.button-primary, button.button-primary,
input[type="submit"].button-primary, input[type="submit"].button-primary,
@ -207,7 +209,9 @@ input[type="reset"].button-primary,
input[type="button"].button-primary { input[type="button"].button-primary {
color: #FFF; color: #FFF;
background-color: #33C3F0; background-color: #33C3F0;
border-color: #33C3F0; } border-color: #33C3F0;
}
.button.button-primary:hover, .button.button-primary:hover,
button.button-primary:hover, button.button-primary:hover,
input[type="submit"].button-primary:hover, input[type="submit"].button-primary:hover,
@ -220,7 +224,8 @@ input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus { input[type="button"].button-primary:focus {
color: #FFF; color: #FFF;
background-color: #1EAEDB; background-color: #1EAEDB;
border-color: #1EAEDB; } border-color: #1EAEDB;
}
/* Forms /* Forms
@ -240,7 +245,9 @@ select {
border: 1px solid #D1D1D1; border: 1px solid #D1D1D1;
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
box-sizing: border-box; } box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */ /* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="email"],
input[type="number"], input[type="number"],
@ -252,11 +259,15 @@ input[type="password"],
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; } appearance: none;
}
textarea { textarea {
min-height: 65px; min-height: 65px;
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; } padding-bottom: 6px;
}
input[type="email"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="search"]:focus,
@ -267,41 +278,51 @@ input[type="password"]:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border: 1px solid #33C3F0; border: 1px solid #33C3F0;
outline: 0; } outline: 0;
}
label, label,
legend { legend {
display: block; display: block;
margin-bottom: .5rem; margin-bottom: .5rem;
font-weight: 600; } font-weight: 600;
}
fieldset { fieldset {
padding: 0; padding: 0;
border-width: 0; } border-width: 0;
}
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] { display: inline; }
display: inline; }
label > .label-body { label > .label-body {
display: inline-block; display: inline-block;
margin-left: .5rem; margin-left: .5rem;
font-weight: normal; } font-weight: normal;
}
/* Lists /* Lists
*/ */
ul { ul { list-style: circle inside; }
list-style: circle inside; }
ol { ol { list-style: decimal inside; }
list-style: decimal inside; }
ol, ul { ol, ul {
padding-left: 0; padding-left: 0;
margin-top: 0; } margin-top: 0;
}
ul ul, ul ul,
ul ol, ul ol,
ol ol, ol ol,
ol ul { ol ul {
margin: 1.5rem 0 1.5rem 3rem; margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; } font-size: 90%;
li { }
margin-bottom: 1rem; }
li { margin-bottom: 1rem; }
/* Code /* Code
@ -313,12 +334,14 @@ code {
white-space: nowrap; white-space: nowrap;
background: #F1F1F1; background: #F1F1F1;
border: 1px solid #E1E1E1; border: 1px solid #E1E1E1;
border-radius: 4px; } border-radius: 4px;
}
pre > code { pre > code {
display: block; display: block;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
white-space: pre; } white-space: pre;
}
/* Tables /* Tables
*/ */
@ -326,25 +349,25 @@ th,
td { td {
padding: 12px 15px; padding: 12px 15px;
text-align: left; text-align: left;
border-bottom: 1px solid #E1E1E1; } border-bottom: 1px solid #E1E1E1;
th:first-child, }
td:first-child {
padding-left: 0; }
th:last-child,
td:last-child {
padding-right: 0; }
th:first-child,
td:first-child { padding-left: 0; }
th:last-child,
td:last-child { padding-right: 0; }
/* Spacing /* Spacing
*/ */
button, button,
.button { .button { margin-bottom: 1rem; }
margin-bottom: 1rem; }
input, input,
textarea, textarea,
select, select,
fieldset { fieldset { margin-bottom: 1.5rem; }
margin-bottom: 1.5rem; }
pre, pre,
blockquote, blockquote,
dl, dl,
@ -353,23 +376,23 @@ table,
p, p,
ul, ul,
ol, ol,
form { form { margin-bottom: 2.5rem; }
margin-bottom: 2.5rem; }
/* Utilities /* Utilities
*/ */
.u-full-width { .u-full-width {
width: 100%; width: 100%;
box-sizing: border-box; } box-sizing: border-box;
}
.u-max-full-width { .u-max-full-width {
max-width: 100%; max-width: 100%;
box-sizing: border-box; } box-sizing: border-box;
.u-pull-right { }
float: right; }
.u-pull-left {
float: left; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }
/* Misc /* Misc
*/ */
@ -377,8 +400,8 @@ hr {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 3.5rem; margin-bottom: 3.5rem;
border-width: 0; border-width: 0;
border-top: 1px solid #E1E1E1; } border-top: 1px solid #E1E1E1;
}
/* Clearing /* Clearing
*/ */
@ -389,8 +412,8 @@ hr {
.u-cf { .u-cf {
content: ""; content: "";
display: table; display: table;
clear: both; } clear: both;
}
/* Media Queries /* Media Queries
*/ */
@ -401,18 +424,17 @@ on small devices, paste the mobile query code up in the buttons section and styl
there. there.
*/ */
/* Larger than mobile */ /* Larger than mobile */
@media (min-width: 400px) {} @media screen and (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */ /* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {} @media screen and (min-width: 550px) {}
/* Larger than tablet */ /* Larger than tablet */
@media (min-width: 750px) {} @media screen and (min-width: 750px) {}
/* Larger than desktop */ /* Larger than desktop */
@media (min-width: 1000px) {} @media screen and (min-width: 1000px) {}
/* Larger than Desktop HD */ /* Larger than Desktop HD */
@media (min-width: 1200px) {} @media screen and (min-width: 1200px) {}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Basic Page Needs <!-- Basic Page Needs
--> -->
@ -13,24 +13,18 @@
--> -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT <!-- Favicon
--> -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"> <link rel="icon" type="image/png" href="images/favicon.png">
<!-- CSS <!-- CSS
--> -->
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css"> <link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon </head>
--> <body>
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
-->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="one-half column" style="margin-top: 25%"> <div class="one-half column" style="margin-top: 25%">
@ -40,7 +34,5 @@
</div> </div>
</div> </div>
<!-- End Document </body>
-->
</body>
</html> </html>