Skip to content

Instantly share code, notes, and snippets.

@alison-mk
Created February 1, 2016 18:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alison-mk/66927c68496307cf9122 to your computer and use it in GitHub Desktop.
Save alison-mk/66927c68496307cf9122 to your computer and use it in GitHub Desktop.
Sass file that pairs with background-color.js gist, animates background color on scoll. Can be seen live here: http://alisonleemckay.com/
// Basic variables
$header-font: 'Playfair Display', serif;
$body-font: 'Roboto', Arial, sans-serif;
$color1: #A8EBFF;
$color2: #FFE2E5;
$color3: #BAEDC6;
$navy: #334D70;
$link-color: #269196;
$color1-link: #269196;
$color2-link: #D66457;
$color3-link: #418651;
// Begin styles
body {
background-color: $color1;
color: $navy;
font-size: 13px;
font-family: $body-font;
font-weight: 300;
-webkit-transition: all 4s ease;
transition: all 4s ease;
&.color1 {
background-color: $color1;
.baby-header {
background-color: $color1;
}
a {
color: $color1-link;
&:hover,
&:focus {
text-shadow: 0px 0px 2px $color1-link;
}
}
}
&.color2 {
background-color: $color2;
.baby-header {
background-color: $color2;
}
a {
color: $color2-link;
&:hover,
&:focus {
text-shadow: 0px 0px 2px $color2-link;
}
}
}
&.color3 {
background-color: $color3;
.baby-header {
background-color: $color3;
}
a {
color: $color3-link;
&:hover,
&:focus {
text-shadow: 0px 0px 2px $color3-link;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment