Added comments.

components/main.scss

@@ -44,24 +44,28 @@
     src: local('Montserrat Bold'), local('Montserrat-Bold'), url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype');
 }
 
+// Define global color variables.
 $-beige: #D7CEC7;
 $-grey: #565656;
 $-wine-red: #76323F;
 $-light-brown: #C09F80;
 $-almost-white: #f9f9f9;
 
-$-primary-sans-serif-font: Montserrat,
+// Define global sand/serif font variables.
+$-primary-sans-serif-font: 'Montserrat',
     Helvetica,
     sans-serif;
 $-primary-serif-font: 'Crimson Text',
     Times,
     serif;
 
+// Define viewport sizes.
 $-viewport-extra-small: 450px;
 $-viewport-small: 650px;
 $-viewport-medium: 750px;
 $-viewport-normal: 1000px;
 
+// Define when to hide the sidebar.
 $-viewport-toggle-sidebar: $-viewport-small;
 
 $-sidebar-width: 250px;
@@ -113,6 +117,7 @@ body {
     display: none;
 }
 
+// Media queries
 @media(max-width: $-viewport-normal) {
     .LP-Wrapper__Site {
         grid-template-columns: (0.75 * $-sidebar-width) 1fr;