Improve per-page CSS documentation

Author: csswizardry

css/_settings.global.scss

@@ -6,6 +6,8 @@ $brand-color:   #f43059;
 $brand-round:   3px;
 $base-round:    $brand-round;
 
+// Styles specific to page headers. Implemented in
+// `_components.page-head[--masthead].scss`, but defined globally here.
 $header-border-width:   6px;
 $header-max-height:     480px;
 

css/isolated/README.md

@@ -0,0 +1,5 @@
+# Isolated Components
+
+Certain components are not required on every page, so we pull them out of the
+main CSS file and compile them out into individual files. This means we can only
+include them on pages that need them.

css/isolated/components.page-head--masthead.scss

@@ -6,6 +6,10 @@
 @import "../tools.all";
 
 /**
+ * This class extends the `.page-head` class found in the base
+ * `_components.page-head.scss` file. The masthead-style page headers are only
+ * used on the homepage, so we pull it out into its own file.
+ *
  * Large site headers act more like mastheads. They have a faux-fluid-height
  * which is controlled by the wrapping element inside it.
  *