Massage the grid layout

_includes/toc

@@ -1,6 +1,6 @@
-<aside class="toc">
+<aside class="sidebar__right">
+<nav class="toc" markdown="1">
 <header><h4 class="toc__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
-<nav markdown="1">
 *  Auto generated table of contents
 {:toc .toc__menu}
 </nav>

_layouts/default.html

@@ -35,7 +35,7 @@ layout: compress
   {% endif %}
 
   <div id="main" role="main">
-    <div class="sidebar sticky">
+    {% if page.author_profile or page.sidebar %}<div class="sidebar sticky">
       {% if page.author_profile %}{% include author-profile.html %}{% endif %}
       {% if page.sidebar %}
         {% for s in page.sidebar %}
@@ -52,8 +52,7 @@ layout: compress
           {% if s.text %}{{ s.text | markdownify }}{% endif %}
         {% endfor %}
       {% endif %}
-      {% unless page.author_profile or page.sidebar %}&nbsp;{% endunless %}
+    </div>{% endif %}
-    </div>
     {{ content }}
   </div>
 

assets/_scss/_archive.scss

@@ -5,10 +5,10 @@
 .archive {
   margin-bottom: 2em;
   @include breakpoint($medium) {
-    @include span(10 of 12 last);
+    @include span(12 of 12);
   }
   @include breakpoint($large) {
-    @include suffix(3 of 12);
+    @include span(10 of 12 last);
   }
   @include breakpoint($x-large) {
     @include prefix(0.5 of 12);

assets/_scss/_footer.scss

@@ -7,7 +7,7 @@
   @include clearfix;
   margin-top: 3em;
   padding: 0 2em 3em;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     padding-left: 1em;
     padding-right: 1em;
   }
@@ -23,7 +23,7 @@
 }
 
 .page__footer-copyright {
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     @include prefix(2 of 12);
   }
   @include breakpoint($x-large) {
@@ -33,7 +33,7 @@
 }
 
 .page__footer-follow {
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     @include prefix(2 of 12);
   }
   @include breakpoint($x-large) {

assets/_scss/_masthead.scss

@@ -9,7 +9,7 @@
   font-family: $sans-serif-narrow;
   font-weight: 700;
   text-transform: uppercase;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     padding-left: 1em;
     padding-right: 1em;
   }
@@ -23,7 +23,7 @@
 
 /* Site name */
 .site-name {
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     @include prefix(2 of 12);
   }
   @include breakpoint($x-large) {
@@ -33,7 +33,7 @@
 }
 
 .masthead__menu {
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     @include prefix(2 of 12);
   }
   @include breakpoint($x-large) {

assets/_scss/_page.scss

@@ -9,7 +9,7 @@
   margin-top: 2em;
   padding-left: 2em;
   padding-right: 2em;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     padding-left: 1em;
     padding-right: 1em;
   }
@@ -20,13 +20,15 @@
 
 .page {
   @include breakpoint($medium) {
-    @include span(10 of 12 last);
+    padding-right: $right-sidebar-width-narrow;
   }
   @include breakpoint($large) {
+    @include span(10 of 12 last);
     padding-right: $right-sidebar-width;
   }
   @include breakpoint($x-large) {
     @include prefix(0.5 of 12);
+    padding-right: $right-sidebar-width-wide;
   }
 }
 
@@ -67,7 +69,7 @@
   z-index: 5;
   opacity: 0.5;
   border-radius: $border-radius 0 $border-radius 0;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     padding: 5px 10px;
   }
   a {
@@ -164,7 +166,7 @@
   border-top: 1px solid $border-color;
   @include clearfix();
   float: left;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     @include pre(2 of 12);
   }
   @include breakpoint($x-large) {

assets/_scss/_sidebar.scss

@@ -2,15 +2,17 @@
    SIDEBAR
    ========================================================================== */
 
+/*
+   Default
+   ========================================================================== */
+
 .sidebar {
   @include clearfix();
   margin-bottom: 2em;
   padding-bottom: 1em;
-  border-bottom: 1px solid $border-color;
+  @include breakpoint($large) {
-  @include breakpoint($medium) {
     @include span(2 of 12);
     @include suffix(0.25 of 12);
-    border-bottom: none;
   }
   @include breakpoint($x-large) {
     padding-right: 0;
@@ -27,6 +29,28 @@
   }
 }
 
+.sidebar__right {
+  @include breakpoint($medium) {
+    position: absolute;
+    top: 0;
+    right: 1em;
+    width: $right-sidebar-width-narrow;
+    padding-left: 2em;
+    @include breakpoint($large) {
+      width: $right-sidebar-width;
+    }
+    @include breakpoint($x-large) {
+      width: $right-sidebar-width-wide;
+    }
+  }
+  @include breakpoint($large) {
+    right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
+  }
+  @include breakpoint($x-large) {
+    right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
+  }
+}
+
 /*
    Author profile and links
    ========================================================================== */
@@ -35,7 +59,7 @@
   float: left;
   width: 50px;
   margin-right: 10px;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     float: none;
     width: initial;
   }
@@ -48,7 +72,7 @@
 .author__content {
   float: right;
   width: calc(100% - 60px); // subtract avatar width + any margin/padding
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     float: none;
     width: 100%;
   }
@@ -58,7 +82,7 @@
   margin: 0;
   font-family: $sans-serif-narrow;
   font-size: 20px;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     margin-top: 10px;
     margin-bottom: 10px;
   }
@@ -68,7 +92,7 @@
   margin-bottom: 10px;
   font-size: 14px;
   font-style: italic;
-  @include breakpoint($medium) {
+  @include breakpoint($large) {
     margin-bottom: 20px;
   }
 }
@@ -80,7 +104,7 @@
     padding-right: 5px;
     font-size: 14px;
     text-decoration: none;
-    @include breakpoint($medium) {
+    @include breakpoint($large) {
       display: block;
     }
     &:hover {

assets/_scss/_toc.scss

@@ -9,16 +9,6 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: #fff;
-  @include breakpoint($large) {
-    position: absolute;
-    top: 0;
-    right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
-    width: $right-sidebar-width;
-    padding-left: 2em;
-  }
-  @include breakpoint($x-large) {
-    right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
-  }
 }
 
 .toc__title {
@@ -53,7 +43,7 @@
   // hide sub sub links on small screens
   li > ul li {
     display: none;
-    @include breakpoint($large) {
+    @include breakpoint($medium) {
       display: block;
     }
   }

assets/_scss/_variables.scss

@@ -81,7 +81,9 @@ $x-large                      : 1280px;
    Grid
    ========================================================================== */
 
+$right-sidebar-width-narrow   : 200px;
 $right-sidebar-width          : 300px;
+$right-sidebar-width-wide     : 400px;
 
 $susy: (
   columns: 12,

assets/js/_main.js

@@ -12,7 +12,7 @@ $(document).ready(function(){
 
   var stickySideBar = function(){
     var windowWidth = $(window).width();
-    if (windowWidth > 768) {
+    if (windowWidth > 1024) {
       // fix
       Stickyfill.rebuild();
       Stickyfill.init();