implement klavika, open sans
This commit is contained in:
parent
9de8545875
commit
6906f6b2ef
|
@ -1,5 +1,5 @@
|
||||||
@mixin button {
|
@mixin button {
|
||||||
font-family: $mono;
|
font-family: $font-family-open-sans;
|
||||||
height: $button-height;
|
height: $button-height;
|
||||||
line-height: $button-height;
|
line-height: $button-height;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
@ -72,7 +72,6 @@ header .header {
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-family: $serif;
|
|
||||||
font-size: 44px;
|
font-size: 44px;
|
||||||
color: #7bc6b1;
|
color: #7bc6b1;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
@ -181,7 +180,7 @@ header .header {
|
||||||
color: #b1d631;
|
color: #b1d631;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-family: $mono;
|
font-family: $font-family-mono;
|
||||||
text-shadow: 0 0 0;
|
text-shadow: 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -203,7 +202,6 @@ header .header {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
font-family: $serif;
|
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: (30/17) !important;
|
line-height: (30/17) !important;
|
||||||
margin-bottom: $baseline;
|
margin-bottom: $baseline;
|
||||||
|
@ -225,10 +223,8 @@ header .header {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.alert {
|
div.alert {
|
||||||
font-family: $serif;
|
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-left: -135px;
|
margin-left: -135px;
|
||||||
margin-right: -135px;
|
margin-right: -135px;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
|
|
|
@ -19,7 +19,7 @@ $border-dark: #333;
|
||||||
// base measures
|
// base measures
|
||||||
$baseline: 20px;
|
$baseline: 20px;
|
||||||
$base-font-size: 16px;
|
$base-font-size: 16px;
|
||||||
$base-line-height: 20px;
|
$base-line-height: 1.5;
|
||||||
$button-height: 60px;
|
$button-height: 60px;
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
|
@ -40,13 +40,13 @@ $sidebar-width: 250px;
|
||||||
|
|
||||||
|
|
||||||
//typography
|
//typography
|
||||||
$serif: 'myriad-pro', helvetica, Georgia, serif;
|
$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
$font-family-klavika: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
$mono: 'Inconsolata', 'courier new', courier, monospace;
|
$font-family-mono: 'Inconsolata', 'Monaco', 'courier new', courier, monospace;
|
||||||
|
|
||||||
.serif { font-family: $serif; }
|
.open-sans { font-family: $font-family-open-sans;}
|
||||||
.sans { font-family: $sans; }
|
.klavika { font-family: $font-family-klavika; }
|
||||||
.mono { font-family: $mono; }
|
.mono { font-family: $font-family-mono; }
|
||||||
|
|
||||||
.text-center { text-align: center !important; }
|
.text-center { text-align: center !important; }
|
||||||
.text-left { text-align: left !important; }
|
.text-left { text-align: left !important; }
|
||||||
|
@ -56,15 +56,6 @@ $mono: 'Inconsolata', 'courier new', courier, monospace;
|
||||||
|
|
||||||
.uppercase { text-transform: uppercase !important; }
|
.uppercase { text-transform: uppercase !important; }
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'HeimatStencil-SemiBold';
|
|
||||||
src: font-url('2772B2_0_0.eot');
|
|
||||||
src: font-url('2772B2_0_0.woff') format('woff'),
|
|
||||||
font-url('2772B2_0_0.ttf') format('truetype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
//color
|
//color
|
||||||
.dark-background {
|
.dark-background {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
|
|
|
@ -9,7 +9,7 @@ form, input, textarea, button {
|
||||||
-khtml-border-radius: 0;
|
-khtml-border-radius: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
font-family: $mono;
|
font-family: $font-family-mono;
|
||||||
font-size: $base-font-size;
|
font-size: $base-font-size;
|
||||||
line-height: 1.0;
|
line-height: 1.0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
$border: 1px solid $gray-dark;
|
$border: 1px solid $gray-dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: $mono;
|
font-family: $font-family-mono;
|
||||||
color: $gray-light;
|
color: $gray-light;
|
||||||
background-color: $sidebar-background-color;
|
background-color: $sidebar-background-color;
|
||||||
|
|
||||||
|
|
|
@ -17,19 +17,17 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
font-family: $sans;
|
font-family: $font-family-open-sans;
|
||||||
letter-spacing: 1px;
|
|
||||||
font-size: $base-font-size;
|
font-size: $base-font-size;
|
||||||
line-height: $base-line-height;
|
line-height: $base-line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
letter-spacing: 2px;
|
font-family: $font-family-klavika;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: $sans;
|
|
||||||
font-size: 70px;
|
font-size: 70px;
|
||||||
line-height: (80/70);
|
line-height: (80/70);
|
||||||
@include respond-to(mobile) {
|
@include respond-to(mobile) {
|
||||||
|
@ -39,7 +37,6 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-family: $sans;
|
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
line-height: (50/40);
|
line-height: (50/40);
|
||||||
|
|
||||||
|
@ -55,38 +52,31 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-family: $sans;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: (30/20);
|
line-height: (30/20);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-family: $mono;
|
font-family: $font-family-mono;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: (30/20);
|
line-height: (30/20);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-family: $sans;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: (22/16);
|
line-height: (22/16);
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-family: $mono;
|
font-family: $font-family-mono;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: (22/16);
|
line-height: (22/16);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: $serif;
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: (30/17);
|
|
||||||
letter-spacing: 1px;
|
|
||||||
|
|
||||||
&.large-text {
|
&.large-text {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: (35/20);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@ -121,10 +111,8 @@ dt {
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
font-family: $serif;
|
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -159,7 +147,7 @@ pre {
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
font-family: $mono;
|
font-family: $font-family-mono;
|
||||||
margin: ($baseline * 2) 0;
|
margin: ($baseline * 2) 0;
|
||||||
color: $gray-dark;
|
color: $gray-dark;
|
||||||
|
|
||||||
|
|
|
@ -13,12 +13,7 @@
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
<link rel="shortcut icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
|
<link rel="shortcut icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
|
||||||
<link rel="icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
|
<link rel="icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
|
||||||
<script type="text/javascript" src="//use.typekit.net/apr3jjs.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
Typekit.load();
|
|
||||||
} catch (e) {}
|
|
||||||
</script>
|
|
||||||
<!-- Google Tag Manager -->
|
<!-- Google Tag Manager -->
|
||||||
<script>
|
<script>
|
||||||
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||||
|
@ -28,6 +23,11 @@
|
||||||
})(window,document,'script','dataLayer','GTM-NR2SD7C');
|
})(window,document,'script','dataLayer','GTM-NR2SD7C');
|
||||||
</script>
|
</script>
|
||||||
<!-- End Google Tag Manager -->
|
<!-- End Google Tag Manager -->
|
||||||
|
|
||||||
|
<!-- Typekit script to import Klavika -->
|
||||||
|
<script src="https://use.typekit.net/wxf7mfi.js"></script>
|
||||||
|
<script>try{Typekit.load({ async: true });}catch(e){}</script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
|
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
|
||||||
<!-- Google Tag Manager (noscript) -->
|
<!-- Google Tag Manager (noscript) -->
|
||||||
|
|
Loading…
Reference in New Issue