Fix Berlin layout on large screens

themes/berlin/scss/init/_config.scss

@@ -98,3 +98,4 @@ $small-screen: 30em; // 480
 $medium-screen: 40em; // 640
 $large-screen: 60em; // 960
 $xlarge-screen: 80em; // 1280
+$wide-screen: 120em; // 1920

themes/berlin/scss/init/_rebase.scss

@@ -13,7 +13,7 @@
   box-sizing: border-box;
 }
 html {
-  font-size: 100.01%; // bug arrondi sur vieux navigateurs
+  font-size: 100%;
   text-size-adjust: 100%;
   margin: 0;
   padding: 0;

themes/berlin/scss/partials/_common.scss

@@ -162,7 +162,7 @@ aside:not(#sidebar) {
   margin: 0 -5em 1em 2em;
   border-left: 3px solid #267daf;
 }
-@media only screen and (max-width: 60em) {
+@media only screen and (max-width: $large-screen) {
   aside {
     float: inherit;
     width: inherit;

themes/berlin/scss/partials/_global_layout.scss

@@ -24,7 +24,15 @@ body {
     padding: 0.5em;
   }
 }
-@media screen and(min-width: ($xlarge-screen + .1em)) and(max-width: 110em) {
+@media screen and(min-width: calc(#{$xlarge-screen} + 1px)) and(max-width: $wide-screen) {
+  body {
+    display: flex;
+    justify-content: center;
+  }
+  .banner,
+  #footer {
+    margin-left: 1em;
+  }
   #page {
     max-width: $xlarge-screen;
   }
@@ -41,17 +49,23 @@ body {
     }
   }
 }
-@media screen and(min-width: 110.1em) {
+@media screen and(min-width: calc(#{$wide-screen} + 1px)) {
   body {
     font-size: 1.125em;
+    display: flex;
+    justify-content: center;
   }
   #page {
-    max-width: 103em;
+    max-width: $wide-screen - 20em;
   }
   .header {
     max-width: zen-grid-item-width(8);
     padding-bottom: 0;
   }
+  .banner,
+  #footer {
+    margin-left: 1em;
+  }
   #main {
     @include zen-grid-item(8, 1);
   }

themes/berlin/scss/partials/_post.scss

@@ -280,7 +280,7 @@ button.preview:active {
   }
 }
 
-@media all and(min-width: $small-screen+.1em) {
+@media all and(min-width: $small-screen) {
   .post-day-date:after,
   .post-day-date:before {
     display: inline-block;

themes/berlin/scss/partials/_sidebar.scss

@@ -94,14 +94,14 @@
 .sidebar li:hover ul {
   background-color: $gray-very-dark;
 }
-@media screen and(min-width: ($small-screen + 0.1em)) and (max-width: $large-screen) {
+@media screen and(min-width: $small-screen) and (max-width: $large-screen) {
   .blognav__widgets .widget,
   .blogextra__widgets .widget {
     width: 50%;
     float: left;
   }
 }
-@media screen and(min-width: ($large-screen + .1em)) and(max-width: $xlarge-screen) {
+@media screen and(min-width: $large-screen) and(max-width: $xlarge-screen) {
   .blognav__widgets .widget,
   .blogextra__widgets .widget {
     width: 33.33%;