moat updates

move @media query for .row column from general.less to grid.less, since all the rest of the row/col styling is in that file.

additional revisions to navbar.scss and start of revisions to navbar.less

Further commenting for sass files

Remove a few other declarations from sass files to match updated less files from last night.

less/general.less

@@ -7,13 +7,6 @@ body, textarea {
 	transition: all .2s;
 }
 
-@media (max-width:870px) {
-	.row column {
-		width: 100%;
-		margin: 1% auto;
-	}
-}
-
 .btn, .navbar a {
 	text-decoration: none;
 }

less/grid.less

@@ -1,11 +1,14 @@
 /* Grid system responsive code is in general.less */
 
-/* Since every column has 2% padding (1% on each side) its width is (((its number/12) * 100)-2) percent (truncated, to avoid spillage.) Thus, c12 has width 98%. */
+/*
+	Since every column has 2% padding (1% on each side) its width is (((its number/12) * 100)-2) percent (truncated, to avoid spillage.) Thus, c12 has width 98%.
+*/
 
 .row {
 	margin-top: 2%;
 	overflow: auto; /* required - without this, the page layout is screwed up */
 }
+
 column {
 	float: left;
 	margin: auto 1%;
@@ -49,3 +52,11 @@ column {
 .c1 {
 	width: 6.33%;
 }
+
+/* For smaller screens, change all columns to 100% width */
+@media (max-width:870px) {
+	.row column {
+		margin: 1% auto;
+		width: 100%;
+	}
+}

less/navbar.less

@@ -1,9 +1,9 @@
-nav, .navbar-link:hover, .navbar a.pagename {
+.nav, .nav-link:hover, .nav .pagename {
 	background: #000;
 	color: #fff;
 }
 
-.navbar {
+.nav {
 	height: 1.5em;
 	padding: .7em 0 .95em;
 	/* Uncomment for animations
@@ -11,7 +11,7 @@ nav, .navbar-link:hover, .navbar a.pagename {
 	*/
 }
 
-.navbar a {
+.nav a {
 	padding-right: 1em;
 	color: #aaa;
 	top: -1px;
@@ -19,7 +19,7 @@ nav, .navbar-link:hover, .navbar a.pagename {
 	position: relative;
 }
 
-button.btn.close.btn-sm {
+.btn-close {
 	background: #000;
 	visibility: hidden;
 	float: right;
@@ -31,7 +31,7 @@ button.btn.close.btn-sm {
 	color: #fff; /* make current page link white */
 }
 
-.navbar a.pagename {
+.nav .pagename {
 	font-size: 22px;
 	top: 1px;
 }
@@ -40,21 +40,21 @@ button.btn.close.btn-sm {
 	button.btn.close.btn-sm {
 		visibility: visible;
 	}
-	.navbar {
+	.nav {
 		/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
 		overflow: hidden;
 	}
 	.pagename {
 		margin-top: -11px;
 	}
-	.navbar:focus {
+	.nav:focus {
 		/* Necesary for animations
 		max-height: 500px;
 		height: 100%;
 		*/
 		height: auto;
 	}
-	.navbar:before {
+	.nav:before {
 		content: '_';
 		border-bottom: 10px double;
 		float: right;
@@ -64,7 +64,7 @@ button.btn.close.btn-sm {
 		height: 21px;
 		font: bold 32px/0 sans-serif; /* bold, 32px sans-serif text with a line-height of zero */
 	}
-	.navbar a {
+	.nav a {
 		padding: .5em 0;
 		width: 50%;
 		display: block;

sass/_general.scss

@@ -5,8 +5,11 @@
 body, textarea {
   font: 16px Arial, sans-serif;
   margin: 0;
+  // Arial is used so the nav bar looks nice in iOS
 }
 
+
+// apply a smooth transition effect to an element's state change
 .smooth {
   transition: all .2s;
 }

sass/_grid.scss

@@ -10,9 +10,8 @@
 //-------------------------------------------------------------------
 
 .row {
-  line-height: 2em;
   margin-top: 2%;
-  overflow: auto;
+  overflow: auto; // needed for proper formed layout
 }
 
 column {
@@ -20,13 +19,6 @@ column {
   margin: auto 1%;
 }
 
-@media (max-width:870px) {
-  .row column {
-    margin: 1% auto;
-    width: 100%;
-  }
-}
-
 // IE Grid Fix
 .ie column {
   margin: auto .7%;
@@ -69,6 +61,14 @@ column {
 	width: 6.33%;
 }
 
+
+@media (max-width:870px) {
+  .row column {
+    margin: 1% auto;
+    width: 100%;
+  }
+}
+
 //-------------------------------------------------------------------
 // End @if
 }

sass/_icons.scss

@@ -1,4 +1,4 @@
-@if $import-icons == true{
+@if $import-icons == true {
 //-------------------------------------------------------------------
 //  Icons
 //-------------------------------------------------------------------

sass/_navbar.scss

@@ -1,21 +1,28 @@
-@if $import-navbar == true{
+@if $import-navbar == true {
 //-------------------------------------------------------------------
 //  Navigation Bar
 //-------------------------------------------------------------------
 
-.nav {
+// CSS reused in multiple selectors
+%nav-global {
   background: #000;
   color: #fff;
+}
+
+
+
+.nav {
+  @extend %nav-global;
   height: 1.5em;
   line-height: 1.5em;
   // max-height: 1.5em; // needed for animations, uncomment to use
   padding: .7em 0 .95em;
 
   a {
+    @extend %no-underline;
     color: #aaa;
     font-size: 14px;
     padding-right: 1em;
-    text-decoration: none;
 
     &:hover {
       color: #fff;
@@ -42,9 +49,8 @@
 
 
 .btn-close {
-  background: #000;
+  @extend %nav-global;
   border: 0;
-  color: #fff;
   float: right;
   font-size: 25px;
   margin-top: -44px;