update button, navbar, headings.scss files

navbar.scss:
bring @media into .navbar ruleset
add line of documentation for @media

headings.scss
add minor documentation

button.scss
add documentation
update sass from less port (consolidate rule declarations, and move the generic button mixin into the main <button>, .btn ruleset so as to cut down on the selector size when it is compiled.

Added display: inline-block to button, .btn ruleset so padding & sizing will work properly on elements that are inline by default.

Please see scottohara.me/min for recommendations for updated button examples

sass/_button.scss

@@ -14,28 +14,47 @@
   }
 }
 
-@if $import-buttons == true{
+
+@if $import-buttons == true {
 //-------------------------------------------------------------------
 // Button Styles & Classes
 //-------------------------------------------------------------------
 
+
+// Set font styles for buttons
 ico, button, .btn {
   font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
 }
 
+
+// Set Generic <button> and .btn styling.
+// use .btn on any element to give it the styling of a button
 button, .btn {
-  background: #fff;
+  @include btn-style(#fff, #eee, #ddd);
+  border-radius: 10px;
   border: 0;
   color: #fff;
   cursor: pointer;
+  display: inline-block;
   font-size: 2.5em;
   margin: .3em .7em;
+  outline: 0;
   padding: 15px 40px 16px;
   text-decoration: none;
-  outline: 0;
-  border-radius: 10px;
+
+  // to make sure buttons are visible when not paired with a coloring
+  // class, we give the <button> and .btn a dark border and text color
+  &:not([class*='btn-']) {
+    box-shadow: 0 0 0 2px inset;
+    color: #000;
+    // We use box shadow here because then we can
+    // apply a border without changing the element height
+  }
 }
 
+
+// Set colors for your buttons, see the button mixin at the top of this
+// file to see how the hex colors are allocated
 .btn-a {
   @include btn-style(#0ae, #09d, #08b);
 }
@@ -48,16 +67,13 @@ button, .btn {
   @include btn-style(#d33, #c22, #b22);
 }
 
-button:not([class*='btn-']) {
-	color: #000;
-	box-shadow: 0 0 0 2px inset; /* We use box shadow here because then we can apply a border without changing the element height */
-  @include btn-style(#fff, #eee, #ddd);
-}
 
+// Add this class to a <button> or element with a .btn class
+// to create a smaller sized button.
 .btn-small {
-  padding: 7px 19px 8px;
-  font-size: 1em;
   border-radius: 7px;
+  font-size: 1em;
+  padding: 7px 19px 8px;
 }
 
 

sass/_headings.scss

@@ -3,16 +3,19 @@
 //  Headings
 //-------------------------------------------------------------------
 
+// add this class to any element to give it "title" styling
 .title {
   font-size: 7em;
   margin: 0;
 }
 
+// Set style for <h1>
 h1 {
   font-size: 4em;
   margin: 0;
 }
 
+// Sets style for <h2>
 h2 {
   font-size: 2em;
 }

sass/_navbar.scss

@@ -20,6 +20,16 @@
     // This ensures that any buttons and inputs in the
     // navbar will not mess up its vertical alignment
   }
+
+  // Update styling of .navbar for small screens
+  @media(max-width:500px) {
+    height: 7.5em;
+
+    a {
+      display: block;
+      text-align: center;
+    }
+  }
 }
 
 
@@ -40,18 +50,6 @@
 }
 
 
-@media(max-width:500px) {
-  .navbar {
-    height: 7.5em;
-
-    a {
-      display: block;
-      text-align: center;
-    }
-  }
-}
-
-
 //-------------------------------------------------------------------
 // End @if
 }