Remove need for more obscured colour variables #10

This commit is contained in:
David Darnes 2018-01-01 19:08:31 +00:00
parent 403501335e
commit 620051e2d3
3 changed files with 20 additions and 31 deletions

View File

@ -1,9 +1,10 @@
// Colours
$color__site--background: #ffefc8;
$color__site--heading: darken(#46412A, 5%);
$color__site--body: #46412A;
$color__site--captions: lighten($color__site--heading, 40%);
$color__site--link: #5B5BFF;
$color__site--link--hover: darken($color__site--link, 10%);
$color__site--link--current: desaturate($color__site--link, 100%);
$color__site--accent: #5B5BFF;
$bodyColour: #46412A;
$headingColour: darken($bodyColour, 5%);
$linkColour: #5B5BFF;
$hoverColour: darken($linkColour, 10%);
$captionColour: lighten($headingColour, 40%);
$white: #fff;
$backgroundColour: #ffefc8;
$codeBackgroundColour: darken($backgroundColour, 5%);

View File

@ -1,7 +1,7 @@
// Structural elements
body {
background: $color__site--background;
color: $color__site--body;
background: $backgroundColour;
color: $bodyColour;
height: 100%;
display: flex;
@include flex-direction(column);
@ -36,7 +36,7 @@ body {
.header {
@include flex(0, 0, auto);
background: darken($color__site--background, 10%);
background: darken($backgroundColour, 10%);
}
.logo {
@ -52,12 +52,12 @@ body {
.small {
padding-top: .6rem;
color: $color__site--captions;
color: $captionColour;
display: inline-block;
}
.footer {
border-top: 1px solid darken($color__site--background, 15%);
border-top: 1px solid darken($backgroundColour, 15%);
}
@ -66,7 +66,7 @@ body {
&--paginator {
@include flexbox;
@include justify-content(center);
color: $color__site--captions;
color: $captionColour;
text-align: center;
}
}
@ -111,7 +111,7 @@ body {
}
&--current {
a {
color: $color__site--link--current;
color: desaturate($linkColour, 100%);
}
}
}
@ -131,8 +131,8 @@ video {
// Text selection
::selection {
background: $color__site--heading;
color: $color__site--background;
background: $headingColour;
color: $white;
text-shadow: none;
}
@ -143,12 +143,12 @@ video {
button {
background-image: none;
text-shadow: none;
color: lighten(invert($color__site--body), 15%);
color: lighten(invert($bodyColour), 15%);
&:hover,
&:active,
&:focus {
background-image: none;
color: lighten(invert($color__site--body), 15%);
color: lighten(invert($bodyColour), 15%);
}
}
hr {

View File

@ -94,15 +94,3 @@ $white: #FFFFFF !default;
// Background colours.
$backgroundColour: #FCFCFC !default;
$codeBackgroundColour: #F5F4F2 !default;
// Alembic reassigned variables
$headingColour: $color__site--heading;
$bodyColour: $color__site--body;
$linkColour: $color__site--link;
$hoverColour: $color__site--link--hover;
$captionColour: $color__site--captions;
$white: #fff;
$backgroundColour: $color__site--background;
$codeBackgroundColour: darken($color__site--background, 5%);