Tweak fira font sizing, add .font-code, .font-embl

For ebiwd/EBI-Icon-fonts#8
ebiwd · Nov 9, 2017 · 54d0d02 · 54d0d02
1 parent 109f215
commit 54d0d02
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 10 deletions.
diff --git a/css/ebi-css-build/_ebi_code_styles.scss b/css/ebi-css-build/_ebi_code_styles.scss
@@ -1,6 +1,6 @@
 @mixin ebi-code-styles {
   .code {
-    font-family: Consolas, "Liberation Mono", Courier, monospace;
+    font-family: $code-font-family;
     font-weight: normal;
     color: #0a0a0a;
     background-color: #e6e6e6;
@@ -21,6 +21,6 @@
   .kbd {
     margin: 0;
     color: #0a0a0a;
-    font-family: Consolas, "Liberation Mono", Courier, monospace;
+    font-family: $code-font-family;
   }
 }
diff --git a/css/ebi-css-build/_ebi_table_styles.scss b/css/ebi-css-build/_ebi_table_styles.scss
@@ -1,4 +1,7 @@
 @mixin ebi-table-styles {
+  table {
+    font-family: $table-font-family;
+  }
   // padding for page content
   body.table-layout table {
     padding: 0;

diff --git a/css/ebi-css-build/_ebi_theme_settings.scss b/css/ebi-css-build/_ebi_theme_settings.scss
@@ -40,6 +40,8 @@ $body-antialiased: true;
 $body-font-color: $ebi-colour-dark;
 $body-font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 $body-font-family-serif: 'EB Garamond', 'georgia', serif;
+$code-font-family: 'Fira Code', Consolas, 'Liberation Mono', Courier, monospace;
+$table-font-family: $code-font-family;
 
 // Set foundation colours
 $foundation-palette: (

diff --git a/css/ebi-css-build/_ebi_utility_styles.scss b/css/ebi-css-build/_ebi_utility_styles.scss
@@ -3,9 +3,11 @@
   .uppercase { text-transform: uppercase; }
   .lowercase { text-transform: lowercase; }
 
-  .serif { font-family: $body-font-family-serif;  font-size: 1.1rem; }
-  .sans-serif { font-family: $body-font-family;  font-size: 1.1rem; }
-  .serif .sans-serif { font-size: 1rem; } // reset font size when nesting
+  .font-embl { font-family: $body-font-family; }
+  .font-code { font-family: $code-font-family; }
+  .font-serif, .serif { font-family: $body-font-family-serif;  }
+  .font-sans-serif, .sans-serif { font-family: $body-font-family;  }
+  // .serif .sans-serif { font-size: 1rem; } // reset font size when nesting
 
   .block { display: block; }
   .clear { clear: both; }

diff --git a/css/ebi-css-build/ebi-global.scss b/css/ebi-css-build/ebi-global.scss
@@ -10,7 +10,10 @@
 @import 'ebi_color_styles';
 @import 'ebi_clearable_inputs';
 @import 'embl_selector'; // EMBL Dropdown selector for .masthead-black-bar
+
+// simple imports for the font while we test
 @import 'https://code.cdn.mozilla.net/fonts/fira.css';
+@import 'https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css';
 
 @mixin ebi-base-styles {
   body h1, body h2, body h3, body h4, body h5 { font-weight: 300; letter-spacing: -.5px}
@@ -303,7 +306,7 @@
   .columns.no-pad-left { padding-left: 0; }
 
   // mono-space fonts are fat
-  code { font-size: .95rem; }
+  // code { font-size: .95rem; }
 
   // Button
   //

diff --git a/css/ebi-css-build/foundation/_settings-common.scss b/css/ebi-css-build/foundation/_settings-common.scss
@@ -158,7 +158,7 @@ $block-grid-max: 8;
 $header-font-family: $body-font-family;
 $header-font-weight: $global-weight-normal;
 $header-font-style: normal;
-$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$font-family-monospace: $code-font-family;
 $header-sizes: (
   small: (
     'h1': 24,
@@ -183,11 +183,11 @@ $header-margin-bottom: 0.5rem;
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
-$paragraph-lineheight: 1.6;
+$paragraph-lineheight: 1.5;
 $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;
 $code-color: $black;
-$code-font-family: $font-family-monospace;
+// $code-font-family: $font-family-monospace;
 $code-font-weight: $global-weight-normal;
 $code-background: $light-gray;
 $code-border: 1px solid $medium-gray;

diff --git a/libraries/Choices/assets/styles/scss/base.scss b/libraries/Choices/assets/styles/scss/base.scss
@@ -29,7 +29,7 @@ html, body {
 }
 
 body {
-  font-family: 'Fira Sans', Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-family: $body-font-family;
   font-size: 16px;
   line-height: 1.4;
   color: #FFFFFF;