Improve page and archive layout

- Center main content on page - Harmonize sidebar columns to be equal widths Fixes #1155
mmistakes · Aug 8, 2017 · cebdd16 · cebdd16
1 parent 5c9621d
commit cebdd16
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 28 deletions.
diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
@@ -5,14 +5,15 @@
 .archive {
   margin-bottom: 2em;
 
-  @include breakpoint($medium) {
-    width: span(12 of 12);
-  }
-
   @include breakpoint($large) {
     float: right;
-    padding-left: gutter(0.5 of 12);
-    width: span(10 of 12);
+    width: calc(100% - #{$right-sidebar-width-narrow});
+    padding-right: $right-sidebar-width-narrow;
+  }
+
+  @include breakpoint($x-large) {
+    width: calc(100% - #{$right-sidebar-width});
+    padding-right: $right-sidebar-width;
   }
 
   a {
@@ -84,17 +85,6 @@
    ========================================================================== */
 
 .list__item {
-  @include breakpoint($medium) {
-    padding-right: $right-sidebar-width-narrow;
-  }
-
-  @include breakpoint($large) {
-    padding-right: $right-sidebar-width;
-  }
-
-  @include breakpoint($x-large) {
-    padding-right: $right-sidebar-width-wide;
-  }
 
   .page__meta {
     margin: 0 0 4px;

diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
@@ -24,9 +24,13 @@
 
   @include breakpoint($large) {
     float: right;
-    width: span(10 of 12);
-    padding-left: gutter(0.5 of 12);
-    padding-right: gutter(2 of 12);
+    width: calc(100% - #{$right-sidebar-width-narrow});
+    padding-right: $right-sidebar-width-narrow;
+  }
+
+  @include breakpoint($x-large) {
+    width: calc(100% - #{$right-sidebar-width});
+    padding-right: $right-sidebar-width;
   }
 
   .page__inner-wrap {
@@ -409,9 +413,11 @@
 
   @include breakpoint($large) {
     float: right;
-    width: span(10 of 12);
-    padding-left: gutter(0.5 of 12);
-    padding-right: gutter(2 of 12);
+    width: calc(100% - #{$right-sidebar-width-narrow});
+  }
+
+  @include breakpoint($x-large) {
+    width: calc(100% - #{$right-sidebar-width});
   }
 
   a {

diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
@@ -31,10 +31,6 @@
     }
   }
 
-  @include breakpoint($x-large) {
-    padding-right: 0;
-  }
-
   h2, h3, h4, h5, h6 {
     margin-bottom: 0;
     font-family: $sans-serif-narrow;
@@ -58,12 +54,14 @@
     position: relative;
     float: right;
     width: $right-sidebar-width-narrow;
-    margin-left: span(0.5 of 12);
+    margin-right: -1 * $right-sidebar-width-narrow;
+    padding-left: 1em;
     z-index: 10;
   }
 
   @include breakpoint($x-large) {
     width: $right-sidebar-width;
+    margin-right: -1 * $right-sidebar-width;
   }
 }