Reorganize sass

epixa · Dec 12, 2015 · f6a5fca · f6a5fca
1 parent fed9bf1
commit f6a5fca
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/_sass/_defaults.scss b/_sass/_defaults.scss
@@ -15,7 +15,7 @@ body {
 }
 
 .page {
-  background-color: #fff;
+  background-color: $content-bg-color;
   margin: 0 auto;
   max-width: $max-content-width;
 }
@@ -39,7 +39,7 @@ img {
     vertical-align: middle;
 
     path {
-      fill: #828282;
+      fill: $grey-color;
     }
   }
 }

diff --git a/_sass/_home.scss b/_sass/_home.scss
@@ -10,24 +10,36 @@ $min-social-col-width: 15em;
 // todo: make this more universal
 $left-col-heading-color: #6f6f6f;
 
+/**
+ * Page
+ */
+.page {
+  @include media-query($on-laptop) {
+    > header.col { width: $min-left-col-width; }
+    > section.col { float: right; width: calc(100% - #{$min-left-col-width}); }
+    > aside.col { clear: left; width: $min-left-col-width; }
+  }
+}
 
+/**
+ * Me / Main header
+ */
 .me {
   align-items: center;
   display: flex;
   flex-direction: row;
   padding-bottom: $spacing-unit / 4;
 
   > img {
-    width: $headshot-dimension;
-    height: $headshot-dimension;
     flex-shrink: 0;
+    height: $headshot-dimension;
+    width: $headshot-dimension;
   }
 
   > hgroup {
     // begin hack for safari
     // prevents headshot from scaling on mid-sized resolutions
     flex-shrink: 0;
-
     // end hack for safari
 
     line-height: 1.2;
@@ -53,6 +65,9 @@ $left-col-heading-color: #6f6f6f;
   }
 }
 
+/**
+ * Social links
+ */
 .social-list {
   list-style: none;
 
@@ -66,23 +81,13 @@ $left-col-heading-color: #6f6f6f;
   a:hover {
     color: $red-color;
   }
-}
 
-@include media-query($on-tablet) {
-  .social-list {
+  @include media-query($on-tablet) {
     li { float: left; min-width: $min-social-col-width; }
     li:nth-child(even) { width: calc(100% - #{$min-social-col-width}); }
   }
-}
 
-@include media-query($on-laptop) {
-  .social-list {
+  @include media-query($on-laptop) {
     li, li:nth-child(even) { float: none; width: 100%; }
   }
-
-  .page {
-    > header.col { width: $min-left-col-width; }
-    > section.col { float: right; width: calc(100% - #{$min-left-col-width}); }
-    > aside.col { clear: left; width: $min-left-col-width; }
-  }
 }
diff --git a/css/styles.scss b/css/styles.scss
@@ -14,6 +14,7 @@ $spacing-unit:      1.5em;
 
 $text-color:        #222;
 $bg-color:          #222;
+$content-bg-color:  #fff;
 
 $red-color:         #ff4b46;