⚒️ Restructured Sass organisation (#83)

*  🌈  Organise colors with vars only

*  ➕ New file structure

* File restructuring

*  ⚒️ Fix build issue

* Rearranged files

assets/css/base/_base.scss

@@ -0,0 +1,72 @@
+body {
+  border-top: 1rem solid $primary-color;
+  font-family: $sans-serif;
+  font-size: pxToRem(20);
+  padding: 2rem;
+  margin: 0;
+}
+
+h1 {
+  font-family: $ext-sans;
+  font-weight: $bold;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+p {
+  margin: 0.75rem 0;
+  font-size: 1.25rem;
+  line-height: 1.25;
+}
+
+a {
+  text-decoration: none;
+  color: $black;
+  border-bottom: $dark-grey solid 0.1em;
+  font-family: $ext-sans;
+  margin: 1rem 0;
+
+  &:hover {
+    border-bottom: $primary-color solid 0.1rem;
+  }
+  &:focus {
+    outline: pxToRem(3) solid $primary-color;
+    outline-offset: pxToRem(5);
+  }
+}
+
+code {
+  background-color: $dark-grey;
+  border: 1px solid $black;
+  color: $white;
+  padding: 0.15em;
+  border-radius: 0.25em;
+  font-size: 95%;
+
+  pre & {
+    border: none;
+    padding: 0;
+    border-radius: 0;
+    font-size: inherit;
+  }
+}
+
+ul[class] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+th {
+  text-align: left;
+}
+
+pre[class*='language-'] {
+  font-size: 1rem;
+}

assets/css/base/_custom-properties.scss

@@ -0,0 +1,4 @@
+:root {
+  --auto-grid-min-size: 17rem;
+  --l-gap: 1rem;
+}

assets/css/base/_fonts.scss

@@ -0,0 +1,12 @@
+@import url('https://use.typekit.net/qlo3dpu.css');
+
+$sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif;
+$serif: orpheuspro, Palatino, Times, serif;
+$ext-sans: monotype-grotesque-extended, Arial Black, sans-serif;
+$con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif;
+
+$thin: 200;
+$light: 300;
+$regular: 400;
+$medium: 500;
+$bold: 700;

assets/css/base/_helpers.scss

@@ -0,0 +1,18 @@
+.u-no-padding-left {
+  padding-left: 0 !important;
+}
+
+.style__italics {
+  font-style: italic;
+}
+
+.small {
+  font-size: 0.75em;
+}
+
+.help {
+  margin: 1rem 0;
+  li {
+    margin: 0.75rem 0;
+  }
+}

assets/css/base/_typography.scss

@@ -0,0 +1,6 @@
+.subtitle {
+  font-family: $ext-sans;
+  font-weight: $regular;
+  letter-spacing: 0.1;
+  grid-column: span 2;
+}