implement klavika, open sans

This commit is contained in:
Jason Costello 2017-02-27 16:54:39 -08:00
parent 9de8545875
commit 6906f6b2ef
7 changed files with 22 additions and 47 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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