diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl index 8a85fff7c7b22..b9c31a2653cf9 100644 --- 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 index 17ab6b0673b3b..d4339fef9a2a7 100644 --- 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 index 28d3bf7ad4948..00a77d9884048 100644 --- 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 index 6094d210f3c16..c59f474e2101d 100644 --- 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 index b736bcabad260..ab6972c2513e8 100644 --- 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 index 06d852cfe1598..9d7603c389536 100644 --- 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 index 482c634aa0d6c..060679ea2768d 100644 --- 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,7 +48,7 @@ a:hover, a:active - background $darkgray + background $gray color $node-green .download-version-toggle @@ -56,7 +56,7 @@ flex-wrap wrap width calc(100% - 4px) border 2px solid $node-green - background $lightgreen + background $light-green a margin 2px @@ -64,10 +64,10 @@ 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,7 +96,7 @@ text-align center a:hover, a:active - background $darkgray + background $gray color $node-green h5.download-table-previous-releases-header @@ -104,7 +104,7 @@ h5.download-table-previous-releases-header .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 index 6b9328928fa67..98aac945be7e9 100644 --- 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 index 80470275543ab..1cf7a34790206 100644 --- 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 index 7024f8bff35c3..e446d720706c7 100644 --- 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 index 6af899b0deab1..ac56815545129 100644 --- 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 index e13f1fc518d74..64d2efcf78631 100644 --- 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 index aff0c3bbaba63..e6fda40cfefc3 100644 --- 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%