Atlas48/funky
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove need for more obscured colour variables #10

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
_sass/_colors.scss
View File

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

22
_sass/_theme.scss
View File

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

12
_sass/sassline-base/_variables.scss
View File

@ -94,15 +94,3 @@ $white: #FFFFFF !default;
// Background colours. // Background colours.
$backgroundColour: #FCFCFC !default; $backgroundColour: #FCFCFC !default;
$codeBackgroundColour: #F5F4F2 !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%);