Increase width of main content to better fill large screens sizes

Author: mmistakes

assets/css/main.css

@@ -10,6 +10,9 @@
   @include breakpoint($large) {
     @include suffix(3 of 12);
   }
+  @include breakpoint($x-large) {
+    @include prefix(0.5 of 12);
+  }
 }
 
 .archive__subtitle {

assets/scss/_archive.scss

@@ -11,6 +11,9 @@
     padding-left: 1em;
     padding-right: 1em;
   }
+  @include breakpoint($x-large) {
+    max-width: $x-large;
+  }
   a {
     text-decoration: none;
     &:hover {
@@ -21,16 +24,20 @@
 
 .page__footer-copyright {
   @include breakpoint($medium) {
-    @include span(10 of 12);
-    @include pre(2);
+    @include prefix(2 of 12);
+  }
+  @include breakpoint($x-large) {
+    @include prefix(2.5 of 12);
   }
   font-size: 14px;
 }
 
 .page__footer-follow {
   @include breakpoint($medium) {
-    @include span(10 of 12);
-    @include pre(2);
+    @include prefix(2 of 12);
+  }
+  @include breakpoint($x-large) {
+    @include prefix(2.5 of 12);
   }
   ul {
     margin: 0;

assets/scss/_footer.scss

@@ -13,6 +13,9 @@
     padding-left: 1em;
     padding-right: 1em;
   }
+  @include breakpoint($x-large) {
+    max-width: $x-large;
+  }
   a {
     text-decoration: none;
   }
@@ -21,16 +24,20 @@
 /* Site name */
 .site-name {
   @include breakpoint($medium) {
-    @include span(10 of 12);
-    @include pre(2);
+    @include prefix(2 of 12);
+  }
+  @include breakpoint($x-large) {
+    @include prefix(2.5 of 12);
   }
   font-size: 24px;
 }
 
 .masthead__menu {
   @include breakpoint($medium) {
-    @include span(10 of 12);
-    @include pre(2);
+    @include prefix(2 of 12);
+  }
+  @include breakpoint($x-large) {
+    @include prefix(2.5 of 12);
   }
   margin-bottom: 1em;
   ul {

assets/scss/_masthead.scss

@@ -13,6 +13,9 @@
     padding-left: 1em;
     padding-right: 1em;
   }
+  @include breakpoint($x-large) {
+    max-width: $x-large;
+  }
 }
 
 .page {
@@ -22,6 +25,9 @@
   @include breakpoint($large) {
     padding-right: $right-sidebar-width;
   }
+  @include breakpoint($x-large) {
+    @include prefix(0.5 of 12);
+  }
 }
 
 .page__title {
@@ -39,26 +45,6 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
-  &:after {
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 8%;
-    width: 0;
-    height: 0;
-    border: 10px solid transparent;
-    border-bottom-color: $body-color;
-    @include breakpoint($small) {
-      left: 25%;
-    }
-    @include breakpoint($large) {
-      border-width: 20px;
-    }
-    @include breakpoint($x-large) {
-      left: 33.333333333%;
-    }
-  }
 }
 
 .page__hero-image {
@@ -156,8 +142,11 @@
   padding-top: 1em;
   border-top: 1px solid $border-color;
   @include breakpoint($medium) {
-    @include span(10);
-    @include pre(2);
+    @include span(10 of 12);
+    @include pre(2 of 12);
+  }
+  @include breakpoint($x-large) {
+    @include pre(2.5 of 12);
   }
   li {
     margin-bottom: 0;

assets/scss/_page.scss

@@ -9,6 +9,9 @@
     @include span(2 of 12);
     @include suffix(0.25 of 12);
   }
+  @include breakpoint($x-large) {
+    padding-right: 0;
+  }
   h2, h3, h4, h5, h6 {
     font-family: $sans-serif-narrow;
   }

assets/scss/_sidebar.scss

@@ -12,10 +12,13 @@
   @include breakpoint($large) {
     position: absolute;
     top: 0;
-    right: calc(50% - 512px + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
+    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 {

assets/scss/_toc.scss

@@ -74,7 +74,7 @@ $small                        : 600px;
 $medium                       : 768px;
 $medium-wide                  : 900px;
 $large                        : 1024px;
-$x-large                      : 1440px;
+$x-large                      : 1280px;
 
 
 /*