Use rem units for font-sizes, address linting issues.

src/sass/styles.scss

@@ -17,23 +17,57 @@ body {
 
 main {
   font-family: 'Circular', verdana, sans-serif;
-  font-size: 20px;
+  font-size: 1.25rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-width: calc(100% - 81px);
   position: relative;
+  height: 100vh;
+  border-left: 1px solid $lb-gray;
+}
+
+.cover-main {
+  border-left: 0;
 }
 
 .sidebar {
   width: 80px;
   height: 100vh;
-  border-right: 1px solid $lb-gray;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
+  .navigation-btn {
+    border-bottom: 1px solid $lb-gray;
+    height: 80px;
+
+    .hamburger-bg,
+    .close-bg {
+      transition: fill 0.5s ease;
+    }
+
+    .hamburger-lines *,
+    .close-lines * {
+      transition: stroke 0.5s ease;
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .hamburger-bg,
+      .close-bg {
+        fill: $lb-black;
+      }
+
+      .hamburger-lines *,
+      .close-lines * {
+        stroke: $lb-white;
+      }
+    }
+  }
+
   .page-title {
     flex-grow: 1;
     white-space: nowrap;
@@ -45,16 +79,44 @@ main {
     div {
       transform: rotate(-90deg);
       font-family: verdana, sans-serif;
-      font-size: 1.25em;
+      font-size: 1.25rem;
+      padding: 1em;
     }
   }
 }
 
-.logo-container {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  left: 0;
+.navigation-wrapper {
+  max-width: 472px;
+  position: absolute;
+  z-index: 1;
+
+  .toc-container {
+    padding: 1em;
+    background-color: $lb-white;
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
+    border-left: 1px solid $lb-gray;
+
+    .toc-column {
+      max-width: unset;
+    }
+
+    .chapter-item {
+      font-size: 1rem;
+      font-weight: 400;
+    }
+
+    .resources-link {
+      text-transform: none;
+    }
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.logo-container,
+.logo-container-cover {
   background-color: $lb-red;
   height: 80px;
   width: 80px;
@@ -77,19 +139,19 @@ main {
   transition: fill 0.3s ease;
 }
 
-.page-number {
+.logo-container-cover {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+}
+
+.page-number {
   height: 80px;
   width: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'IBMPlexMono';
+  font-family: 'IBMPlexMono', monospace;
   border-top: 1px solid $lb-gray;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 16px;
   letter-spacing: 0.1em;
@@ -133,13 +195,13 @@ main {
 
   > p {
     text-transform: uppercase;
-    font-size: 16px;
+    font-size: 1rem;
     color: $lb-ocean;
   }
 
 
   h1 {
-    font-size: 104px;
+    font-size: 6.5rem;
     line-height: 112px;
     font-weight: 700;
   }
@@ -152,7 +214,7 @@ div.get-started {
     text-decoration: none;
     color: $lb-black;
     text-transform: uppercase;
-    font-size: 14px;
+    font-size: 0.875rem;
     font-weight: 500;
     line-height: 16px;
     letter-spacing: 1.4px;
@@ -196,21 +258,20 @@ div.get-started {
 }
 
 .cover-copy {
-  background-color: #fff;
+  background-color: $lb-white;
   color: $lb-black;
   padding: 7em;
-  font-size: 1.25em;
+  font-size: 1.25rem;
 }
 
 .toc-container {
-  padding: 4em; 
-  padding-top: 10em;
-  text-align: left; 
+  padding: 10em 4em 4em;
+  text-align: left;
 
   > p {
     text-transform: uppercase;
     margin-bottom: 2em; 
-    font-size: 16px;
+    font-size: 1rem;
     font-weight: 500;
     line-height: 24px;
     letter-spacing: 0.1em;
@@ -229,7 +290,7 @@ div.get-started {
   }
 
   .chapter-item {
-    font-size: 1.25em;
+    font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 2em; 
     color: $lb-black;
@@ -261,14 +322,14 @@ div.get-started {
 
 p {
   .chapter {
-    font-size: 1.25em;
+    font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 2em; 
     color: $lb-red;
   }
 
   .title {
-    font-size: 2em;
+    font-size: 2rem;
     font-weight: 700;
     margin-bottom: 2em; 
     color: $lb-black;
@@ -278,7 +339,7 @@ p {
 .ebook-page-container {
   display: flex;
   height: 100%;
-  
+
   div {
     padding: 5%;
   }
@@ -293,18 +354,18 @@ p {
     }
 
     .ebook-chapter-title {
-      font-size: 28px;
+      font-size: 1.75rem;
       font-weight: bold;
     }
   }
 
   .ebook-copy {
     .ebook-chapter-title {
-      font-size: 28px;
+      font-size: 1.75rem;
       font-weight: bold;
     }
     .copy-paragraph {
-      font-size: 20px;
+      font-size: 1.25rem;
       line-height: 2;
       padding: 0;
     }
@@ -333,11 +394,10 @@ p {
 
 @media (width <= 768px) {
   .cover {
-    padding: 5%;
-
+    padding: 7em 5% 5%;
 
     h1 {
-      font-size: 2em;
+      font-size: 2rem;
     }
   }
   .cover-copy {
@@ -359,13 +419,29 @@ p {
   }
 
   .sidebar {
-    height: auto;
+    height: 80px;
     width: auto;
     flex-direction: row;
+
+    .page-title {
+      transform: rotate(90deg);
+
+      div {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .toc-container,
+  .ebook-page-container {
+    border-left: 0;
+    border-top: 1px solid $lb-gray;
   }
 
   .ebook-page-container {
     flex-direction: column;
+    margin-bottom: 2em;
 
     .ebook-heading-container {
       order: 2;
@@ -376,8 +452,13 @@ p {
     }
   }
 
+  .navigation-btn {
+    order: 1;
+    border-bottom: 0;
+    border-left: 1px solid $lb-gray;
+  }
+
   .page-number {
-    position: relative;
-    border: 0;
+    display: none;
   }
 }