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>

4 files changed, 89 insertions, 0 deletions

diff --git a/scss/base/index.scss b/scss/base/index.scss
new file mode 100644
index 0000000..da4f59e
--- /dev/null
+++ b/scss/base/index.scss
@@ -0,0 +1,4 @@
+@use 'typography';
+@use 'theme';
+@use 'list';
+
diff --git a/scss/base/list.scss b/scss/base/list.scss
new file mode 100644
index 0000000..2fd402b
--- /dev/null
+++ b/scss/base/list.scss
@@ -0,0 +1,4 @@
+ol li {
+  list-style-type: decimal;
+  margin-inline-start: --spacing-inline-md;
+}
\ No newline at end of file
diff --git a/scss/base/theme.scss b/scss/base/theme.scss
new file mode 100644
index 0000000..f5d178c
--- /dev/null
+++ b/scss/base/theme.scss
@@ -0,0 +1,13 @@
+:root {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+:is(main, article) {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+:is(main, article) > section:not(:is(section, header) :is(section, header)) {
+  background-color: var(--background-color);
+}
\ No newline at end of file
diff --git a/scss/base/typography.scss b/scss/base/typography.scss
new file mode 100644
index 0000000..fb2ac17
--- /dev/null
+++ b/scss/base/typography.scss
@@ -0,0 +1,68 @@
+body {
+  font-family: var(--font-sans-serif);
+  font-size: var(--font-size-1);
+  font-weight: 400;
+  letter-spacing: 0.03rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+h1 {
+  font-size: var(--font-size-5);
+}
+
+h1:not(:first-child) {
+  margin-block-start: var(--margin-block-lg);
+}
+
+h2 {
+  font-size: var(--font-size-4);
+}
+
+h2:not(:first-child) {
+  margin-block-start: var(--margin-block-lg);
+}
+
+h3 {
+  font-size: var(--font-size-3);
+}
+
+h3:not(:first-child) {
+  margin-block-start: var(--margin-block-md);
+}
+
+h4 {
+  font-size: var(--font-size-2);
+}
+
+h4:not(:first-child) {
+  margin-block-start: var(--margin-block-sm);
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--font-serif);
+  font-weight: 700;
+}
+
+.title {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  margin-block-start: var(--margin-block-sm);
+}
+
+.title--small {
+  font-size: var(--font-size-2);
+  margin-block-start: 0;
+}
+
+p:not(:first-child) {
+  margin-block-start: var(--margin-block-sm);
+}
+
+:is(p, h1, h2, h3, h4) {
+  max-width: var(--width-prose);
+}