Cleanup, restructure and flexbox prep

layout.scss

@@ -1,113 +1,2 @@
 @import "color";
 
-#nav-side {
-    width: 175px;
-    position: fixed;
-    top: 75px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
-    overflow-y: auto;
-    font-size: 0.8em;
-
-    background: #2F2F2F;
-
-    input {
-        display: none;
-    }
-
-    input + ul {
-        .max {
-            display: none;
-        }
-
-        .min {
-            display: inherit;
-        }
-
-        > li:nth-child(n+2) {
-            display: none;
-        }
-    }
-
-    input:checked + ul {
-        .max {
-            display: inherit;
-        }
-
-        .min {
-            display: none;
-        }
-
-        > li:nth-child(n+2) {
-            display: inherit;
-        }
-    }
-
-    > li {
-        li {
-            border-top: 1px solid #3f3f3f;
-            border-bottom: 1px solid #1a1a1a;
-            color: #fff;
-
-            &:first-child {
-                padding: 5px 0 5px 5px;
-            }
-
-            a {
-                display: block;
-                padding: 5px 0 5px 5px;
-
-                &:hover {
-                    background: #3F3F3F;
-                }
-            }
-        }
-    }
-
-    li:last-child li:last-child {
-        border-bottom: none;
-    }
-
-    .max, .min {
-        float: right;
-    }
-
-    i {
-        margin-right: 5px;
-    }
-}
-
-main {
-    height: 100%;
-    width: 100%;
-    position: relative;
-    top: 0;
-    bottom: 100%;
-    left: 0;
-    z-index: 1;
-
-    padding-right: 5px;
-
-    background: $background-color;
-    transition: all 0.2s;
-}
-
-.nav-trigger {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-}
-
-label[for="nav-trigger"] {
-    font-size: 2.0em;
-    height: 30px;
-    width: 30px;
-    cursor: pointer;
-}
-
-.nav-trigger:checked ~ main {
-    width: calc(100% - 175px);
-    left: 175px;
-    box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.5);
-}

main.scss

@@ -0,0 +1,33 @@
+main {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    top: 0;
+    bottom: 100%;
+    left: 0;
+    z-index: 1;
+
+    padding-right: 5px;
+
+    background: $background-color;
+    transition: all 0.2s;
+}
+
+.flex-container {
+    display: flex;
+    flex-directoion: row;
+    flex-wrap: wrap;
+    justify-content: flex-center;
+    align-items: flex-start;
+    align-content: flex-start;
+}
+
+.flex-item-static {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.flex-item {
+    flex-grow: 1;
+    flex-basis: auto;
+}

nav.scss

@@ -1,5 +1,102 @@
 @import "mixin", "color";
 
+#nav-side {
+    width: 175px;
+    position: fixed;
+    top: 75px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    overflow-y: auto;
+    font-size: 0.8em;
+
+    background: #2F2F2F;
+
+    input {
+        display: none;
+
+        &:checked + ul {
+            .max {
+                display: inherit;
+            }
+
+            .min {
+                display: none;
+            }
+
+            > li:nth-child(n+2) {
+                display: inherit;
+            }
+        }
+    }
+
+    input + ul {
+        .max {
+            display: none;
+        }
+
+        .min {
+            display: inherit;
+        }
+
+        > li:nth-child(n+2) {
+            display: none;
+        }
+    }
+
+    > li {
+        li {
+            border-top: 1px solid #3f3f3f;
+            border-bottom: 1px solid #1a1a1a;
+            color: #fff;
+
+            &:first-child {
+                padding: 5px 0 5px 5px;
+            }
+
+            a {
+                display: block;
+                padding: 5px 0 5px 5px;
+
+                &:hover {
+                    background: #3F3F3F;
+                }
+            }
+        }
+    }
+
+    li:last-child li:last-child {
+        border-bottom: none;
+    }
+
+    .max, .min {
+        float: right;
+    }
+
+    i {
+        margin-right: 5px;
+    }
+}
+
+.nav-trigger {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+}
+
+label[for="nav-trigger"] {
+    font-size: 2.0em;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+}
+
+.nav-trigger:checked ~ main {
+    width: calc(100% - 175px);
+    left: 175px;
+    box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.5);
+}
+
 .nav-top {
     margin: 5px 0 0 5px;
     display: block;

progress.scss

@@ -26,6 +26,7 @@
     position: relative;
     overflow: hidden;
 }
