BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

add raleway font in dir

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

432
css/skeleton.css vendored
View File

@ -25,91 +25,90 @@
- Media Queries - Media Queries
*/ */
@import "fonts.css";
/* Grid /* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container { .container {
position: relative; position: relative;
width: 100%; width: 100%;
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,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column, .column,
.one.columns { width: 4.66666666667%; } .columns { margin-left: 4%; }
.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%; } .column:first-child,
.two-thirds.column { width: 65.3333333333%; } .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 */ /* Offsets */
.offset-by-one.column, .offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; } .offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column, .offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; } .offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column, .offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; } .offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column, .offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; } .offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column, .offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; } .offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column, .offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; } .offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column, .offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; } .offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column, .offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; } .offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column, .offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; } .offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column, .offset-by-ten.column,
.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.columns { margin-left: 52%; }
.offset-by-one-half.column,
.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 {
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; }
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 /* 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,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; } 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; }
h4 { font-size: 3.0rem; } h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; } h5 { font-size: 2.4rem; }
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
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
@ -170,23 +168,25 @@ button,
input[type="submit"], input[type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"] { input[type="button"] {
display: inline-block; display: inline-block;
height: 38px; height: 38px;
padding: 0 30px; padding: 0 30px;
color: #555; color: #555;
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
line-height: 38px; line-height: 38px;
letter-spacing: .1rem; letter-spacing: .1rem;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
background-color: transparent; background-color: transparent;
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,
@ -197,17 +197,21 @@ button:focus,
input[type="submit"]:focus, input[type="submit"]:focus,
input[type="reset"]:focus, 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,
input[type="reset"].button-primary, 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,
@ -218,9 +222,10 @@ button.button-primary:focus,
input[type="submit"].button-primary:focus, input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus, 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
@ -234,13 +239,15 @@ input[type="url"],
input[type="password"], input[type="password"],
textarea, textarea,
select { select {
height: 38px; height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff; background-color: #fff;
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"],
@ -250,13 +257,17 @@ input[type="tel"],
input[type="url"], input[type="url"],
input[type="password"], 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,
@ -266,85 +277,97 @@ input[type="url"]:focus,
input[type="password"]:focus, 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
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
code { code {
padding: .2rem .5rem; padding: .2rem .5rem;
margin: 0 .2rem; margin: 0 .2rem;
font-size: 90%; font-size: 90%;
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 { }
display: block;
padding: 1rem 1.5rem;
white-space: pre; }
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Tables /* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
th, 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,32 +376,32 @@ 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 { }
max-width: 100%;
box-sizing: border-box; }
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right { float: right; }
.u-pull-left { float: left; }
/* Misc /* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
hr { 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
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
@ -387,10 +410,10 @@ hr {
.container:after, .container:after,
.row:after, .row:after,
.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) {}

BIN
fonts/raleway/Raleway-Bold.woff Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-BoldItalic.woff Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-Italic.woff Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-Light.woff Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-Light.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-LightItalic.woff Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-Regular.woff Normal file
View File

Binary file not shown.

BIN
fonts/raleway/Raleway-Regular.woff2 Normal file
View File

Binary file not shown.

64
index.html
View File

@ -1,46 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Basic Page Needs <!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8"> <meta charset="utf-8">
<title>Your page title here :)</title> <title>Your page title here :)</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Mobile Specific Metas <!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<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> <div class="container">
<body> <div class="row">
<div class="one-half column" style="margin-top: 25%">
<h4>Basic Page</h4>
<p>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 <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
</div>
</div>
</div>
<!-- Primary Page Layout </body>
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 25%">
<h4>Basic Page</h4>
<p>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 <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html> </html>