Optimise CSS (#17)

* Installs Sass

* installs concurrently

* Ports CSS to SCSS

* Gitignores CSS build output

* Moves public/main.css to scss/index.scss

* Fixes port to SCSS

* Use-ifies base styles

* Use-ifies layout styles

* Use-ifies modules styles

* Use-ifies variables

* Use-ifies utils

* Moves normalize to scss

* Implements a CSS minifying step with CSSO

---------

Co-authored-by: Joe Carstairs <jcarstairs@scottlogic.com>

1 files changed, 0 insertions, 47 deletions

diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
deleted file mode 100644
index a4d1d91..0000000
--- a/public/css/variables/spacing.css
+++ /dev/null
@@ -1,47 +0,0 @@
-:root {
-  --margin-inline-md: calc(2 * var(--relative-eighth-rem));
-  --margin-block-lg: calc(16 * var(--relative-eighth-rem));
-  --margin-block-md: calc(10 * var(--relative-eighth-rem));
-  --margin-block-sm: calc(5 * var(--relative-eighth-rem));
-
-  --padding-inline-lg: calc(4 * var(--relative-eighth-rem));
-  --padding-inline-md: calc(2 * var(--relative-eighth-rem));
-  --padding-inline-sm: calc(1 * var(--relative-eighth-rem));
-  --padding-block-lg: calc(12 * var(--relative-eighth-rem));
-  --padding-block-md: calc(8 * var(--relative-eighth-rem));
-  --padding-block-sm: calc(5 * var(--relative-eighth-rem));
-
-  --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem));
-  --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem));
-  --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem));
-  
-  --grid-total-relative-eighth-rem-width: calc(
-    var(--grid-padding-relative-eighth-rem) * 2 +
-    var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + 
-    var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1)
-  );
-  --relative-eighth-rem: calc(
-    var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
-  );
-  --width-prose: calc(
-    var(--grid-column-width) * var(--grid-prose-column-count) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
-  );
-
-  --grid-column-width-relative-eighth-rem: 32;
-  --grid-gutter-width-relative-eighth-rem: 4;
-
-  /***********************************************************
-   * Generally, we will use columns to keep things laid out  *
-   * nicely. However, on screens narrower than xs, this gets *
-   * pretty much impossible. So for those screens, we use a  *
-   * single-column layout taking up 100vw. In effect, this   *
-   * is just default CSS layout plus a wee bit padding. From *
-   * xs widewards, we use multiple columns on a fixed width. *
-   ***********************************************************/
-
-  --grid-total-width: 100vw;
-  --grid-padding-relative-eighth-rem: 8;
-  --grid-column-count: 1;
-  --grid-prose-column-count: 1;
-}