Remove need for more obscured colour variables #10
This commit is contained in:
parent
403501335e
commit
620051e2d3
@ -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%);
|
||||
|
@ -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 {
|
||||
|
@ -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%);
|
||||
|
Loading…
Reference in New Issue
Block a user