From 53f946d19ba7ebb86a7866ce0f521dcd920ed665 Mon Sep 17 00:00:00 2001
From: Jon Gjengset <jon@thesquareplanet.com>
Date: Fri, 27 Jul 2018 12:41:14 -0400
Subject: [PATCH] Improve site legibility

This patch removes unnecessary letter-spacing and line-height settings,
as well as the forced Arial/Helvetica font override, an instead uses the
user's chosen font and the font's settings for letter-spacing and
line-height. It also removes the global override for initial page font
size, so that the user's font size settings are preserved.

The blockquote styles are also update so that the quoted text is
formatted similarly to the surrounding text (no italics, and no larger
font size), and with a blacker grey to make the text more legible.
---
 _sass/_base.scss   |  7 +------
 _sass/_layout.scss | 12 ++++--------
 css/main.scss      |  8 +++-----
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index a69188a73..e5d1df952 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -15,9 +15,7 @@ dl, dd, ol, ul, figure {
  */
 body {
     font-family: $base-font-family;
-    font-size: $base-font-size;
-    line-height: $base-line-height;
-    font-weight: 300;
+    font-size: 1em;
     color: $text-color;
     background-color: $background-color;
 }
@@ -110,9 +108,6 @@ blockquote {
     color: $grey-color;
     border-left: 4px solid $grey-color-light;
     padding-left: $spacing-unit / 2;
-    font-size: 18px;
-    letter-spacing: -1px;
-    font-style: italic;
 
     > :last-child {
         margin-bottom: 0;
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 3dca07adc..b0b261277 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -17,9 +17,8 @@
 }
 
 .site-title {
-    font-size: 26px;
-    line-height: 56px;
-    letter-spacing: -1px;
+    font-size: 150%;
+    line-height: 4rem;
     margin-bottom: 0;
     float: left;
 
@@ -31,7 +30,7 @@
 
 .site-nav {
     float: right;
-    line-height: 56px;
+    line-height: 4rem;
 
     .menu-icon {
         display: none;
@@ -39,7 +38,6 @@
 
     .page-link {
         color: $text-color;
-        line-height: $base-line-height;
 
         // Gaps between nav items, but not on the first one
         &:not(:first-child) {
@@ -210,9 +208,7 @@
 }
 
 .post-title {
-    font-size: 42px;
-    letter-spacing: -1px;
-    line-height: 1;
+    font-size: 200%;
 
     @include media-query($on-laptop) {
         font-size: 36px;
diff --git a/css/main.scss b/css/main.scss
index ceaccbc62..959b7e6df 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -6,10 +6,8 @@
 
 
 // Our variables
-$base-font-family: Helvetica, Arial, sans-serif;
-$base-font-size:   16px;
-$small-font-size:  $base-font-size * 0.875;
-$base-line-height: 1.5;
+$base-font-family: sans-serif;
+$small-font-size:  87.5%;
 
 $spacing-unit:     30px;
 
@@ -17,7 +15,7 @@ $text-color:       #111;
 $background-color: #fdfdfd;
 $brand-color:      #2a7ae2;
 
-$grey-color:       #828282;
+$grey-color:       #626262;
 $grey-color-light: lighten($grey-color, 40%);
 $grey-color-dark:  darken($grey-color, 25%);