Improve breakpoints

Create a new breakpoint in between "large" and "x-large" so the size changes are a little bit more fluid.

Tune-up how the right and left sidebars and the post/page content behaves. It feels more fluid now and usually when the size of the browser decreases the content decreases. Before at some breakpoints the content was bigger than in the wider breakpoint.

Create a $max-width variable, so know the content can be wider than the larger breakpoint. This variable is applied to page, search and masthead "__inner-wrap".

_sass/minimal-mistakes/_archive.scss

@@ -12,6 +12,11 @@
     padding-right: $right-sidebar-width-narrow;
   }
 
+  @include breakpoint($large-wide) {
+    width: calc(100% - #{$right-sidebar-width-narrow-wide});
+    padding-right: $right-sidebar-width-narrow-wide;
+  }
+
   @include breakpoint($x-large) {
     width: calc(100% - #{$right-sidebar-width});
     padding-right: $right-sidebar-width;

_sass/minimal-mistakes/_masthead.scss

@@ -30,7 +30,7 @@
     font-family: $sans-serif-narrow;
 
     @include breakpoint($x-large) {
-      max-width: $x-large;
+      max-width: $max-width;
     }
 
     nav {

_sass/minimal-mistakes/_page.scss

@@ -18,7 +18,7 @@
   animation-delay: 0.15s;
 
   @include breakpoint($x-large) {
-    max-width: $x-large;
+    max-width: $max-width;
   }
 }
 .landing {
@@ -31,6 +31,11 @@
   @include breakpoint($large) {
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
+    padding-right: $right-sidebar-width-narrow-wide;
+  }
+
+  @include breakpoint($large-wide) {
+    width: calc(100% - #{$right-sidebar-width-narrow-wide});
     padding-right: $right-sidebar-width;
   }
 

_sass/minimal-mistakes/_search.scss

@@ -64,7 +64,7 @@
     animation-delay: 0.15s;
 
     @include breakpoint($x-large) {
-      max-width: $x-large;
+      max-width: $max-width;
     }
   }
 
@@ -106,11 +106,11 @@
     margin-bottom: 2em;
 
     @include breakpoint($large) {
-      width: 75%;
+      width: 65%;
     }
 
     @include breakpoint($x-large) {
-      width: 50%;
+      width: 55%;
     }
   }
 

_sass/minimal-mistakes/_sidebar.scss

@@ -36,6 +36,10 @@
     }
   }
 
+  @include breakpoint($large-wide) {
+    width: calc(#{$right-sidebar-width-narrow-wide} - 1em);
+  }
+
   @include breakpoint($x-large) {
     width: calc(#{$right-sidebar-width} - 1em);
   }
@@ -95,6 +99,11 @@
   }
 
   @include breakpoint($large) {
+    width: $right-sidebar-width-narrow-wide;
+    margin-right: -1 * $right-sidebar-width-narrow-wide;
+  }
+
+  @include breakpoint($large-wide) {
     width: $right-sidebar-width;
     margin-right: -1 * $right-sidebar-width;
   }

_sass/minimal-mistakes/_variables.scss

@@ -162,13 +162,16 @@ $small: 600px !default;
 $medium: 768px !default;
 $medium-wide: 900px !default;
 $large: 1024px !default;
-$x-large: 1400px !default;
+$large-wide: 1160px !default; 
+$x-large: 1280px !default;
+$max-width: 1400px !default;
 
 /*
    Grid
    ========================================================================== */
 
 $right-sidebar-width-narrow: 200px !default;
+$right-sidebar-width-narrow-wide: 250px !default; 
 $right-sidebar-width: 300px !default;
 $right-sidebar-width-wide: 400px !default;