From 47b07209f2eb382b00d42a20cbea66fa1f3a7703 Mon Sep 17 00:00:00 2001
From: Benjamin Jones <benjamin@tbnt.digital>
Date: Thu, 20 Aug 2020 12:06:44 +0200
Subject: [PATCH] more sass variables -> css variables work

---
 _sass/includes/footer.scss    | 4 ++--
 _sass/includes/header.scss    | 1 +
 _sass/includes/scrollbar.scss | 2 +-
 _sass/layout.scss             | 3 ++-
 _sass/layouts/404.scss        | 2 +-
 _sass/layouts/event.scss      | 2 +-
 _sass/layouts/post.scss       | 2 +-
 _sass/layouts/program.scss    | 2 +-
 _sass/typography.scss         | 8 ++++----
 _sass/variables.scss          | 6 +++---
 10 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/_sass/includes/footer.scss b/_sass/includes/footer.scss
index b87a73c..c562891 100644
--- a/_sass/includes/footer.scss
+++ b/_sass/includes/footer.scss
@@ -5,7 +5,7 @@ footer.page-footer {
   a.social-link {
     padding: var(--size-16);
     background-color: var(--colour-white);
-    fill: var(--colour-black-graphite);
+    fill: var(--colour-graphite);
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -18,7 +18,7 @@ footer.page-footer {
 
     &:hover {
       // box-shadow: 5px 5px 0 rgba(var(--colour-white), 0.5), 10px 10px 0 rgba(var(--colour-white), 0.4), 15px 15px 0 rgba(var(--colour-white), 0.3);
-      background-color: var(--colour-black-graphite);
+      background-color: var(--colour-graphite);
       svg {
         fill: var(--colour-bg);
       }
diff --git a/_sass/includes/header.scss b/_sass/includes/header.scss
index c4b8bc0..62d4982 100644
--- a/_sass/includes/header.scss
+++ b/_sass/includes/header.scss
@@ -80,6 +80,7 @@ header.page-header {
     font-family: var(--font-logo);
     margin: var(--size-128) 0;
     // background-color: var(--colour-bg);
+    color: var(--colour-text, var(--colour-graphite));
     display: inline-block;
 
     @include touch {
diff --git a/_sass/includes/scrollbar.scss b/_sass/includes/scrollbar.scss
index 95e99c1..cf3542e 100644
--- a/_sass/includes/scrollbar.scss
+++ b/_sass/includes/scrollbar.scss
@@ -10,7 +10,7 @@
 /* Handle */
 ::-webkit-scrollbar-thumb {
   // background: transparent;
-  // background-color: var(--colour-black-graphite);
+  // background-color: var(--colour-graphite);
   // background-blend-mode: difference;
   // background-size: cover;
   // border-radius: 50px;
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 953e64e..7264267 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -1,5 +1,6 @@
 body {
   background-color: var(--colour-bg);
+  // background-color: var(--colour-graphite);
   background-image: url('../img/bg/bg-2.png'), url('../img/bg/bg-el-light.png');
   transition: background-color 0.5s ease-in-out;
   background-position: var(--size-base) var(--size-8), var(--size-8) var(--size-12);
@@ -16,7 +17,7 @@ body {
   }
 
   @include darkMode {
-    background-color: var(--colour-black-graphite);
+    background-color: var(--colour-graphite);
     // &::after {
     //   content: '';
     //   background-image: ;
diff --git a/_sass/layouts/404.scss b/_sass/layouts/404.scss
index 6a40dac..7fb3622 100644
--- a/_sass/layouts/404.scss
+++ b/_sass/layouts/404.scss
@@ -10,7 +10,7 @@
   p,
   a,
   strong {
-    color: var(--colour-black-graphite);
+    color: var(--colour-graphite);
 
     @include darkMode {
       background-color: var(--colour-white);
diff --git a/_sass/layouts/event.scss b/_sass/layouts/event.scss
index 07d402c..86197f6 100644
--- a/_sass/layouts/event.scss
+++ b/_sass/layouts/event.scss
@@ -26,7 +26,7 @@
   }
   .details {
     small {
-      color: rgba(var(--colour-black-graphite), 0.6);
+      color: rgba(var(--colour-graphite), 0.6);
     }
 
     p,
diff --git a/_sass/layouts/post.scss b/_sass/layouts/post.scss
index 6aee6f7..e70f860 100644
--- a/_sass/layouts/post.scss
+++ b/_sass/layouts/post.scss
@@ -44,7 +44,7 @@
     }
 
     a {
-      color: var(--colour-black-graphite);
+      color: var(--colour-graphite);
       text-decoration: none;
 
       &:hover,
diff --git a/_sass/layouts/program.scss b/_sass/layouts/program.scss
index 6e9ee38..99183fc 100644
--- a/_sass/layouts/program.scss
+++ b/_sass/layouts/program.scss
@@ -46,7 +46,7 @@
     }
 
     a {
-      color: var(--colour-black-graphite);
+      color: var(--colour-graphite);
       text-decoration: none;
 
       &:hover,
diff --git a/_sass/typography.scss b/_sass/typography.scss
index 54094b8..101f61e 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -15,7 +15,7 @@ button,
 small,
 .separator {
   font-family: var(--font-body);
-  color: var(--colour-text);
+  color: var(--colour-text, var(--colour-graphite));
   margin-bottom: var(--size-16);
 }
 
@@ -69,7 +69,7 @@ p,
 }
 
 a {
-  // color: var(--colour-black-graphite);
+  // color: var(--colour-graphite);
   font-weight: bold;
 
   &:hover,
@@ -88,7 +88,7 @@ a {
     height: var(--size-8);
     width: var(--size-8);
     border-radius: 100%;
-    background-color: var(--colour-black-graphite);
+    background-color: var(--colour-graphite);
     // mix-blend-mode: exclusion;
 
     &.background-blue {
@@ -122,5 +122,5 @@ a {
 
 ::selection {
   background-color: var(--colour-highlight);
-  color: var(--colour-black-graphite);
+  color: var(--colour-graphite);
 }
diff --git a/_sass/variables.scss b/_sass/variables.scss
index ecb0caf..d294223 100644
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@@ -1,6 +1,6 @@
 :root {
   // Colours
-  --colour-black-graphite: #1d2022;
+  --colour-graphite: #1d2022;
   --colour-white: #fff;
 
   --colour-grey-light: #ececec;
@@ -11,8 +11,8 @@
   --colour-highlight: var(--colour-turquoise, #0ac2c9);
   --colour-highlight-darker: #06a1a7;
 
-  -colour-bg: var(--colour-grey-light);
-  -colour-text: var(--colour-black-graphite);
+  --colour-bg: #ececec;
+  --colour-text: var(--colour-black-graphite);
 
   // margin
   --size-base: 4px;