diff --git a/css/scratchx.css b/css/scratchx.css index 5e608ef..930c0fe 100644 --- a/css/scratchx.css +++ b/css/scratchx.css @@ -1226,8 +1226,8 @@ body.page-home > main > header { #home { padding-top: 0; } #home > header { - background: url(../images/editor.png); - background-size: cover; + background-image: linear-gradient(to bottom, rgba(63, 89, 117, 0) 67%, #3f5975 33%), url(../images/editor.png); + background-size: cover, cover; padding-top: 3.75em; } #home > header h1 { font-weight: normal; } @@ -1350,6 +1350,10 @@ body.page-home > main > header { -moz-osx-font-smoothing: grayscale; font-size: 1.5em; padding-right: 0.375em; } + #home > header .bottom-row > div > aside a { + color: #4ABFF9; } + #home > header .bottom-row > div > aside a:hover { + color: #fff; } #home > header .bottom-row > div > a { float: left; display: block; diff --git a/sass/_home.scss b/sass/_home.scss index e59e59a..ff62374 100644 --- a/sass/_home.scss +++ b/sass/_home.scss @@ -16,8 +16,8 @@ body.page-home > main > header { padding-top: 0; > header { - background: url(../images/editor.png); - background-size: cover; + background-image: linear-gradient(to bottom, rgba($dark-blue, 0) 67%, rgba($dark-blue, 1) 33%), url(../images/editor.png); + background-size: cover, cover; padding-top: $vertical-base * 10; h1 { @@ -92,6 +92,14 @@ body.page-home > main > header { font-size: 1.5 * $base-font-size; padding-right: $vertical-base; } + + a { + color: $bright-blue-dark-bg; + + &:hover { + color: $white; + } + } } > a { diff --git a/sass/base/_variables.scss b/sass/base/_variables.scss index c470c63..219dbdf 100644 --- a/sass/base/_variables.scss +++ b/sass/base/_variables.scss @@ -24,6 +24,7 @@ $base-z-index: 0; $white: #fff; $blue: #21b4f0; $bright-blue: #24a3ec; +$bright-blue-dark-bg: #4ABFF9; $light-blue: #d7e5f3; $dark-blue: #3f5975; $dark-gray: #58595b;