aboutsummaryrefslogtreecommitdiffstats
path: root/stylesheets/base/variables.scss
diff options
context:
space:
mode:
authorBryan Brattlof <hello@bryanbrattlof.com>2021-01-20 11:07:07 -0500
committerBryan Brattlof <hello@bryanbrattlof.com>2021-01-21 14:14:23 -0500
commit9413bbd6f771f95f044e71e6b55c985511c39823 (patch)
tree590cc14da9e9a4bebbf3c13b16f2a75741034da8 /stylesheets/base/variables.scss
parent001d403a4a2e4fce5a18ae4dc9f41a0e7ab02e6f (diff)
downloadbryanbrattlof.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.
Diffstat (limited to 'stylesheets/base/variables.scss')
-rw-r--r--stylesheets/base/variables.scss24
1 files changed, 20 insertions, 4 deletions
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);