nodejs · bnb · Nov 19, 2015 · Nov 18, 2015 · Nov 19, 2015
diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl
@@ -1,13 +1,20 @@
 $body-max-width = 980px
 
+$white = #fff
+
 $node-green = #80bd01
-$lightgreen = #f1fbda
+$light-green = #f1fbda
+$hover-green = #d9ebb3
+
+$hover-red = #CC2828
 
-$node-gray  = #333
-$darkgray   = #666
-$lightgray  = #999
+$light-gray3 = #f0f0f0
+$light-gray2 = #ccc
+$light-gray = #999
+$gray = #666
+$node-gray = #333
 
-$border-color = #c0c0c0
+$black = #000
 
 padded-link($padding)
     padding-left $padding

diff --git a/layouts/css/base.styl b/layouts/css/base.styl
@@ -6,7 +6,7 @@ body
     font 400 20px/1.5 'Source Sans Pro', Open Sans, Roboto, 'San Francisco', Helvetica, Arial, sans-serif
     color $node-gray
     margin 0
-    background-color #fff
+    background-color $white
 
 header,
 #main,
@@ -28,12 +28,12 @@ a:active
     border-radius 2px
 
 a:hover
-    color #fff
+    color $white
     background-color $node-green
 
 a:hover
     code
-        color #CC2828
+        color $hover-red
 
 a.imagelink:hover
     background-color transparent
@@ -55,7 +55,7 @@ img
 
 
 code
-    background-color #f2f2f2
+    background-color $light-gray3
     font-size 85%
     padding 0.2em
 
@@ -65,10 +65,10 @@ pre
     padding 0.75em 1.2em
     font-size 0.8em
     white-space pre-wrap
-    color #f0f0f0
+    color $light-gray3
 
     code
-        color #f0f0f0
+        color $light-gray3
         background-color inherit
 
 // Import specific page sections and layout parts
@@ -102,7 +102,7 @@ pre
             margin-top 0
 
     span
-        color $lightgray
+        color $light-gray
         display block
 
 
@@ -128,7 +128,7 @@ pre
             > a,
             > a:hover
                 color $node-gray
-                background-color #D9EBB3
+                background-color $hover-green
 
     article
         margin-left 220px
@@ -151,13 +151,13 @@ pre
     font-size 10px
 
 .color-lightgray
-    color $lightgray
+    color $light-gray
 
 .no-padding
     padding 0
 
 .highlight-box
-    background-color #f0f0f0
+    background-color $light-gray3
     padding 5px 15px
     border-radius 2px
     margin-top 1em

diff --git a/layouts/css/layout/_lists.styl b/layouts/css/layout/_lists.styl
@@ -8,7 +8,7 @@
         + li:before
             content '|'
             padding 0 .3em 0 .1em
-            color $lightgray
+            color $light-gray
 
 
 @media screen and (max-width: 480px)

diff --git a/layouts/css/page-modules/_anchorLinks.styl b/layouts/css/page-modules/_anchorLinks.styl
@@ -1,13 +1,13 @@
 // Anchor links for page headings
 .anchor
-    color #ccc
+    color $light-gray2
     background none
     padding 0 .25em
 
     &:link
     &:active
     &:hover
-        color #ccc
+        color $light-gray2
         background inherit
 
 

diff --git a/layouts/css/page-modules/_blog-index.styl b/layouts/css/page-modules/_blog-index.styl
@@ -1,4 +1,4 @@
 .blog-index
     time
         margin-right 1em
-        color $lightgray
+        color $light-gray
diff --git a/layouts/css/page-modules/_blog-post.styl b/layouts/css/page-modules/_blog-post.styl
@@ -1,5 +1,5 @@
 .blogpost-header
-    border-bottom 1px solid $border-color
+    border-bottom 1px solid $light-gray2
     padding-bottom 0.5rem
 
     h1

diff --git a/layouts/css/page-modules/_download.styl b/layouts/css/page-modules/_download.styl
@@ -36,7 +36,7 @@
         display block
         width 100%
         padding-top 1em
-        background $lightgreen
+        background $light-green
 
     img
         display block
@@ -48,26 +48,26 @@
 
 
     a:hover, a:active
-        background $darkgray
+        background $gray
         color $node-green
 
 .download-version-toggle
     display flex
     flex-wrap wrap
     width calc(100% - 4px)
     border 2px solid $node-green
