Remove purecss dependency and replace with flexbox

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 {

assets/_pure-extension.scss

@@ -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;
-  }
-}

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;
-      }
-    }
-  }
-}

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 {
+nav {
-  margin: 0;
+  ul {
-  padding-left: $padding-16;
+    margin: 0;
-  line-height: $padding-16 * 2;
+    padding-left: $padding-16;
+    list-style: none;
+    line-height: $padding-16 * 2;
 
-  li {
+    li {
+      a {
+        display: block;
+      }
 
-    a {
+      a:hover {
-      display: block;
+        opacity: .5;
+      }
+  
+      img {
+        height: $padding-16;
+      }
     }
+  }
 
-    img {
+  &> ul {
-      height: $padding-16;
+    // padding start with second level
-    }
+    padding-left: 0;
   }
 }
 
 .header {
-  position: fixed;
+  display: none;
-  width: 100%;
+  align-items: center;
-  height: $header-height;
+  justify-content: space-between;
-  padding: $padding-16;
+  margin-bottom: $padding-16;
-  top: 0;
+}
-  box-sizing: border-box;
-  z-index: 1;
 
-  background: $body-background;
+.content {
-  @include shadow;
+  max-width: $content-max-width;
+  margin: 0 auto;
 
   display: flex;
-  align-items: center;
+  flex-flow: row;
 
-  label {
+  .menu nav, .page, .markdown {
-    line-height: 0;
+    transition: 0.2s ease-in-out;
-    margin-right: $padding-16;
+    transition-property: transform, margin-left, opacity;
-    display: none;
+    will-change: transform, margin-left;
   }
 
-  h3 {
+  .menu {
-    font-weight: 400;
+    flex: 0 0 $nav-menu-width;
-    line-height: 1.5rem;
+
-    margin: 0;
+    nav {
+      position: fixed;
+      height: 100%;
+      width: $nav-menu-width;
+      overflow: hidden auto;
+
+      padding: $padding-16;
+      font-size: $font-size-14;
+    }
 
     a {
       color: $nav-link-color;
     }
-  }
-}
 
-.menu {
+    .section {
-  position: fixed;
+      margin-bottom: $padding-16;
-  width: $nav-menu-width;
+      > a { font-weight: 700; }
-  top: $header-height;
+      > ul { padding-left: 0; }
-  bottom: 0;
-  box-sizing: border-box;
-  padding: $padding-16;
-
-  background: $nav-background;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  transition: transform 0.3s ease-in-out;
-  will-change: transform;
-
-  font-size: $font-size-14;
-  line-height: 2rem;
-
-  a {
-    display: block;
-    color: $nav-link-color;
-
-    &.active {
-      color: $color-link;
     }
   }
 
-  ul {
-    list-style: none;
-  }
-
-  // No padding for first level
-  > ul {
-    padding: 0;
-  }
-
-  // Move content
-  + div {
-    margin-left: $nav-menu-width;
-    margin-top: $header-height;
-  }
-
-  .root-section {
-    margin-bottom: $padding-16;
-    > a { font-weight: 600; }
-    > 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 {
+    nav {
-      border-left: $padding-1 solid $gray-100;
+      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
+// Responsive styles
-@media screen and (max-width: 50rem) {
+$menu-hide-point: $nav-menu-width + $body-min-width;
-  .header label {
+$toc-hide-point: $menu-hide-point + $nav-menu-width;
-    display: inline-block;
-  }
 
+@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 {
+  .header {
-      margin-left: 0;
+    display: flex;
+  }
+
+  #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;
     }
   }
-
-  #nav-control:checked + nav {
-    @include shadow;
-    transform: translateX(0);
-  }
 }

layouts/docs/baseof.html

@@ -7,37 +7,39 @@
 </head>
 
 <body>
-  <div class="header">
+  <input type="checkbox" style="display: none" id="menu-control" />
-    {{ partial "docs/header" . }}
+  <div class="content">
-  </div>
 
-  <input type="checkbox" style="display: none" id="nav-control" />
+    <div class="menu">
-  <nav role="navigation" class="menu">
+      <nav role="navigation">
-    {{ partial "docs/inject/nav-before" . }}
+        {{ partial "docs/inject/nav-before" . }}
         
-    {{ if .Site.Params.BookMenuBundle }}
+        {{ if .Site.Params.BookMenuBundle }}
-      {{ partial "docs/nav-bundle" . }}
+          {{ partial "docs/menu-bundle" . }}
-    {{ else }}
+        {{ else }}
-      {{ partial "docs/nav-filetree" . }}
+          {{ partial "docs/menu-filetree" . }}
-    {{ end }}
+        {{ end }}
       
-    {{ partial "docs/inject/nav-after" . }}
+        {{ partial "docs/inject/nav-after" . }}
-  </nav>
+      </nav>
+    </div>
 
-  <div>
+    <div class="page">
-    
+      <div class="header">
-    <div class="pure-g content">
+        <label for="menu-control"><img src="/svg/menu.svg" /></label>
-      <div class="pure-u-1 pure-u-lg-2-3 page markdown">
+      </div>
+      <div class="markdown">
         {{- .Content -}}
       </div>
-      {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }}
-      {{ if and ($showToC) (.Page.TableOfContents) }}
-      <div class="pure-u-1 pure-u-lg-1-3 pure-hidden-md toc">
-        {{ partial "docs/toc" . }}
-      </div>
-      {{ end }}
     </div>
 
+    {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }}
+    {{ if and ($showToC) (.Page.TableOfContents) }}
+    <div class="toc">
+      {{ partial "docs/toc" . }}
+    </div>
+    {{ end }}
+
   </div>
 
   {{ partial "docs/inject/body" . }}

layouts/partials/docs/header.html

@@ -1,6 +0,0 @@
-<label for="nav-control">
-  <img src="/svg/menu.svg" />
-</label>
-<h3>
-  <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
-</h3>

layouts/partials/docs/html-head.html

@@ -3,10 +3,7 @@
 <title>{{- template "title" .  }} | {{ .Site.Title -}}</title>
 
 <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700" rel="stylesheet">
-<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
-<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-min.css">
-<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
-
 
 {{ $styles := resources.Get "styles.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $styles.Permalink }}">

layouts/partials/docs/menu-filetree.html

@@ -8,7 +8,7 @@
 {{ define "book-section" }} <!-- Single section of menu (recursive) -->
   <ul>
     {{ range .Section.Sections }}
-    <li {{- if .Params.bookrootsection}} class="root-section" {{ end }}>
+    <li {{- if .Params.bookrootsection}} class="section" {{ end }}>
       {{- if .Content -}}
         {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
       {{- else -}}

layouts/partials/docs/nav-brand.html

@@ -1,3 +0,0 @@
-<h2 class="book-brand">
-  <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
-</h2>