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
*/
@import "fonts.css";
/* Grid
*/
@ -34,30 +35,33 @@
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
@media screen and (min-width: 400px) {
.container {
width: 85%;
padding: 0; }
padding: 0;
}
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 80%; }
.container { width: 80%; }
.column,
.columns {
margin-left: 4%; }
.columns { margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.columns:first-child { margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
@ -72,10 +76,8 @@
.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 */
@ -101,15 +103,12 @@
.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%; }
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; }
color: #222;
}
/* Typography
*/
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300; }
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,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; }
/* Larger than phablet */
@media (min-width: 550px) {
@media screen and (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
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; }
}
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
*/
@ -186,7 +184,9 @@ input[type="button"] {
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box; }
box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
@ -199,7 +199,9 @@ input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0; }
outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
@ -207,7 +209,9 @@ input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0; }
border-color: #33C3F0;
}
.button.button-primary:hover,
button.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 {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB; }
border-color: #1EAEDB;
}
/* Forms
@ -240,7 +245,9 @@ select {
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
@ -252,11 +259,15 @@ input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
@ -267,41 +278,51 @@ input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0; }
outline: 0;
}
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600; }
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 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; }
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; }
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; }
font-size: 90%;
}
li { margin-bottom: 1rem; }
/* Code
@ -313,12 +334,14 @@ code {
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px; }
border-radius: 4px;
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre; }
white-space: pre;
}
/* Tables
*/
@ -326,25 +349,25 @@ 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; }
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,23 +376,23 @@ table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem; }
form { margin-bottom: 2.5rem; }
/* Utilities
*/
.u-full-width {
width: 100%;
box-sizing: border-box; }
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; }
box-sizing: border-box;
}
.u-pull-right { float: right; }
.u-pull-left { float: left; }
/* Misc
*/
@ -377,8 +400,8 @@ hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1; }
border-top: 1px solid #E1E1E1;
}
/* Clearing
*/
@ -389,8 +412,8 @@ hr {
.u-cf {
content: "";
display: table;
clear: both; }
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) {}

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

@ -13,24 +13,18 @@
-->
<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
-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
-->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
-->
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 25%">
@ -40,7 +34,5 @@
</div>
</div>
<!-- End Document
-->
</body>
</html>