-    background $lightgreen
+    background $light-green
 
     a
         margin 2px
         padding 5px 2px
 
     a:hover, a:active, a.is-version
         color $node-green
-        background $darkgray
+        background $gray
 
     a.is-version
-        color $lightgreen
+        color $light-green
         background $node-green
 
     .title
@@ -85,7 +85,7 @@
         width 33%
 
     td
-        border 1px solid $border-color
+        border 1px solid $light-gray2
 
         a,
         span
@@ -96,15 +96,15 @@
             text-align center
 
         a:hover, a:active
-            background $darkgray
+            background $gray
             color $node-green
 
 h5.download-table-previous-releases-header
     margin-bottom 5px
 
 .download-table
     font-size small
-    border 1px solid $border-color
+    border 1px solid $light-gray2
 
     td
         padding 5px
@@ -114,13 +114,13 @@ h5.download-table-previous-releases-header
 
     > tbody
         td
-            border-top 1px solid $border-color
+            border-top 1px solid $light-gray2
 
         tr:nth-child(odd)
-            background-color #eee
+            background-color $light-gray3
 
         tr:nth-child(even)
-            background-color #fff
+            background-color $white
 
 td.download-table-last
     text-align right

diff --git a/layouts/css/page-modules/_footer.styl b/layouts/css/page-modules/_footer.styl
@@ -6,7 +6,7 @@ footer
     a,
     a:link,
     a:active
-        color #ccc
+        color $light-gray2
 
     a:hover
         background-color transparent

diff --git a/layouts/css/page-modules/_header.styl b/layouts/css/page-modules/_header.styl
@@ -15,7 +15,7 @@ header
             padding 0 8px
             text-transform uppercase
             font-size 14px
-            color #ccc !important
+            color $light-gray2 !important
 
         a:hover
             background-color transparent
@@ -30,13 +30,12 @@ header
             &.active:after
                 top 100%
                 left 50%
-                border solid rgba(0, 0, 0, 0)
+                border solid transparent
                 content " "
                 height 0
                 width 0
                 position absolute
                 pointer-events none
-                border-color rgba(3, 3, 0, 0)
                 border-top-color $node-gray
                 border-width $border-width
                 margin-left -($border-width/2)px

diff --git a/layouts/css/page-modules/_home.styl b/layouts/css/page-modules/_home.styl
@@ -1,12 +1,12 @@
 .home-version
     padding-top 10px
     font-size 16px
-    color $darkgray
+    color $gray
 
 .home-version-banner
     color $node-gray
     font-size 130%
-    background-color $lightgreen
+    background-color $light-green
     padding 5px 15px
     border-radius 2px
     margin-top 1em
@@ -39,7 +39,7 @@
     padding 0.2em 0.6em
 
     background-color $node-green
-    color #fff !important
+    color $white !important
     border-radius 2px
     font-size 30px
     font-weight 400

diff --git a/layouts/css/page-modules/_interactiveBanner.styl b/layouts/css/page-modules/_interactiveBanner.styl
@@ -13,8 +13,8 @@
     margin-right auto
     padding-top 80px
     height 140px
-    -webkit-filter drop-shadow(5px 5px 5px #222)
-    filter drop-shadow(5px 5px 5px #222)
+    -webkit-filter drop-shadow(5px 5px 5px $node-gray)
+    filter drop-shadow(5px 5px 5px $node-gray)
 
 @media screen and (max-width 550px)
     .interactive-banner img

diff --git a/layouts/css/page-modules/_linuxfoundation.styl b/layouts/css/page-modules/_linuxfoundation.styl
@@ -2,8 +2,8 @@
     width 100%
     padding 1em 20px
     font-size 14px
-    color #fff
-    background #404042
+    color $white
+    background $node-gray
 
     p + p
         margin-top 0

diff --git a/layouts/css/page-modules/_scrollToTop.styl b/layouts/css/page-modules/_scrollToTop.styl
@@ -5,8 +5,8 @@ html
 #scrollToTop
     font-size 1rem
     color $node-gray
-    background-color #eee
-    border 1px solid #ddd
+    background-color $light-gray3
+    border 1px solid $gray2
     border-radius 2px
     position fixed
     bottom 10%