Rework of main template, adds options for more fine customisation

5 files changed, 34 insertions, 40 deletions

diff --git a/assets/_defaults.scss b/assets/_defaults.scss
index 354af74..af7aa24 100644
--- a/assets/_defaults.scss
+++ b/assets/_defaults.scss
@@ -31,15 +31,14 @@ $body-background: white !default;
 $body-font-color: $gray-800 !default;
 $body-font-weight: normal !default;
 
-$body-min-width: 20rem !default;
+$body-min-width: 25rem !default;
 $container-max-width: 80rem !default;
 
 $header-height: 3.5rem !default;
 $menu-width: 16rem !default;
 $toc-width: 16rem !default;
 
-$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
-$sm-breakpoint: $menu-width + $body-min-width !default;
+$mobile-breakpoint: $menu-width + $body-min-width + $toc-width !default;
 
 // Hint colors
 $hint-colors: (
diff --git a/assets/_main.scss b/assets/_main.scss
index 03bc298..1be9960 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -47,11 +47,6 @@ img {
   vertical-align: baseline;
 }
 
-main {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
 aside nav ul {
   padding: 0;
   margin: 0;
@@ -162,8 +157,12 @@ ul.pagination {
 }
 
 .book-header {
-  margin-bottom: $padding-16;
   display: none;
+  margin-bottom: $padding-16;
+
+  label {
+    line-height: 0;
+  }
 }
 
 .book-search {
@@ -230,7 +229,6 @@ ul.pagination {
 }
 
 .book-footer {
-  display: flex;
   padding-top: $padding-16;
   font-size: $font-size-14;
 
@@ -272,7 +270,7 @@ ul.pagination {
     }
 
     img {
-      opacity: .1;
+      opacity: 0.1;
     }
 
     li.active img {
@@ -298,46 +296,41 @@ ul.pagination {
 // Responsive styles
 aside nav,
 .book-page,
+.book-header aside,
 .markdown {
   transition: 0.2s ease-in-out;
   transition-property: transform, margin, opacity;
   will-change: transform, margin;
 }
 
-@media screen and (max-width: $md-breakpoint) {
+@media screen and (max-width: $mobile-breakpoint) {
   .book-menu {
     margin-left: -$menu-width;
     font-size: $font-size-base;
   }
+
   .book-toc {
-    margin-right: -$toc-width;
-    font-size: $font-size-base;
+    display: none;
   }
 
   .book-header {
-    display: flex;
+    display: block;
   }
 
-  #menu-control:checked ~ main {
-    .book-menu #BookMenu,
+  #menu-control:checked + main {
+    .book-menu nav,
     .book-page {
       transform: translateX($menu-width);
     }
+
+    .book-header aside,
     .markdown {
       opacity: 0.25;
     }
-    .book-header #menu-control {
-      transform: rotate(90deg);
-    }
   }
-  #toc-control:checked ~ main {
-    aside #TableOfContents,
-    .book-page {
-      transform: translateX(-$menu-width);
-    }
-    .markdown {
-      opacity: 0.25;
-    }
+
+  #toc-control:checked + aside {
+    display: block;
   }
 }
 
diff --git a/assets/_print.scss b/assets/_print.scss
index 6acd75e..8ae2901 100644
--- a/assets/_print.scss
+++ b/assets/_print.scss
@@ -1,19 +1,17 @@
 @media print {
   .book-menu,
-  .book-footer {
+  .book-footer,
+  .book-toc {
     display: none;
   }
 
-  main {
+  .book-header,
+  .book-header aside {
     display: block;
   }
 
-  .book-toc {
-    flex: none;
-
-    nav {
-      position: relative;
-      width: auto;
-    }
+  main {
+    // Fix for https://bugzilla.mozilla.org/show_bug.cgi?id=939897
+    display: block !important;
   }
 }
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 451f8b8..97b7dc3 100644
--- a/assets/_shortcodes.scss
+++ b/assets/_shortcodes.scss
@@ -77,8 +77,7 @@
 
   > div {
     margin: $padding-16 0;
-    // max-width: 50%;
-    min-width: $body-min-width * 0.66;
+    min-width: $body-min-width / 2;
     padding: 0 $padding-16;
   }
 }
@@ -102,7 +101,6 @@ a.book-btn {
     &.#{$name} {
       border-left-color: $color;
       background-color: rgba($color, 0.1);
-      // background-color: $gray-100;
     }
   };
 }
diff --git a/assets/_utils.scss b/assets/_utils.scss
index 175a4ad..6162aba 100644
--- a/assets/_utils.scss
+++ b/assets/_utils.scss
@@ -46,6 +46,12 @@
   display: none;
 }
 
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 @mixin spin($duration) {
   animation: spin $duration ease infinite;
   @keyframes spin {