From 1e95c4106947662374f887189037a439908aa84d Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 2 Feb 2021 14:35:44 +0200
Subject: [PATCH] fix(docs-infra): improve typography styles (incl. bigger font
 size/line height) (#40427)

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40427
---
 aio/src/styles/0-base/_typography.scss        | 19 +++++++++----------
 aio/src/styles/1-layouts/_sidenav.scss        | 14 +++++++++-----
 aio/src/styles/2-modules/_api-pages.scss      |  1 +
 .../styles/2-modules/_heading-anchors.scss    |  4 ++--
 aio/src/styles/2-modules/_toc.scss            |  8 ++++----
 5 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 575075d574..047ffb0efc 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -6,7 +6,7 @@ body {
   font-family: $main-font;
   margin: 0;
   color: $darkgray;
-  @include font-size(14);
+  @include font-size(16);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -18,7 +18,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  @include font-size(24);
+  @include font-size(40);
   display: inline-block;
   margin: 1.6rem 0;
 
@@ -30,7 +30,7 @@ h1 {
 h2 {
   border-top: 1px solid $lightgray;
   clear: both;
-  @include font-size(22);
+  @include font-size(32);
   margin-top: 4rem;
   padding-top: 4rem;
 
@@ -49,19 +49,19 @@ h2 {
 }
 
 h3 {
-  @include font-size(20);
+  @include font-size(24);
   margin-top: 3rem;
   clear: both;
 }
 
 h4 {
-  @include font-size(18);
+  @include font-size(20);
   margin-top: 3rem;
   clear: both;
 }
 
 h5 {
-  @include font-size(16);
+  @include font-size(18);
   margin-top: 2rem;
   clear: both;
 }
@@ -98,9 +98,8 @@ ol,
 li,
 input,
 a {
-  @include font-size(14);
-  @include line-height(24);
-  @include letter-spacing(0.3);
+  @include font-size(16);
+  @include line-height(32);
   font-weight: 400;
   color: $darkgray;
   & > em {
@@ -133,6 +132,7 @@ ol ol {
 
 li {
   padding-bottom: 8px;
+  @include line-height(24);
 
   p {
     margin: 0;
@@ -171,7 +171,6 @@ table tbody th {
 td {
   font-weight: 400;
   padding: 8px 30px;
-  @include letter-spacing(0.3);
 
   > p,
   ul {
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 7d590ae0fa..fe4198f7b2 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -7,7 +7,6 @@ aio-nav-menu {
   display: block;
   margin: 0 auto;
   max-width: 268px;
-  @include font-size(13);
 
   &:first-of-type {
     margin-top: 16px;
@@ -111,6 +110,7 @@ button.vertical-menu-item {
   color: $darkgray;
   cursor: pointer;
   position: relative;
+  @include font-size(16);
 }
 
 .heading-children {
@@ -143,7 +143,8 @@ button.vertical-menu-item {
 
 .level-1 {
   font-family: $main-font;
-  @include font-size(14);
+  @include font-size(16);
+  @include line-height(28);
   font-weight: 400;
   padding-left: 20px;
   margin: 0;
@@ -164,9 +165,10 @@ button.vertical-menu-item {
 .level-2 {
   font-family: $main-font;
   @include font-size(14);
+  @include line-height(24);
   font-weight: 400;
   margin: 0;
-  padding-left: 32px;
+  padding-left: 36px;
 
   &.expanded .mat-icon,
   .level-3.expanded .mat-icon {
@@ -182,15 +184,17 @@ button.vertical-menu-item {
 .level-3 {
   font-family: $main-font;
   @include font-size(14);
+  @include line-height(24);
   margin: 0;
-  padding-left: 40px;
+  padding-left: 44px;
 }
 
 .level-4 {
   font-family: $main-font;
   @include font-size(14);
+  @include line-height(24);
   margin: 0;
-  padding-left: 48px;
+  padding-left: 52px;
 }
 
 aio-nav-menu.top-menu {
diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index 34aeb94fc7..c4c5a5eb14 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -276,6 +276,7 @@
   }
 
   h1 {
+    @include font-size(24);
     margin: 0;
   }
 }
diff --git a/aio/src/styles/2-modules/_heading-anchors.scss b/aio/src/styles/2-modules/_heading-anchors.scss
index cbf88cf111..a241df68e2 100644
--- a/aio/src/styles/2-modules/_heading-anchors.scss
+++ b/aio/src/styles/2-modules/_heading-anchors.scss
@@ -7,8 +7,8 @@
       text-decoration: none;
       user-select: none;
       visibility: hidden;
-      display: inline-block;
-      vertical-align: text-top;
+      display: inline-flex;
+      vertical-align: middle;
     }
 
     &:hover .header-link {
diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index 6a71ed21bc..5baf001db1 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -126,8 +126,8 @@
       a {
         color: lighten($darkgray, 10);
         overflow: visible;
-        @include font-size(12);
-        @include line-height(16);
+        @include font-size(14);
+        @include line-height(28);
         display: table-cell;
       }
 
@@ -146,7 +146,7 @@
             content: '';
             border-radius: 50%;
             left: -3px;
-            top: 12px;
+            top: 14px;
             background: $blue;
             position: absolute;
             width: 6px;
@@ -178,7 +178,7 @@
         content: '';
         border-radius: 50%;
         left: -3px;
-        top: 12px;
+        top: 14px;
         background: $lightgray;
         position: absolute;
         width: 6px;