Merge pull request #430 from pastelsky/typography

SpaceK33z · web-flow · commit 884160ab23da · 2016-11-27T10:20:33.000+01:00
Typography Improvements
diff --git a/assets/geomanist-medium.woff b/assets/geomanist-medium.woff
diff --git a/assets/geomanist-medium.woff2 b/assets/geomanist-medium.woff2
diff --git a/assets/geomanist-regular.woff b/assets/geomanist-regular.woff
diff --git a/assets/geomanist-regular.woff2 b/assets/geomanist-regular.woff2
diff --git a/components/navigation/navigation-style.scss b/components/navigation/navigation-style.scss
@@ -97,7 +97,6 @@
 
       width:0;
       font-size:14px;
-      font-family:'Cabin', 'Century Gothic', sans-serif;
       text-indent:0.5em;
       border-bottom:1px solid getColor(fiord);
       margin-right:0;
diff --git a/components/navigation/search-style.scss b/components/navigation/search-style.scss
@@ -37,14 +37,14 @@
     color: getColor(dusty-grey);
 
     .algolia-docsearch-suggestion--highlight {
-      color: lighten(getColor(denim), 5%);
+      color: $text-color-highlight;
       box-shadow: none;
       font-weight: bold;
     }
   }
 
   .algolia-docsearch-suggestion--highlight {
-    color: lighten(getColor(denim), 5%);
+    color: $text-color-highlight;
     background: rgba(getColor(malibu), 0.15);
   }
 
diff --git a/components/sidebar-item/sidebar-item-style.scss b/components/sidebar-item/sidebar-item-style.scss
@@ -11,7 +11,7 @@
     color: inherit;
 
     &:hover {
-      color: lighten(getColor(denim), 5%);
+      color: $text-color-highlight;
     }
   }
 
@@ -61,7 +61,7 @@
     }
 
     .sidebar-item__title {
-      color: lighten(getColor(denim), 5%);
+      color: $text-color-highlight;
     }
 
     .sidebar-item__toggle {
diff --git a/styles/fonts.scss b/styles/fonts.scss
@@ -1,18 +1,7 @@
-@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
-@import url(https://fonts.googleapis.com/css?family=Cabin:400,400i,600,600i);
-
 @font-face {
   font-family: 'Geomanist';
   src: url('../assets/geomanist-medium.woff2') format('woff2'),
-       url('../assets/geomanist-medium.woff') format('woff');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Geomanist';
-  src: url('../assets/geomanist-regular.woff2') format('woff2'),
-       url('../assets/geomanist-regular.woff') format('woff');
-  font-weight: 400;
+  url('../assets/geomanist-medium.woff') format('woff');
+  font-weight: 600;
   font-style: normal;
 }
diff --git a/styles/index.scss b/styles/index.scss
@@ -6,10 +6,10 @@
  */
 
 @import 'vars';
+@import 'fonts';
 @import 'functions';
 
 @import './reset';
-@import './fonts';
 
 * {
   box-sizing: inherit;
@@ -20,12 +20,12 @@ html {
 }
 
 body {
-  font: 400 getFontSize(0) 'Cabin', 'Century Gothic', sans-serif;
-  color: getColor(emperor);
+  font: 400 getFontSize(0) $font-stack-body;
+  color: getColor(elephant);
 }
 
 a {
-  color: lighten(getColor(denim), 5%);
+  color: $text-color-highlight;
   text-decoration: none;
   transition: color 250ms;
 
@@ -37,7 +37,7 @@ a {
     color:lighten(getColor(dusty-grey), 10%);
 
     &:hover {
-      color: lighten(getColor(denim), 5%);
+      color: $text-color-highlight;
     }
   }
 
diff --git a/styles/markdown.scss b/styles/markdown.scss
@@ -15,14 +15,14 @@
   h6 { font-size: getFontSize(-1); }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family:'Geomanist', 'Century Gothic', sans-serif;
-    font-weight:400;
+    font-family: $font-stack-heading;
+    font-weight:600;
     line-height:1;
     margin:1.5em 0 0.25em;
-    color:getColor(mine-shaft);
+    color:getColor(fiord);
 
     &:first-child { margin-top:0; }
-    tt, code { font-size:inherit; }
+    tt, code { font-size: 90%; color: inherit }
   }
 
   p, blockquote, table, pre {
@@ -159,7 +159,8 @@
   }
 
   code, tt {
-    font-family:'Ubuntu Mono', monospace;
+    font-family: $font-stack-code;
+    font-size: 90%;
     margin: 0 2px;
     padding: 2px 6px;
     white-space: nowrap;
@@ -168,6 +169,10 @@
     text-shadow: 0 1px 0 transparentize(getColor(white), 0.4);
   }
 
+  a code {
+    color: $text-color-highlight;
+  }
+
   pre {
     background-color: rgba(238, 238, 238, 0.35);
     background-color: getColor(elephant);
diff --git a/styles/partials/_vars.scss b/styles/partials/_vars.scss
@@ -18,3 +18,10 @@ $screens: (
   large: 1024px,
   medium: 768px
 );
+
+$font-stack-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+$font-stack-heading: Geomanist, sans-serif;
+$font-stack-code: 'Source Code Pro', Consolas, "Liberation Mono", Menlo, Courier, monospace;
+
+$text-color-highlight: lighten(map-get($colors, denim), 5%);
+
diff --git a/template.ejs b/template.ejs
@@ -7,6 +7,8 @@
     <meta name="theme-color" content="#2B3A42">
     <link rel="shortcut icon" href="/assets/favicon.ico">
 
+    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,500,500i" rel="stylesheet">
+
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
     <% for (var file in webpackConfig.template.cssFiles) { %>
       <link href="<%= webpackConfig.template.cssFiles[file] %>" rel="stylesheet">

Original file line number	Diff line number	Diff line change
`@@ -37,14 +37,14 @@`
`37`	`37`	`color: getColor(dusty-grey);`
`38`	`38`
`39`	`39`	`.algolia-docsearch-suggestion--highlight {`
`40`		`- color: lighten(getColor(denim), 5%);`
	`40`	`+ color: $text-color-highlight;`
`41`	`41`	`box-shadow: none;`
`42`	`42`	`font-weight: bold;`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`.algolia-docsearch-suggestion--highlight {`
`47`		`- color: lighten(getColor(denim), 5%);`
	`47`	`+ color: $text-color-highlight;`
`48`	`48`	`background: rgba(getColor(malibu), 0.15);`
`49`	`49`	`}`
`50`	`50`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`color: inherit;`
`12`	`12`
`13`	`13`	`&:hover {`
`14`		`- color: lighten(getColor(denim), 5%);`
	`14`	`+ color: $text-color-highlight;`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`@@ -61,7 +61,7 @@`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`.sidebar-item__title {`
`64`		`- color: lighten(getColor(denim), 5%);`
	`64`	`+ color: $text-color-highlight;`
`65`	`65`	`}`
`66`	`66`
`67`	`67`	`.sidebar-item__toggle {`