Typography fixes

_layouts/default.html

@@ -45,7 +45,7 @@ layout: table_wrappers
               {% for link in site.aux_links %}
                 <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}">
                   <a href="{{ link.last }}"
-                    {% if site.aux_links_new_tab %} 
+                    {% if site.aux_links_new_tab %}
                     target="_blank" rel="noopener noreferrer"
                     {% endif %}
                   >

_sass/base.scss

@@ -25,25 +25,23 @@ body {
   background-color: $body-background-color;
 }
 
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 ol,
 ul,
+dl,
 pre,
 address,
 blockquote,
-dl,
+.table-wrapper {
+  margin-top: 0.5em;
+}
+
+table,
+p,
 div,
-fieldset,
-form,
 hr,
-noscript,
-table {
+form,
+fieldset,
+noscript {
   margin-top: 0;
 }
 
@@ -53,8 +51,8 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.8em;
+  margin-top: 1.5em;
+  margin-bottom: 0.25em;
   font-weight: 500;
   line-height: $body-heading-line-height;
   color: $body-heading-color;

_sass/content.scss

@@ -156,5 +156,15 @@
   h5,
   h6 {
     position: relative;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  + table,
+  .table-wrapper,
+  .code-example,
+  .highlighter-rouge {
+    margin-top: 1em;
   }
 }

_sass/support/_variables.scss

@@ -7,8 +7,8 @@ $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
 $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
 $root-font-size: 16px !default; // Base font-size for rems
 $body-line-height: 1.4 !default;
-$content-line-height: 1.5 !default;
-$body-heading-line-height: 1.15 !default !default;
+$content-line-height: 1.6 !default;
+$body-heading-line-height: 1.25 !default;
 
 //
 // Colors

_sass/support/mixins/_typography.scss

@@ -25,7 +25,7 @@
 }
 
 @mixin fs-4 {
-  font-size: 14px !important;
+  font-size: 15px !important;
 
   @include mq(sm) {
     font-size: 16px !important;
@@ -45,11 +45,13 @@
 
   @include mq(sm) {
     font-size: 24px !important;
+    line-height: $body-heading-line-height;
   }
 }
 
 @mixin fs-7 {
   font-size: 24px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 32px !important;
@@ -58,6 +60,7 @@
 
 @mixin fs-8 {
   font-size: 32px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 36px !important;
@@ -66,6 +69,7 @@
 
 @mixin fs-9 {
   font-size: 36px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 42px !important;
@@ -74,6 +78,7 @@
 
 @mixin fs-10 {
   font-size: 42px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 48px !important;

_sass/typography.scss

@@ -22,7 +22,7 @@ h3,
 h4,
 .text-delta {
   @include fs-2;
-  font-weight: 300;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }