From 29b9cab973047c3a7e3123793996ba01ab7dbee9 Mon Sep 17 00:00:00 2001 From: rnsloan Date: Thu, 19 Nov 2015 02:44:31 +1100 Subject: [PATCH 1/2] css colour reorganising - store all colors as variables - replaced #f2f2f2 usage with #f0f0f0 as the two shades of gray are almost identical - remove redundant border-color property for the site menu active arrow --- layouts/css/_variables.styl | 22 ++++++++++++++----- layouts/css/base.styl | 20 ++++++++--------- layouts/css/layout/_lists.styl | 2 +- layouts/css/page-modules/_anchorLinks.styl | 4 ++-- layouts/css/page-modules/_blog-index.styl | 2 +- layouts/css/page-modules/_blog-post.styl | 2 +- layouts/css/page-modules/_download.styl | 22 +++++++++---------- layouts/css/page-modules/_footer.styl | 2 +- layouts/css/page-modules/_header.styl | 5 ++--- layouts/css/page-modules/_home.styl | 6 ++--- .../css/page-modules/_interactiveBanner.styl | 4 ++-- .../css/page-modules/_linuxfoundation.styl | 4 ++-- layouts/css/page-modules/_scrollToTop.styl | 4 ++-- 13 files changed, 55 insertions(+), 44 deletions(-) diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl index 8a85fff7c7b22..fb9c8fdba5d8f 100644 --- a/layouts/css/_variables.styl +++ b/layouts/css/_variables.styl @@ -1,13 +1,25 @@ $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 +$node-gray = #333 +$dark-gray = #666 +$light-gray = #999 +$gray1 = #ccc +$gray2 = #c0c0c0 +$gray3 = #ddd +$gray4 = #eee +$gray5 = #f0f0f0 -$border-color = #c0c0c0 +$black = #000 +$black2 = #222 +$black3 = #404042 padded-link($padding) padding-left $padding diff --git a/layouts/css/base.styl b/layouts/css/base.styl index 17ab6b0673b3b..a36e8bc0e60c8 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 $gray5 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 $gray5 code - color #f0f0f0 + color $gray5 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 $gray5 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..b4de9b9c59b36 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 $gray1 background none padding 0 .25em &:link &:active &:hover - color #ccc + color $gray1 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..54b156471e077 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 $gray2 padding-bottom 0.5rem h1 diff --git a/layouts/css/page-modules/_download.styl b/layouts/css/page-modules/_download.styl index 482c634aa0d6c..589b8beb31ec4 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 $dark-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 $dark-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 $gray2 a, span @@ -96,7 +96,7 @@ text-align center a:hover, a:active - background $darkgray + background $dark-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 $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 $gray2 tr:nth-child(odd) - background-color #eee + background-color $gray4 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..710889ce70efe 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 $gray1 a:hover background-color transparent diff --git a/layouts/css/page-modules/_header.styl b/layouts/css/page-modules/_header.styl index 80470275543ab..58774d18a3bd7 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 $gray1 !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..6b7a11e808539 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 $dark-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..44f44946f084e 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 $black2) + filter drop-shadow(5px 5px 5px $black2) @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..0407d0016521a 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 $black3 p + p margin-top 0 diff --git a/layouts/css/page-modules/_scrollToTop.styl b/layouts/css/page-modules/_scrollToTop.styl index aff0c3bbaba63..6a04cb739971a 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 $gray4 + border 1px solid $gray3 border-radius 2px position fixed bottom 10% From da396786512e19d432a79bb86f83961241ffed93 Mon Sep 17 00:00:00 2001 From: rnsloan Date: Fri, 20 Nov 2015 01:26:59 +1100 Subject: [PATCH 2/2] reduce the number of black and grays on the site from 11 to 6 --- layouts/css/_variables.styl | 13 ++++--------- layouts/css/base.styl | 8 ++++---- layouts/css/page-modules/_anchorLinks.styl | 4 ++-- layouts/css/page-modules/_blog-post.styl | 2 +- layouts/css/page-modules/_download.styl | 14 +++++++------- layouts/css/page-modules/_footer.styl | 2 +- layouts/css/page-modules/_header.styl | 2 +- layouts/css/page-modules/_home.styl | 2 +- layouts/css/page-modules/_interactiveBanner.styl | 4 ++-- layouts/css/page-modules/_linuxfoundation.styl | 2 +- layouts/css/page-modules/_scrollToTop.styl | 4 ++-- 11 files changed, 26 insertions(+), 31 deletions(-) diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl index fb9c8fdba5d8f..b9c31a2653cf9 100644 --- a/layouts/css/_variables.styl +++ b/layouts/css/_variables.styl @@ -8,18 +8,13 @@ $hover-green = #d9ebb3 $hover-red = #CC2828 -$node-gray = #333 -$dark-gray = #666 +$light-gray3 = #f0f0f0 +$light-gray2 = #ccc $light-gray = #999 -$gray1 = #ccc -$gray2 = #c0c0c0 -$gray3 = #ddd -$gray4 = #eee -$gray5 = #f0f0f0 +$gray = #666 +$node-gray = #333 $black = #000 -$black2 = #222 -$black3 = #404042 padded-link($padding) padding-left $padding diff --git a/layouts/css/base.styl b/layouts/css/base.styl index a36e8bc0e60c8..d4339fef9a2a7 100644 --- a/layouts/css/base.styl +++ b/layouts/css/base.styl @@ -55,7 +55,7 @@ img code - background-color $gray5 + 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 $gray5 + color $light-gray3 code - color $gray5 + color $light-gray3 background-color inherit // Import specific page sections and layout parts @@ -157,7 +157,7 @@ pre padding 0 .highlight-box - background-color $gray5 + background-color $light-gray3 padding 5px 15px border-radius 2px margin-top 1em diff --git a/layouts/css/page-modules/_anchorLinks.styl b/layouts/css/page-modules/_anchorLinks.styl index b4de9b9c59b36..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 $gray1 + color $light-gray2 background none padding 0 .25em &:link &:active &:hover - color $gray1 + color $light-gray2 background inherit diff --git a/layouts/css/page-modules/_blog-post.styl b/layouts/css/page-modules/_blog-post.styl index 54b156471e077..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 $gray2 + 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 589b8beb31ec4..060679ea2768d 100644 --- a/layouts/css/page-modules/_download.styl +++ b/layouts/css/page-modules/_download.styl @@ -48,7 +48,7 @@ a:hover, a:active - background $dark-gray + background $gray color $node-green .download-version-toggle @@ -64,7 +64,7 @@ a:hover, a:active, a.is-version color $node-green - background $dark-gray + background $gray a.is-version color $light-green @@ -85,7 +85,7 @@ width 33% td - border 1px solid $gray2 + border 1px solid $light-gray2 a, span @@ -96,7 +96,7 @@ text-align center a:hover, a:active - background $dark-gray + 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 $gray2 + border 1px solid $light-gray2 td padding 5px @@ -114,10 +114,10 @@ h5.download-table-previous-releases-header > tbody td - border-top 1px solid $gray2 + border-top 1px solid $light-gray2 tr:nth-child(odd) - background-color $gray4 + background-color $light-gray3 tr:nth-child(even) background-color $white diff --git a/layouts/css/page-modules/_footer.styl b/layouts/css/page-modules/_footer.styl index 710889ce70efe..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 $gray1 + 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 58774d18a3bd7..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 $gray1 !important + color $light-gray2 !important a:hover background-color transparent diff --git a/layouts/css/page-modules/_home.styl b/layouts/css/page-modules/_home.styl index 6b7a11e808539..e446d720706c7 100644 --- a/layouts/css/page-modules/_home.styl +++ b/layouts/css/page-modules/_home.styl @@ -1,7 +1,7 @@ .home-version padding-top 10px font-size 16px - color $dark-gray + color $gray .home-version-banner color $node-gray diff --git a/layouts/css/page-modules/_interactiveBanner.styl b/layouts/css/page-modules/_interactiveBanner.styl index 44f44946f084e..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 $black2) - filter drop-shadow(5px 5px 5px $black2) + -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 0407d0016521a..64d2efcf78631 100644 --- a/layouts/css/page-modules/_linuxfoundation.styl +++ b/layouts/css/page-modules/_linuxfoundation.styl @@ -3,7 +3,7 @@ padding 1em 20px font-size 14px color $white - background $black3 + 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 6a04cb739971a..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 $gray4 - border 1px solid $gray3 + background-color $light-gray3 + border 1px solid $gray2 border-radius 2px position fixed bottom 10%