Refactor partials, layout and sass files

4 files changed, 52 insertions, 19 deletions

diff --git a/assets/markdown.scss b/assets/_markdown.scss
index d2a33ff..d2a33ff 100644
--- a/assets/markdown.scss
+++ b/assets/_markdown.scss
diff --git a/assets/pure-extension.scss b/assets/_pure-extension.scss
index b4c1ab5..e540ef2 100644
--- a/assets/pure-extension.scss
+++ b/assets/_pure-extension.scss
@@ -50,6 +50,6 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
   }
 
   &.active {
-    color: #1F37E6;
+    color: $color-link;
   }
 }
\ No newline at end of file
diff --git a/assets/variables.scss b/assets/_variables.scss
index 4d4413e..125a29f 100644
--- a/assets/variables.scss
+++ b/assets/_variables.scss
@@ -25,12 +25,12 @@ $gray-800: #343a40;
 $gray-900: #212529;
 $black:    #000;
 
-// $color-link: 
-// $color-visited-link: 
-
+$color-link: #1177EE;
+$color-visited-link: #7823c9;
 
 $body-line-height: 1.75;
 $body-min-width: 25rem;
 $content-max-width: 64rem;
+$content-min-width: $body-min-width;
 $nav-menu-width: 18rem;
 $toc-menu-width: 14rem;
\ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
index ff9dd17..e21beab 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -17,28 +17,20 @@ body {
   line-height: $body-line-height;
 }
 
-.book-content {
-  max-width: $content-max-width;
-  margin: 0 auto;
-}
-
-.book-page {
-  padding: 0 $size-48;
+a {
+  text-decoration: none;
+  color: $color-link;
 }
 
 .book-brand {
   padding: 0 $padding-16;
   font-weight: 300;
-
-  a {
-    color: $gray-800;
-    text-decoration: none;
-  }
 }
 
+// Navigation styles
 .book-nav {
-  width: $nav-menu-width;
   flex-grow: 0;
+  width: $nav-menu-width;
 
   nav {
     position: fixed;
@@ -50,14 +42,54 @@ body {
 
     font-size: $font-size-14;
     background: $gray-100;
+  }
+
+  ul {
+    list-style: none;
     padding-left: $padding-16;
   }
+
+  a {
+    display: block;
+    color: $gray-800;
+    padding: $padding-4 $padding-16;
+    text-transform: capitalize;
+  
+    &[href]:hover {
+      color: $gray-600;
+    }
+  
+    &.active {
+      color: $color-link;
+    }
+  }
+
+  // class used for sections with bookTopSection: true
+  .book-nav-section {
+    margin-bottom: $padding-16;
+    > a { font-weight: 600; }
+    > ul { padding-left: 0; }
+  }
+}
+
+.book-content {
+  max-width: $content-max-width;
+  min-width: $content-min-width;
+  margin: 0 auto;
+
+  .book-page {
+    padding: $padding-16 $size-48;
+  }
+
+  a:visited {
+    color: $color-visited-link
+  }
 }
 
+// Table of Contents styles
 .book-toc {
   flex-grow: 0;
   width: $toc-menu-width;
-  font-size: $font-size-12;
 
   nav {
     position: fixed;
@@ -67,6 +99,8 @@ body {
     overflow-x: hidden;
     overflow-y: auto;
 
+    font-size: $font-size-12;
+
     > ul {
       margin: $size-48 0;
       padding: 0 $padding-16;
@@ -80,7 +114,6 @@ body {
   }
 
   a {
-    text-decoration: none;
     line-height: 1.25;
     padding: $padding-4 0;
     display: block;