+
 .meter > span:after, .animate > span > span {
     content: "";
     position: absolute;

section.scss

@@ -15,7 +15,7 @@ section.box {
     padding: 10px;
 }
 
-section h1 {
+section > h1 {
     @include box-sizing(border-box);
     @include box-shadow-bottom(#f1f1f1);
     font-size: 1.3em;
@@ -24,7 +24,7 @@ section h1 {
     text-shadow: 1px 1px 1px #ffffff;
 }
 
-section h2 {
+section > h2 {
     @include box-sizing(border-box);
     font-size: 1.2em;
     margin-bottom: 5px;

size.scss

@@ -65,4 +65,34 @@
 
 .spacer {
     padding: 5px;
+}
+
+.fw-100 {
+    width: 100%;
+    margin: 5px;
+}
+
+.fw-50 {
+    width: 50%;
+    margin: 5px;
+}
+
+.fw-33 {
+    width: 33%;
+    margin: 5px;
+}
+
+.fw-25 {
+    width: 25%;
+    margin: 5px;
+}
+
+.fw-75 {
+    width: 75%;
+    margin: 5px;
+}
+
+.fw-66 {
+    width: 66%;
+    margin: 5px;;
 }

spinner.scss

@@ -97,101 +97,123 @@
     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
     animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
 }
+
 .spinner-3 .sk-circle2 {
     -webkit-transform: rotate(30deg);
     -ms-transform: rotate(30deg);
     transform: rotate(30deg);
 }
+
 .spinner-3 .sk-circle3 {
     -webkit-transform: rotate(60deg);
     -ms-transform: rotate(60deg);
     transform: rotate(60deg);
 }
+
 .spinner-3 .sk-circle4 {
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
 }
+
 .spinner-3 .sk-circle5 {
     -webkit-transform: rotate(120deg);
     -ms-transform: rotate(120deg);
     transform: rotate(120deg);
 }
+
 .spinner-3 .sk-circle6 {
     -webkit-transform: rotate(150deg);
     -ms-transform: rotate(150deg);
     transform: rotate(150deg);
 }
+
 .spinner-3 .sk-circle7 {
     -webkit-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
+
 .spinner-3 .sk-circle8 {
     -webkit-transform: rotate(210deg);
     -ms-transform: rotate(210deg);
     transform: rotate(210deg);
 }
+
 .spinner-3 .sk-circle9 {
     -webkit-transform: rotate(240deg);
     -ms-transform: rotate(240deg);
     transform: rotate(240deg);
 }
+
 .spinner-3 .sk-circle10 {
     -webkit-transform: rotate(270deg);
     -ms-transform: rotate(270deg);
     transform: rotate(270deg);
 }
+
 .spinner-3 .sk-circle11 {
     -webkit-transform: rotate(300deg);
     -ms-transform: rotate(300deg);
     transform: rotate(300deg);
 }
+
 .spinner-3 .sk-circle12 {
     -webkit-transform: rotate(330deg);
     -ms-transform: rotate(330deg);
     transform: rotate(330deg);
 }
+
 .spinner-3 .sk-circle2:before {
     -webkit-animation-delay: -1.1s;
     animation-delay: -1.1s;
 }
+
 .spinner-3 .sk-circle3:before {
     -webkit-animation-delay: -1s;
     animation-delay: -1s;
 }
+
 .spinner-3 .sk-circle4:before {
     -webkit-animation-delay: -0.9s;
     animation-delay: -0.9s;
 }
+
 .spinner-3 .sk-circle5:before {
     -webkit-animation-delay: -0.8s;
     animation-delay: -0.8s;
 }
+
 .spinner-3 .sk-circle6:before {
     -webkit-animation-delay: -0.7s;
     animation-delay: -0.7s;
 }
+
 .spinner-3 .sk-circle7:before {
     -webkit-animation-delay: -0.6s;
     animation-delay: -0.6s;
 }
+
 .spinner-3 .sk-circle8:before {
     -webkit-animation-delay: -0.5s;
     animation-delay: -0.5s;
 }
+
 .spinner-3 .sk-circle9:before {
     -webkit-animation-delay: -0.4s;
     animation-delay: -0.4s;
 }
+
 .spinner-3 .sk-circle10:before {
     -webkit-animation-delay: -0.3s;
     animation-delay: -0.3s;
 }
+
 .spinner-3 .sk-circle11:before {
     -webkit-animation-delay: -0.2s;
     animation-delay: -0.2s;
 }
+
 .spinner-3 .sk-circle12:before {
     -webkit-animation-delay: -0.1s;
     animation-delay: -0.1s;