reordering blocks and adding comments

src/scss/_base.scss

@@ -28,6 +28,7 @@ webslides.js will add .ws-ready automatically. Don't worry :) -- */
   }
 }
 
+/* -- Prototype faster - Vertical rhythm  -- */
 .baseline {
   background: url('../images/baseline.png') left top .8rem/.8rem;
 }
@@ -86,6 +87,7 @@ nav a[rel='external'] em,
   }
 }
 
+/*=== 1.1 WRAP/CONTAINER === */
 .wrap,
 header nav,
 footer nav {
@@ -155,10 +157,11 @@ figure.alignleft {
 
 $sizes: 80, 70, 60, 50, 40, 30, 20;
 
+/*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
 @media (min-width: 1024px) {
   @each $size in $sizes {
     .size-#{$size} {
-      width: percentage($size / 100);
+      width: $size + '%';
     }
   }
 }

src/scss/_color.scss

@@ -2,7 +2,7 @@
 // sass-lint:disable no-vendor-prefixes
 
 /*=========================================
-Colors
+18. Colors
 =========================================== */
 
 /* -- Disable elastic scrolling/bounce:

src/scss/full.scss

@@ -38,21 +38,22 @@
   15. Longform Elements
 	16. Safari Bug (flex-wrap)
 	17. Print
+  18. Colors
 ----------------------------------------------------------------------------------- */
 
 @import 'vars';
 @import 'utils/mixins';
-@import 'utils/animations';
 @import 'utils/reset';
 @import 'utils/clear';
 
 @import 'base';
-@import 'typography';
-
+@import 'utils/animations';
 @import 'modules/media';
 @import 'modules/browser';
 @import 'modules/grid';
 
+@import 'typography';
+
 @import 'modules/header-footer';
 @import 'modules/logo';
 @import 'modules/navigation';