Remove need for more obscured colour variables #10

daviddarnes · Jan 1, 2018 · 620051e · 620051e
1 parent 4035013
commit 620051e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 31 deletions.
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
@@ -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%);
diff --git a/_sass/_theme.scss b/_sass/_theme.scss
@@ -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 {

diff --git a/_sass/sassline-base/_variables.scss b/_sass/sassline-base/_variables.scss
@@ -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%);