diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-01-23 16:01:46 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-01-23 16:01:46 +0100 |
commit | f855d645b2762054ceafd4e3ca57fc7436cadbc9 (patch) | |
tree | 484a9c723b0fca0ad39e222d2c7ce71b70a05ba4 /app/assets/stylesheets/about.scss | |
parent | d4d56b8af0e85e328eb1a323816d734ca16a4176 (diff) |
Move all hex colors in SASS to variables and all variations to darken/lighten
Diffstat (limited to 'app/assets/stylesheets/about.scss')
-rw-r--r-- | app/assets/stylesheets/about.scss | 55 |
1 files changed, 26 insertions, 29 deletions
diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss index 13c67d496..d92febced 100644 --- a/app/assets/stylesheets/about.scss +++ b/app/assets/stylesheets/about.scss @@ -1,11 +1,10 @@ @import url(https://fonts.googleapis.com/css?family=Montserrat); -@import url(https://fonts.googleapis.com/css?family=Judson); .about-body { .wrapper { max-width: 600px; margin: 0 auto; - color: #9baec8; + color: $color3; padding-top: 50px; padding-bottom: 50px; @@ -18,7 +17,7 @@ font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; margin-bottom: 20px; - color: #2b90d9; + color: $color4; padding: 20px 0; img { @@ -32,19 +31,19 @@ h2 { font-family: 'Montserrat', sans-serif; font-size: 24px; - line-height: 28px;// 'Judson', sans-serif; + line-height: 28px; font-weight: 400; margin-bottom: 20px; - color: #fff; + color: $color5; } h3 { font-family: 'Montserrat', sans-serif; font-size: 20px; - line-height: 28px;// 'Judson', sans-serif; + line-height: 28px; font-weight: 400; margin-bottom: 20px; - color: #d9e1e8; + color: $color2; } ul, ol { @@ -66,13 +65,11 @@ p, li { font: 16px/28px 'Montserrat', sans-serif; - //font-size: 19px; - //line-height: 28px;// 'Judson', sans-serif; font-weight: 400; margin-bottom: 26px; a { - color: #2b90d9; + color: $color4; text-decoration: underline; } } @@ -81,14 +78,14 @@ display: inline-block; padding: 7px 7px 5px 7px; margin: 0 2px; - background: #9baec8; - color: #282c37; + background: $color3; + color: $color1; font: 16px/16px 'Montserrat', sans-serif; font-weight: 300; } .screenshot { - box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); + box-shadow: 0 0 15px rgba($color8, 0.4); margin-bottom: 26px; img { @@ -107,7 +104,7 @@ line-height: 36px; a { - color: #9baec8; + color: $color3; text-decoration: underline; } } @@ -124,8 +121,8 @@ margin: 20px 0; display: flex; justify-content: space-between; - border-top: 1px solid lighten(#282c37, 10%); - border-bottom: 1px solid lighten(#282c37, 10%); + border-top: 1px solid lighten($color1, 10%); + border-bottom: 1px solid lighten($color1, 10%); padding-right: 14px; .section { @@ -142,7 +139,7 @@ font-size: 16px; &:last-child { - color: #d9e1e8; + color: $color2; font-size: 14px; } } @@ -151,7 +148,7 @@ font-weight: 500; font-size: 32px; line-height: 48px; - color: #fff; + color: $color5; } } } @@ -178,7 +175,7 @@ a { display: block; - color: #fff; + color: $color5; text-decoration: none; &:hover { @@ -190,7 +187,7 @@ .username { display: block; - color: #9baec8; + color: $color3; } } } @@ -201,7 +198,7 @@ strong { display: block; - color: #fff; + color: $color5; } } @@ -218,14 +215,14 @@ } .sidebar { - border-left: 1px solid lighten(#282c37, 10%); + border-left: 1px solid lighten($color1, 10%); width: 180px; flex: 0 0 auto; } .panel { .panel-header { - background: lighten(#282c37, 10%); + background: lighten($color1, 10%); padding: 7px 14px; text-transform: uppercase; font-size: 12px; @@ -250,7 +247,7 @@ a { display: block; padding: 7px 14px; - color: rgba(255, 255, 255, 0.7); + color: rgba($color5, 0.7); text-decoration: none; transition: all 200ms linear; @@ -259,17 +256,17 @@ } &:hover { - color: #fff; - background-color: darken(#282c37, 5%); + color: $color5; + background-color: darken($color1, 5%); transition: all 100ms linear; } &.selected { - color: #fff; - background-color: #2b90d9; + color: $color5; + background-color: $color4; &:hover { - background-color: lighten(#2b90d9, 5%); + background-color: lighten($color4, 5%); } } } |