diff options
| author | Bryan Brattlof <hello@bryanbrattlof.com> | 2021-01-20 11:07:07 -0500 |
|---|---|---|
| committer | Bryan Brattlof <hello@bryanbrattlof.com> | 2021-01-21 14:14:23 -0500 |
| commit | 9413bbd6f771f95f044e71e6b55c985511c39823 (patch) | |
| tree | 590cc14da9e9a4bebbf3c13b16f2a75741034da8 | |
| parent | 001d403a4a2e4fce5a18ae4dc9f41a0e7ab02e6f (diff) | |
| download | bryanbrattlof.com-9413bbd6f771f95f044e71e6b55c985511c39823.tar.gz bryanbrattlof.com-9413bbd6f771f95f044e71e6b55c985511c39823.tar.bz2 | |
add page background color
this adds a #e5e5e3 background color to the background of every page
and article on the website, allowing me to have figures with 3 colors:
white, grey, and black.
This will also add a color-blend @function to allow us to blend colors
to match the background instead of just lightening it.
| -rw-r--r-- | stylesheets/base/base.scss | 1 | ||||
| -rw-r--r-- | stylesheets/base/linear-gradient.scss | 2 | ||||
| -rw-r--r-- | stylesheets/base/variables.scss | 24 |
3 files changed, 22 insertions, 5 deletions
diff --git a/stylesheets/base/base.scss b/stylesheets/base/base.scss index 9e37b51..c805beb 100644 --- a/stylesheets/base/base.scss +++ b/stylesheets/base/base.scss @@ -12,6 +12,7 @@ body { font-family: $display-font; color: $display-font-color; + background: $background-color; line-height: $line-height; padding: 0; diff --git a/stylesheets/base/linear-gradient.scss b/stylesheets/base/linear-gradient.scss index 8782cf2..e63eba8 100644 --- a/stylesheets/base/linear-gradient.scss +++ b/stylesheets/base/linear-gradient.scss @@ -188,6 +188,6 @@ background: -o-linear-gradient(legacy-direction($direction), $color-stops); background: -ms-linear-gradient(legacy-direction($direction), $color-stops); background: linear-gradient($direction, $color-stops); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=#{$ieDirection} ); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=#{$ieDirection} ); } diff --git a/stylesheets/base/variables.scss b/stylesheets/base/variables.scss index b2f3599..acb4692 100644 --- a/stylesheets/base/variables.scss +++ b/stylesheets/base/variables.scss @@ -14,10 +14,26 @@ $light-font-weight: 300 !default; $print-font-color: black !default; $display-font-color: rgb(17, 17, 17); -$secondary-font-color: rgb(154, 154, 154); +$secondary-font-color: rgb(106, 106, 106); +$background-color: rgb(229, 229, 227); -$secondary-color: lighten($secondary-font-color, 10) !default; +@function color-blend ($fg, $bg) { + $fo: opacity($fg); + $bo: opacity($bg); + + // calculate opacity + $r: red($fg) * $fo + red($bg) * $bo * (1 - $fo); + $g: green($fg) * $fo + green($bg) * $bo * (1 - $fo); + $b: blue($fg) * $fo + blue($bg) * $bo * (1 - $fo); + @return rgb($r, $g, $b); +} + +$secondary-color: $secondary-font-color; $link-highlight-color: rgb(255, 215, 0) !default; -$link-highlight-from: lighten($link-highlight-color, 35); -$link-highlight-to: $link-highlight-color; +$link-highlight-from: color-blend( + rgba($link-highlight-color, .35), + $background-color); +$link-highlight-to: color-blend( + rgba($link-highlight-color, .75), + $background-color); |