From 228a119b30346a099e828cc02373d8f7b1139bbd Mon Sep 17 00:00:00 2001
From: tatianamac <tatiana.t.mac@gmail.com>
Date: Wed, 19 Feb 2020 18:48:29 +1100
Subject: [PATCH] =?UTF-8?q?=20=F0=9F=8C=88=20=20Organise=20colors=20with?=
 =?UTF-8?q?=20vars=20only?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/_sass/_colours.scss | 11 +++++++++++
 assets/css/base.scss           | 19 ++++---------------
 2 files changed, 15 insertions(+), 15 deletions(-)
 create mode 100644 assets/css/_sass/_colours.scss

diff --git a/assets/css/_sass/_colours.scss b/assets/css/_sass/_colours.scss
new file mode 100644
index 00000000..85477f53
--- /dev/null
+++ b/assets/css/_sass/_colours.scss
@@ -0,0 +1,11 @@
+$primary-color: hsl(0, 100%, 50%);
+$secondary-color: hsl(120, 100%, 25%);
+
+$dark-red: hsl(0, 100%, 32.2%);
+$pink: hsl(349.5, 100%, 87.6%); 
+$black: hsl(0, 0%, 13%);
+$white: hsl(0, 0%, 100%);
+
+$dark-grey: hsl(0, 0%, 31%);
+$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
+$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
\ No newline at end of file
diff --git a/assets/css/base.scss b/assets/css/base.scss
index bc5a1465..451f7e63 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -3,6 +3,7 @@
 
 @import '~prism-themes/themes/prism-a11y-dark';
 @import '_sass/functions';
+@import '_sass/colours'
 
 $browser-context: 16;
 
@@ -11,9 +12,9 @@ pre[class*='language-'] {
 }
 
 code {
-  background-color: #333333;
-  border: pxToRem(1) solid black;
-  color: white;
+  background-color: $dark-grey;
+  border: 1px solid $black;
+  color: $white;
   padding: 0.15em;
   border-radius: 0.25em;
   font-size: 95%;
@@ -34,18 +35,6 @@ code {
   --l-gap: 1rem;
 }
 
-$primary-color: #0e4bff; //cobalt blue is so pretty//
-$secondary-color: #f3f315; //
-
-$black: #222222;
-$white: #ffffff;
-$pistachio: #e5ffe5;
-$yellow: #ffff00;
-
-$dark-grey: #4f4f4f;
-$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
-$light-grey: #eeeeee; // for backgrounds only
-
 // TYPOGRAPHY //
 $sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif;
 $serif: orpheuspro, Palatino, Times, serif;