Remove purecss dependency and replace with flexbox

4 files changed, 112 insertions, 151 deletions

diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index e2ed12d..8176e57 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -5,6 +5,10 @@ $block-border-radius: 0.15rem;
 .markdown {
   line-height: 1.5;
 
+  :first-child {
+    margin-top: 0;
+  }
+
   h1, h2, h3, h4, h5 {
     font-weight: 400;
     line-height: 1.25;
@@ -37,6 +41,7 @@ $block-border-radius: 0.15rem;
     background: $gray-100;
     border-radius: $block-border-radius;
     font-size: $font-size-14;
+    overflow-x: auto;
   }
 
   blockquote {
diff --git a/assets/_pure-extension.scss b/assets/_pure-extension.scss
deleted file mode 100644
index 23fc7f8..0000000
--- a/assets/_pure-extension.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import 'variables';
-
-html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
-  font-family: Roboto, sans-serif;
-  font-weight: $body-font-weight;
-}
-
-.pure-g {
-  [class *= "pure-u"] {
-    box-sizing: border-box;
-    padding: $padding-16;
-  }
-}
-
-@media screen and (max-width:64em) {
-  .pure-hidden-md {
-    display: none;
-  }
-}
diff --git a/assets/_variables.scss b/assets/_variables.scss
index b4ed939..40630fc 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -9,7 +9,7 @@ $font-size-14: .875rem;
 $font-size-16: 1rem;
 
 // Grayscale
-$white:    #fff;
+$white:    #ffffff;
 $gray-100: #f8f9fa;
 $gray-200: #e9ecef;
 $gray-300: #dee2e6;
@@ -36,30 +36,5 @@ $header-height: 3.5rem;
 $nav-menu-width: 16rem;
 $toc-menu-width: 14rem;
 
-$content-max-width: 64rem;
+$content-max-width: 80rem;
 $content-min-width: $body-min-width;
-
-
-// Mixins
-@mixin shadow {
-  box-shadow: 0 0 $padding-8 rgba(0,0,0,0.1);
-}
-
-@mixin ul {
-  ul {
-    list-style: none;
-    padding-left: $padding-16;
-
-    li {
-      line-height: $padding-16;
-
-      a {
-        display: block;
-      }
-
-      img {
-        height: $padding-16;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
index 8f88b67..72f880a 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -1,20 +1,26 @@
 @import 'variables';
-@import 'pure-extension';
 @import 'markdown';
 
+
 html {
   font-size: $font-size-base;
 }
 
 html, body {
-  width: 100%;
-  min-height: 100%;
   min-width: $body-min-width;
+  overflow: hidden auto;
 }
 
 body {
   color: $body-font-color;
   background: $body-background;
+  font-family: 'Roboto', sans-serif;
+  font-weight: $body-font-weight;
+
+  box-sizing: border-box;
+  * {
+    box-sizing: inherit;
+  }
 }
 
 a {
@@ -26,145 +32,139 @@ a {
   }
 }
 
-ul {
-  margin: 0;
-  padding-left: $padding-16;
-  line-height: $padding-16 * 2;
+nav {
+  ul {
+    margin: 0;
+    padding-left: $padding-16;
+    list-style: none;
+    line-height: $padding-16 * 2;
 
-  li {
-    
-    a {
-      display: block;
-    }
+    li {
+      a {
+        display: block;
+      }
 
-    img {
-      height: $padding-16;
+      a:hover {
+        opacity: .5;
+      }
+  
+      img {
+        height: $padding-16;
+      }
     }
   }
+
+  &> ul {
+    // padding start with second level
+    padding-left: 0;
+  }
 }
 
 .header {
-  position: fixed;
-  width: 100%;
-  height: $header-height;
-  padding: $padding-16;
-  top: 0;
-  box-sizing: border-box;
-  z-index: 1;
-
-  background: $body-background;
-  @include shadow;
-  
-  display: flex;
+  display: none;
   align-items: center;
-
-  label {
-    line-height: 0;
-    margin-right: $padding-16;
-    display: none;
-  }
-
-  h3 {
-    font-weight: 400;
-    line-height: 1.5rem;
-    margin: 0;
-
-    a {
-      color: $nav-link-color;
-    }
-  }
+  justify-content: space-between;
+  margin-bottom: $padding-16;
 }
 
-.menu {
-  position: fixed;
-  width: $nav-menu-width;
-  top: $header-height;
-  bottom: 0;
-  box-sizing: border-box;
-  padding: $padding-16;
-
-  background: $nav-background;
+.content {
+  max-width: $content-max-width;
+  margin: 0 auto;
 
-  overflow-x: hidden;
-  overflow-y: auto;
+  display: flex;
+  flex-flow: row;
 
-  transition: transform 0.3s ease-in-out;
-  will-change: transform;
+  .menu nav, .page, .markdown {
+    transition: 0.2s ease-in-out;
+    transition-property: transform, margin-left, opacity;
+    will-change: transform, margin-left;
+  }
 
-  font-size: $font-size-14;
-  line-height: 2rem;
+  .menu {
+    flex: 0 0 $nav-menu-width;
 
-  a {
-    display: block;
-    color: $nav-link-color;
+    nav {
+      position: fixed;
+      height: 100%;
+      width: $nav-menu-width;
+      overflow: hidden auto;
 
-    &.active {
-      color: $color-link;
+      padding: $padding-16;
+      font-size: $font-size-14;
     }
-  }
-
-  ul {
-    list-style: none;
-  }
 
-  // No padding for first level
-  > ul {
-    padding: 0;
-  }
-
-  // Move content
-  + div {
-    margin-left: $nav-menu-width;
-    margin-top: $header-height;
-  }
+    a {
+      color: $nav-link-color;
+    }
 
-  .root-section {
-    margin-bottom: $padding-16;
-    > a { font-weight: 600; }
-    > ul { padding-left: 0; }
+    .section {
+      margin-bottom: $padding-16;
+      > a { font-weight: 700; }
+      > ul { padding-left: 0; }
+    }
   }
-}
-
-.content {
-  margin: 0 auto;
-  max-width: $content-max-width;
-  min-width: $content-min-width;
 
   .page {
-    overflow: hidden;
+    flex: 1 0;
+    width: 0;
+    min-width: $body-min-width;
+    padding: $padding-16;
   }
 
   .toc {
-    font-size: $font-size-12;
+    flex: 0 0 $nav-menu-width;
 
-    nav > ul {
-      border-left: $padding-1 solid $gray-100;
-    }
+    nav {
+      padding: $padding-16;
+      font-size: $font-size-12;
 
+      > ul {
+        border-left: $padding-1 solid $gray-200;
+      }
+    }
+  
     ul {
-      list-style: none;
-      padding-left: $padding-8;
       line-height: $padding-16 * 1.5;
+      padding-left: $padding-8;
     }
   }
 }
 
-// Mobile styles
-@media screen and (max-width: 50rem) {
-  .header label {
-    display: inline-block;
+// Responsive styles
+$menu-hide-point: $nav-menu-width + $body-min-width;
+$toc-hide-point: $menu-hide-point + $nav-menu-width;
+
+@media screen and (max-width: $toc-hide-point) {
+  .toc {
+    // margin-right: -$nav-menu-width;
+    display: none;
   }
+}
 
+@media screen and (max-width: $menu-hide-point) {
   .menu {
-    transform: translateX(-$nav-menu-width);
+    margin-left: -$nav-menu-width;
+  }
 
-    + div {
-      margin-left: 0;
-    }
+  .header {
+    display: flex;
   }
 
-  #nav-control:checked + nav {
-    @include shadow;
-    transform: translateX(0);
+  #menu-control:checked + .content {
+    .menu nav {
+      transform: translateX($nav-menu-width);
+    }
+    
+    .page {
+      transform: translateX($nav-menu-width);
+    }
+
+    .header label {
+      transform: rotate(90deg);
+    }
+
+    .markdown {
+      opacity: .25;
+    }
   }
 }