Playing with fontsfont-testing

4 files changed, 40 insertions, 22 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 1c021026..d90589ef 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -12,10 +12,12 @@ $introduced-in-border-color: #e3e3e3;
 
 // Fonts
 $mono-font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
-$sans-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$body-font-size: 15px;
+$sans-font-family: 'Source Sans Pro', sans-serif;
+$heading-font-family: 'Lato', sans-serif;
+$body-font-size: 16px;
 $tooltip-font-size: 12px;
 $introduced-in-font-size: 13px;
+$font-weight-bolder: 700;
 
 // Margins
 $h-margin-top: 10px;
@@ -92,7 +94,7 @@ $gds-indigo-800: #393982;
 // Add here all the variables that already conform with GDS
 
 // Base colors
-$body-color: $gds-gray-950; //font color
+$body-color: #2f2a6b; //font color
 $body-background-color: $gds-white; //body background
 $main-background-color: $gds-white; // content background
 $header-background-color: $gds-purple-900;
@@ -109,7 +111,7 @@ $link-color-nav-hover: $gds-gray-900;
 // Global nav
 $global-nav-link-level0: $link-color-nav;
 $global-nav-link-level1: $link-color-nav;
-$global-nav-link-level2: $gds-gray-700;
+$global-nav-link-level2: $gds-gray-800;
 $global-nav-link-shadow: $gds-gray-200;
 
 // Table of contents
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 045a11e2..8d842ec6 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -16,6 +16,7 @@ body {
   font-family: $sans-font-family;
   font-size: $body-font-size;
   color: $body-color;
+  font-weight: 400;
 
   >.wrapper {
     min-height: 100vh;
@@ -42,6 +43,10 @@ a, a:visited {
   }
 }
 
+b, strong {
+  font-weight: 700;
+}
+
 details {
   summary {
     display: list-item;
@@ -60,8 +65,12 @@ table {
     background: $thead-background-color;
   }
 
+  th {
+    font-weight: 600;
+  }
+
   tbody {
-    border-top: 3px solid $gds-gray-200;
+    border-top: 1px solid $gds-gray-200;
 
     &:first-child {
       border-top: 0;
@@ -79,8 +88,8 @@ table {
   td, th {
     text-align: left;
     padding: 8px;
-    border: 1px solid $table-border-color;
-    font-size: 14px;
+    border: .5px solid $table-border-color;
+    font-size: 16px;
 
     .badge-small {
       &:hover::after {
@@ -215,7 +224,7 @@ h2, h3, h4, h5, h6 {
     .anchor {
       opacity: 0;
       float: left;
-      margin-left: -30px;
+      margin-left: -50px;
       vertical-align: bottom;
       margin-top: 8px;
       height: 22px;
@@ -231,8 +240,8 @@ h2, h3, h4, h5, h6 {
 // p font size = $body-font-size: 15px;
 
 h1 {
-  font-size: 34px;
-  font-weight: 700;
+  font-size: 42px;
+  font-weight: 600;
   border-bottom: solid 2px $h1-border-bottom;
   padding-bottom: 10px;
   margin-top: $h-margin-top;
@@ -244,8 +253,8 @@ h1 {
 }
 
 h2 {
-  font-size: 28px;
-  font-weight: 700;
+  font-size: 34px;
+  font-weight: 500;
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
@@ -255,8 +264,8 @@ h2 {
 }
 
 h3 {
-  font-size: 23px;
-  font-weight: 700;
+  font-size: 28px;
+  font-weight: 400;
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
@@ -266,8 +275,8 @@ h3 {
 }
 
 h4 {
-  font-size: 18px;
-  font-weight: 700;
+  font-size: 24px;
+  font-weight: 400;
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
@@ -277,8 +286,8 @@ h4 {
 }
 
 h5 {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 20px;
+  font-weight: 400;
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
@@ -288,8 +297,8 @@ h5 {
 }
 
 h6 {
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 400;
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
@@ -422,6 +431,7 @@ h6 {
     word-break: normal;
     padding: 2px 4px;
     line-height: 22px;
+    font-weight: 300;
   }
 
   .input-group-text {
@@ -683,7 +693,7 @@ a.global-nav-link, .nav-link {
 
 a.global-nav-link {
   line-height: 1.25;
-  font-size: 14px;
+  font-size: 15px;
   width: 100%;
 }
 
@@ -1303,6 +1313,8 @@ a.global-nav-link {
 
 // https://gitlab.com/gitlab-org/gitlab-docs/issues/107#note_36655246
 h1, h2, h3, h4, h5, h6 {
+  font-family: $heading-font-family;
+  color: #232150;
   &[id]::before {
     display: block;
     content: " ";
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index 8c7dacac..d4c415ce 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -7,7 +7,7 @@ version: 18
 
 $base-nav-link-padding: .75rem;
 $sm-nav-link-padding: .25rem;
-$nav-link-font-size: 14px;
+$nav-link-font-size: 15px;
 
 // ToC styles
 .table-of-contents {
diff --git a/layouts/head.html b/layouts/head.html
index 3ae9b05c..436ba79a 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -33,6 +33,10 @@
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/footer.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/toc.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/help.*'].path %>">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap">
+
 <!-- new fontawesome version 4 - via CDN -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- end of fontawesome -->