Reduce ugly <div class=outer> markup

..and replace that "container" aproach by a padding-left/padding-right
calculated from viewportwidth aproach.

This optimization saves around 27bytes

1 files changed, 14 insertions, 19 deletions

diff --git a/style.css b/style.css
index 19cf013..1248305 100644
--- a/style.css
+++ b/style.css
@@ -44,9 +44,11 @@ footer:before {
 
 body > * {
         flex: none;
+        width: 100%;
+        padding: 0 calc(50vw - 32.5em);
 }
 
-body > .outer {
+body > main {
         flex: 1 0 auto;
 }
 
@@ -128,15 +130,10 @@ label {
 	min-width: 90px;
 }
 
-header, nav, main, footer {
-        width: 65em;
-	max-width: 65em;
-	margin: 0 auto;
-}
-
 header {
         margin-bottom: 1em;
-        padding: 2em 0 0.5em;
+        padding-top: 2em;
+        padding-bottom: 0.5em;
 }
 
 header .h1, header .h2 {
@@ -172,11 +169,6 @@ nav > ul:after {
         clear: both;
 }
 
-.outer {
-        background: white;
-	border-top: 2px var(--color-red) solid;
-        padding: 2em 0;
-}
 nav > ul {
         padding-left: 0;
         margin-left: 0;
@@ -214,6 +206,11 @@ nav > ul a.active {
 main {
         display: flex;
         flex-direction: row;
+        position: relative;
+        background: white;
+	border-top: 2px var(--color-red) solid;
+        padding-top: 2em;
+        padding-bottom: 2em;
 }
 
 article, aside {
@@ -296,9 +293,9 @@ footer p a {
 }
 
 @media (max-width: 75em) {
-        header, nav, main, footer {
-                width: 62em;
-                max-width: 62em;
+        body > * {
+                padding-left: calc(50vw - 31em);
+                padding-right: calc(50vw - 31em);
         }
         header .h1 {
                 font-size: 2.8em;
@@ -313,9 +310,7 @@ footer p a {
                 /* For google pagespeed */
                 line-height: 1.4;
         }
-        header, nav, main, footer {
-                width: 100%;
-                max-width: 100%;
+        body > * {
                 padding-left: 1em;
                 padding-right: 1em;
         }