Merge pull request #48 from github/refactor-sass

Refactor and cleanup Sass and stylesheets

Author: Jordan McCullough

_layouts/bare.html

@@ -11,6 +11,13 @@
     {% endif %}
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
+    <link rel="stylesheet" media="all" href=
+    {% if page.theme %}
+      "../_stylesheets/page.css"
+    {% endif %}
+    "_stylesheets/page.css" 
+    />
+
     <link rel="stylesheet"
       media="screen"
       href=

_stylesheets/core.scss

@@ -254,6 +254,8 @@ nav{
   }
 }
 
+
+/* Colorization */
 .colorful{
   background: $color-dark;
   color: $mono-bright;
@@ -265,3 +267,86 @@ nav{
     color: $mono-bright;
   }
 }
+
+.invert{
+  background: $mono-dark;
+  border-bottom: solid 1px $mono-light;
+  color: $mono-bright;
+  h2,h3,p{
+    color: darken($mono-light, 10%);
+  }
+
+  a{
+    color: $mono-bright;
+  }
+}
+
+.grey{
+  background: lighten($mono-light, 5%);
+  border-top: solid 1px $mono-light;
+  border-bottom: solid 1px $mono-light;
+}
+
+/* Alignment */
+.left{
+  float:left;
+  clear:left;
+}
+.right{
+  float:right;
+  clear:right;
+}
+
+/* Layout */
+section{
+  & .container{
+    &.hero{
+      margin: 70px auto 70px auto;
+
+      p{
+        font-size: 125%;
+        color: lighten($color-dark, 40%);
+        margin: 20px 0;
+      }
+    }
+  }
+}
+
+.segment-content{
+  width: $width-desktop*.66;
+  display: inline-block;
+}
+
+.segment-icon{
+  width: $width-desktop*0.31;
+  padding: $width-desktop*0.01;
+  display: inline-block;
+  text-align: center;
+  font-size: 80%;
+  color: lighten($mono-dark, 20%);
+
+  a{
+    display: block;
+    border-radius: 3px;
+    box-shadow: 0 0 0 1px $color-bright;
+    padding: 20px;
+    -webkit-transition: box-shadow 150ms, color 150ms, background 150ms;
+    transition: box-shadow 150ms, color 150ms, background 150ms;
+
+    &:hover{
+      box-shadow: 0 0 0 2px $color-dark;
+      color: $mono-bright;
+      background: $color-dark;
+    }
+
+    color: $color-bright;
+  }
+
+  .octicon{
+    height: 50px;
+    width: 50px;
+    font-size: 30px;
+    border-radius: 50%;
+    text-align: center;
+  }
+}