Refactor scss styles

3 files changed, 152 insertions, 114 deletions

diff --git a/assets/_utils.scss b/assets/_utils.scss
new file mode 100644
index 0000000..37ce94f
--- /dev/null
+++ b/assets/_utils.scss
@@ -0,0 +1,38 @@
+.flex {
+  display: flex;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.mx-auto {
+  margin: 0 auto;
+}
+
+@mixin fixed {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  overflow: hidden auto;
+}
+
+.hide {
+  display: none;
+}
diff --git a/assets/_variables.scss b/assets/_variables.scss
index ced71e2..1890e35 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -1,15 +1,15 @@
 $padding-1: 1px;
-$padding-4: .25rem;
-$padding-8: .5rem;
+$padding-4: 0.25rem;
+$padding-8: 0.5rem;
 $padding-16: 1rem;
 
 $font-size-base: 16px;
-$font-size-12: .75rem;
-$font-size-14: .875rem;
+$font-size-12: 0.75rem;
+$font-size-14: 0.875rem;
 $font-size-16: 1rem;
 
 // Grayscale
-$white:    #ffffff;
+$white: #ffffff;
 $gray-100: #f8f9fa;
 $gray-200: #e9ecef;
 $gray-300: #dee2e6;
@@ -19,7 +19,7 @@ $gray-600: #868e96;
 $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
-$black:    #000;
+$black: #000;
 
 $color-link: #004ed0;
 $color-visited-link: #8440f1;
@@ -29,12 +29,15 @@ $body-font-color: $gray-800;
 $body-font-weight: 400;
 $body-min-width: 25rem;
 
-$nav-background: $body-background; //$gray-100;
+$nav-background: $body-background;
 $nav-link-color: $gray-800;
 
 $header-height: 3.5rem;
-$nav-menu-width: 18rem;
-$toc-menu-width: 14rem;
+$menu-width: 18rem;
+$toc-width: 14rem;
 
-$content-max-width: 80rem;
-$content-min-width: $body-min-width;
+$container-min-width: $body-min-width;
+$container-max-width: 80rem;
+
+$sm-breakpoint: $menu-width + $body-min-width;
+$md-breakpoint: $sm-breakpoint + $toc-width;
\ No newline at end of file
diff --git a/assets/book.scss b/assets/book.scss
index 56fdc9d..d98131f 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -1,13 +1,14 @@
-@import 'variables';
-@import 'markdown';
-
+@import "variables";
+@import "markdown";
+@import "utils";
 
 html {
   font-size: $font-size-base;
-  letter-spacing: .33px;
+  letter-spacing: 0.33px;
 }
 
-html, body {
+html,
+body {
   min-width: $body-min-width;
   overflow: hidden auto;
 }
@@ -16,7 +17,7 @@ body {
   color: $body-font-color;
   background: $body-background;
 
-  font-family: 'Oxygen', sans-serif;
+  font-family: "Oxygen", sans-serif;
   font-weight: $body-font-weight;
 
   text-rendering: optimizeLegibility;
@@ -29,7 +30,11 @@ body {
   }
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   font-weight: 400;
 }
 
@@ -46,148 +51,140 @@ img {
   vertical-align: middle;
 }
 
-aside {
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    margin: 1em 0;
+  }
+
+  a {
+    display: block;
+  }
+
   ul {
-    margin: 0;
     padding-left: $padding-16;
-    list-style: none;
-    line-height: 1.5em;
-
-    li {
-      margin: .75em 0;
-
-      a { display: block; }
-      a:hover { opacity: .5; }
-  
-      img {
-        height: $padding-16;
-      }
-    }
   }
+}
 
-  // start padding on second level
-  nav > ul {
-    padding-left: 0;
-  }
+.container {
+  min-width: $container-min-width;
+  max-width: $container-max-width;
+  margin: 0 auto;
 }
 
-aside.fixed nav {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  overflow: hidden auto;
+.book-brand {
+  margin-top: 0;
 }
 
-header {
-  display: flex;
-  align-items:center;
-  justify-content: space-between;
-  margin-bottom: $padding-16;
+.book-menu {
+  flex: 0 0 $menu-width;
+  font-size: $font-size-14;
 
-  display: none;
-}
+  nav {
+    width: $menu-width;
+    padding: $padding-16;
 
-main {
-  max-width: $content-max-width;
-  margin: 0 auto;
+    @include fixed;
+  }
 
-  display: flex;
-  flex-flow: row;
+  a {
+    color: $nav-link-color;
+  }
 
-  aside nav, .content, .markdown {
-    transition: .2s ease-in-out;
-    transition-property: transform, margin-left, opacity;
-    will-change: transform, margin-left;
+  a.active {
+    color: $color-link;
   }
+}
 
-  .menu {
-    flex: 0 0 $nav-menu-width;
+.book-page {
+  min-width: $body-min-width;
+  padding: $padding-16;
+}
 
-    .brand {
-      margin-top: 0;
-    }
+.book-header {
+  margin-bottom: $padding-16;
+  display: none;
+}
 
-    nav {
-      width: $nav-menu-width;
-      padding: $padding-16;
-      font-size: $font-size-14;
-    }
+.book-toc {
+  flex: 0 0 $toc-width;
+  font-size: $font-size-12;
 
-    a { color: $nav-link-color; }
-    a.active { color: $color-link; }
+  nav {
+    width: $toc-width;
+    padding: $padding-16;
 
-    .flat-section {
-      margin-bottom: $padding-16;
-      > a { font-weight: 700; }
-      > ul { padding-left: 0; }
-    }
+    @include fixed;
   }
 
-  .content {
-    flex: 1 0;
-    width: 0;
-    min-width: $body-min-width;
-    padding: $padding-16;
+  nav > ul > li {
+    margin: 0;
   }
+}
 
-  .toc {
-    flex: 0 0 $toc-menu-width;
+.book-posts {
+  min-width: $body-min-width;
+  max-width: $sm-breakpoint;
+  padding: $padding-16;
+}
 
-    nav {
-      width: $toc-menu-width;
-      padding: $padding-16;
-      font-size: $font-size-12;
+ul.pagination {
+  display: flex;
+  justify-content: center;
 
-      ul ul {
-        padding-left: $padding-8;
-      }
-    }
+  .page-item a {
+    padding: $padding-16;
   }
 }
 
 // Responsive styles
-$menu-hide-point: $nav-menu-width + $body-min-width;
-$toc-hide-point: $menu-hide-point + $nav-menu-width;
+aside nav,
+.book-page,
+.markdown {
+  transition: 0.2s ease-in-out;
+  transition-property: transform, margin-left, opacity;
+  will-change: transform, margin-left;
+}
 
-@media screen and (max-width: $toc-hide-point) {
-  .toc {
+@media screen and (max-width: $md-breakpoint) {
+  .book-toc {
     display: none;
   }
 }
 
-@media screen and (max-width: $menu-hide-point) {
-  .menu {
-    margin-left: -$nav-menu-width;
+@media screen and (max-width: $sm-breakpoint) {
+  .book-menu {
+    margin-left: -$menu-width;
   }
 
-  main header {
+  .book-header {
     display: flex;
   }
 
   #menu-control:checked + main {
-    .menu nav, .content {
-      transform: translateX($nav-menu-width);
+    .book-menu nav,
+    .book-page {
+      transform: translateX($menu-width);
     }
-    
-    header label img {
+
+    .book-header label img {
       transform: rotate(90deg);
     }
 
     .markdown {
-      opacity: .25;
+      opacity: 0.25;
     }
   }
 }
 
 // Extra space for big screens
-@media screen and (min-width: $toc-hide-point) {
-  main {
-    .content {
-      padding: $padding-16 * 2 $padding-16;
-    }
-
-    .menu nav, .toc nav {
-      padding: $padding-16 * 2;
-    }
-  } 
-}
\ No newline at end of file
+@media screen and (min-width: $container-max-width) {
+  .book-page,
+  .book-menu nav,
+  .book-toc nav {
+    padding: $padding-16 * 2 $padding-16;
+  }
+}