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, 77 deletions

diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css
deleted file mode 100644
index 44ec5c6..0000000
--- a/public/css/modules/nav.css
+++ /dev/null
@@ -1,77 +0,0 @@
-.nav > :not(:last-child) {
-  margin-block-end: var(--margin-block-sm);
-}
-
-.nav__bottom-row {
-  display: flex;
-  flex-direction: column;
-}
-
-.nav__nav-links {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
-  column-gap: var(--grid-gutter-width);
-}
-
-.nav__nav-links li {
-  margin: 0;
-}
-
-.nav__logo {
-  font-family: var(--font-serif);
-  font-size: var(--font-size-5);
-  font-weight: 700;
-
-  /* This gradient is based on                  *
-   * --color-primary-60 -> --color-secondary-60 *
-   * using Josh W Comeau's gradient generator   */
-  width: fit-content;
-  background-image: linear-gradient(
-    45deg,
-    hsl(248deg 100% 75%) 0%,
-    hsl(227deg 100% 70%) 24%,
-    hsl(211deg 100% 58%) 40%,
-    hsl(205deg 100% 50%) 51%,
-    hsl(202deg 100% 49%) 60%,
-    hsl(200deg 100% 47%) 66%,
-    hsl(197deg 100% 44%) 70%,
-    hsl(194deg 100% 41%) 73%,
-    hsl(190deg 100% 38%) 76%,
-    hsl(186deg 100% 35%) 79%,
-    hsl(181deg 100% 33%) 84%,
-    hsl(177deg 100% 32%) 100%
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.nav__logo a {
-  text-decoration: none;
-  border: var(--relative-eighth-rem) dotted transparent;
-  transition: border-color 100ms;
-}
-
-.nav__logo a:is(:focus, :focus-visible, :focus-within) {
-  box-shadow: none;
-  outline: none;
-  border-color: var(--special-text-color);
-  transition: border-color 300ms;
-}
-
-.nav__breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.nav__breadcrumbs li {
-  list-style-type: none;
-  min-width: max-content;
-}
-
-.nav__breadcrumbs li::before {
-  content: '/'
-}
-
-.nav__switch-language-link {
-  text-align: right;
-}