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>

72 files changed, 593 insertions, 51 deletions

diff --git a/.gitignore b/.gitignore
index 7f25ed9..bce8711 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,5 @@ npm-debug.log*
 dist/
 .astro/
 .vercel
+public/css/
+scss-build/
diff --git a/build_csso.sh b/build_csso.sh
new file mode 100644
index 0000000..e0d037e
--- /dev/null
+++ b/build_csso.sh
@@ -0,0 +1,6 @@
+mkdir public/css -p || exit;
+for x in scss-build/index*.css;
+do
+  npm run csso -- $x --output $(echo $x | sed 's/scss-build/public\/css/');
+done;
+
diff --git a/dev_csso.sh b/dev_csso.sh
new file mode 100644
index 0000000..02d5900
--- /dev/null
+++ b/dev_csso.sh
@@ -0,0 +1,11 @@
+mkdir public/css -p || exit;
+for x in scss-build/index*.css;
+do
+  output=$(echo $x | sed 's/scss-build/public\/css/');
+  npm run csso -- $x \
+    --output $output \
+    --input-source-map $x.map \
+    --source-map $output.map \
+    --watch;
+done;
+
diff --git a/package-lock.json b/package-lock.json
index 7f5fabc..161140c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,16 @@
         "@astrojs/sitemap": "^3.0.0",
         "@paypal/paypal-js": "^6.0.1",
         "astro": "^3.2.2",
+        "csso-cli": "^4.0.2",
         "dotenv": "^16.3.1",
+        "sass": "^1.69.3",
         "typescript": "^5.2.2",
         "vercel": "^32.4.0"
       },
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^6.2.1",
         "@typescript-eslint/parser": "^6.2.1",
+        "concurrently": "^8.2.1",
         "eslint": "^8.46.0",
         "eslint-plugin-astro": "^0.28.0",
         "husky": "^8.0.3",
@@ -443,6 +446,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -2308,6 +2323,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz",
@@ -3005,6 +3028,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/clap": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/clap/-/clap-3.1.1.tgz",
+      "integrity": "sha512-vp42956Ax06WwaaheYEqEOgXZ3VKJxgccZ0gJL0HpyiupkIS9RVJFo5eDU1BPeQAOqz+cclndZg4DCqG1sJReQ==",
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -3080,6 +3115,120 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/cliui/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/cliui/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
@@ -3189,6 +3338,118 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/concurrently": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.1.tgz",
+      "integrity": "sha512-nVraf3aXOpIcNud5pB9M82p1tynmZkrSGQ1p6X/VY8cJ+2LMVqAgXsJxYYefACSHbTYlm92O1xuhdGTjwoEvbQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
+        "spawn-command": "0.0.2",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/concurrently/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/concurrently/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/concurrently/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -3241,6 +3502,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3253,6 +3527,51 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso-cli": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/csso-cli/-/csso-cli-4.0.2.tgz",
+      "integrity": "sha512-p/VipA45w8EmS8Lv6wGtE+UdsbFlqUBGhL9FCTGKxd5dC07mtg3BbZaMzMh0X+oIl2JUGR/mPx5YzuNnTM2a3w==",
+      "dependencies": {
+        "chokidar": "^3.5.3",
+        "clap": "^3.1.1",
+        "csso": "^5.0.4",
+        "source-map-js": "^1.0.2"
+      },
+      "bin": {
+        "csso": "bin/csso"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4673,6 +4992,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-stream": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
@@ -5071,6 +5399,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5678,6 +6011,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6255,6 +6594,11 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -8093,6 +8437,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+      "dev": true
+    },
     "node_modules/rehype": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/rehype/-/rehype-12.0.1.tgz",
@@ -8245,6 +8595,15 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -8567,6 +8926,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/s.color": {
       "version": "0.0.15",
       "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
@@ -8608,6 +8976,22 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass": {
+      "version": "1.69.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.3.tgz",
+      "integrity": "sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-formatter": {
       "version": "0.7.8",
       "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.8.tgz",
@@ -8721,6 +9105,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/shiki": {
       "version": "0.14.4",
       "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.4.tgz",
@@ -8882,6 +9275,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -10479,6 +10878,15 @@
         "node": ">= 6.0"
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -10493,6 +10901,24 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
@@ -10501,6 +10927,56 @@
         "node": ">=12"
       }
     },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/yargs/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index 03dfdcd..c482c23 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,18 @@
   "type": "module",
   "private": "true",
   "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
+    "start": "concurrently \"npm run astro dev\" \"npm run dev-css\"",
+    "dev": "concurrently \"npm run astro dev\" \"npm run dev-css\"",
+    "dev-css": "sass scss:scss-build && concurrently \"npm run dev-sass\" \"npm run dev-csso\"",
+    "dev-sass": "sass --watch scss:scss-build",
+    "dev-csso": "sh dev_csso.sh",
+    "build": "npm run build-css && astro build",
+    "build-css": "npm run build-sass && npm run build-csso",
+    "build-sass": "sass scss:scss-build --no-source-map --style compressed",
+    "build-csso": "sh build_csso.sh",
     "preview": "astro preview",
     "astro": "astro",
+    "csso": "csso",
     "lint": "eslint .",
     "format": "prettier ./**/* --check",
     "format--write": "prettier ./**/* --write",
@@ -18,13 +25,16 @@
     "@astrojs/sitemap": "^3.0.0",
     "@paypal/paypal-js": "^6.0.1",
     "astro": "^3.2.2",
+    "csso-cli": "^4.0.2",
     "dotenv": "^16.3.1",
+    "sass": "^1.69.3",
     "typescript": "^5.2.2",
     "vercel": "^32.4.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
+    "concurrently": "^8.2.1",
     "eslint": "^8.46.0",
     "eslint-plugin-astro": "^0.28.0",
     "husky": "^8.0.3",
diff --git a/public/css/base/index.css b/public/css/base/index.css
deleted file mode 100644
index a8e9f15..0000000
--- a/public/css/base/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import './typography.css';
-@import './theme.css';
-@import './list.css';
\ No newline at end of file
diff --git a/public/css/layout/index.css b/public/css/layout/index.css
deleted file mode 100644
index 0bede83..0000000
--- a/public/css/layout/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import './grid.css';
-@import './grid.xs.css' (min-width: 16rem);
-@import './grid.md.css' (min-width: 48rem);
-@import './section-margins.css';
\ No newline at end of file
diff --git a/public/css/modules/index.css b/public/css/modules/index.css
deleted file mode 100644
index d33754f..0000000
--- a/public/css/modules/index.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@import './btn.css';
-@import './link.css';
-@import './news-index.css';
-@import './product.css';
-@import './schedule.css';
-@import './schedule.md.css' (min-width: 48rem);
-@import './link-gallery.css';
-@import './link-gallery.xs.css' (min-width: 16rem);
-@import './nav.css';
-@import './nav.xs.css' (min-width: 16rem);
-@import './nav.md.css' (min-width: 48rem);
-@import './nav.lg.css' (min-width: 64rem);
-@import './skip-to-content.css';
-@import './committee.css';
-@import './committee.md.css' (min-width: 48rem);
-@import './footer.css';
diff --git a/public/css/variables/index.css b/public/css/variables/index.css
deleted file mode 100644
index 844ddba..0000000
--- a/public/css/variables/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'colours.css';
-@import 'spacing.css';
-@import 'spacing.xs.css' (min-width: 16rem);
-@import 'spacing.sm.css' (min-width: 30rem);
-@import 'spacing.md.css' (min-width: 48rem);
-@import 'spacing.lg.css' (min-width: 64rem);
-@import 'spacing.xl.css' (min-width: 96rem);
-@import 'spacing.xxl.css' (min-width: 120rem);
-@import 'typography.css';
-@import 'typography.xs.css' (min-width: 16rem);
-@import 'typography.md.css' (min-width: 48rem);
diff --git a/public/main.css b/public/main.css
deleted file mode 100644
index 7992dc3..0000000
--- a/public/main.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@import 'css/variables/index.css';
-@import 'css/base/index.css';
-@import 'css/layout/index.css';
-@import 'css/modules/index.css';
-@import 'css/utils.css';
-
-:root {
-  scroll-behavior: smooth;
-}
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/public/css/base/list.css b/scss/base/list.scss
index 2fd402b..2fd402b 100644
--- a/public/css/base/list.css
+++ b/scss/base/list.scss
diff --git a/public/css/base/theme.css b/scss/base/theme.scss
index f5d178c..f5d178c 100644
--- a/public/css/base/theme.css
+++ b/scss/base/theme.scss
diff --git a/public/css/base/typography.css b/scss/base/typography.scss
index fb2ac17..fb2ac17 100644
--- a/public/css/base/typography.css
+++ b/scss/base/typography.scss
diff --git a/scss/index.lg.scss b/scss/index.lg.scss
new file mode 100644
index 0000000..4060f14
--- /dev/null
+++ b/scss/index.lg.scss
@@ -0,0 +1,3 @@
+@use 'modules/index.lg' as *;
+@use 'variables/index.lg' as *;
+
diff --git a/scss/index.md.scss b/scss/index.md.scss
new file mode 100644
index 0000000..a49e979
--- /dev/null
+++ b/scss/index.md.scss
@@ -0,0 +1,4 @@
+@use 'layout/index.md' as *;
+@use 'modules/index.md' as *;
+@use 'variables/index.md' as *;
+
diff --git a/scss/index.scss b/scss/index.scss
new file mode 100644
index 0000000..485e64c
--- /dev/null
+++ b/scss/index.scss
@@ -0,0 +1,7 @@
+@use 'normalize' as *;
+@use 'base/index' as *;
+@use 'layout/index' as *;
+@use 'modules/index' as *;
+@use 'variables/index' as *;
+@use 'utils' as *;
+
diff --git a/scss/index.sm.scss b/scss/index.sm.scss
new file mode 100644
index 0000000..37c6ec7
--- /dev/null
+++ b/scss/index.sm.scss
@@ -0,0 +1,2 @@
+@use 'variables/index.sm' as *;
+
diff --git a/scss/index.xl.scss b/scss/index.xl.scss
new file mode 100644
index 0000000..7848b38
--- /dev/null
+++ b/scss/index.xl.scss
@@ -0,0 +1,3 @@
+@use 'modules/index.xl' as *;
+@use 'variables/index.xl' as *;
+
diff --git a/scss/index.xs.scss b/scss/index.xs.scss
new file mode 100644
index 0000000..6aee8e5
--- /dev/null
+++ b/scss/index.xs.scss
@@ -0,0 +1,4 @@
+@use 'layout/index.xs' as *;
+@use 'modules/index.xs' as *;
+@use 'variables/index.xs' as *;
+
diff --git a/scss/index.xxl.scss b/scss/index.xxl.scss
new file mode 100644
index 0000000..067147c
--- /dev/null
+++ b/scss/index.xxl.scss
@@ -0,0 +1,2 @@
+@use 'variables/index.xxl' as *;
+
diff --git a/public/css/layout/grid.md.css b/scss/layout/grid.md.scss
index f0c8478..f0c8478 100644
--- a/public/css/layout/grid.md.css
+++ b/scss/layout/grid.md.scss
diff --git a/public/css/layout/grid.css b/scss/layout/grid.scss
index 25cdd95..25cdd95 100644
--- a/public/css/layout/grid.css
+++ b/scss/layout/grid.scss
diff --git a/public/css/layout/grid.xs.css b/scss/layout/grid.xs.scss
index e7c6d1a..e7c6d1a 100644
--- a/public/css/layout/grid.xs.css
+++ b/scss/layout/grid.xs.scss
diff --git a/scss/layout/index.md.scss b/scss/layout/index.md.scss
new file mode 100644
index 0000000..c3bd183
--- /dev/null
+++ b/scss/layout/index.md.scss
@@ -0,0 +1,2 @@
+@use 'grid.md';
+
diff --git a/scss/layout/index.scss b/scss/layout/index.scss
new file mode 100644
index 0000000..776613a
--- /dev/null
+++ b/scss/layout/index.scss
@@ -0,0 +1,3 @@
+@use 'grid';
+@use 'section-margins';
+
diff --git a/scss/layout/index.xs.scss b/scss/layout/index.xs.scss
new file mode 100644
index 0000000..6e239b4
--- /dev/null
+++ b/scss/layout/index.xs.scss
@@ -0,0 +1,2 @@
+@use 'grid.xs';
+
diff --git a/public/css/layout/section-margins.css b/scss/layout/section-margins.scss
index a11073f..a11073f 100644
--- a/public/css/layout/section-margins.css
+++ b/scss/layout/section-margins.scss
diff --git a/public/css/modules/btn.css b/scss/modules/btn.scss
index 142463c..142463c 100644
--- a/public/css/modules/btn.css
+++ b/scss/modules/btn.scss
diff --git a/public/css/modules/committee.md.css b/scss/modules/committee.md.scss
index 83ca252..83ca252 100644
--- a/public/css/modules/committee.md.css
+++ b/scss/modules/committee.md.scss
diff --git a/public/css/modules/committee.css b/scss/modules/committee.scss
index 8817fc1..8817fc1 100644
--- a/public/css/modules/committee.css
+++ b/scss/modules/committee.scss
diff --git a/public/css/modules/committee.xl.css b/scss/modules/committee.xl.scss
index 94d8429..94d8429 100644
--- a/public/css/modules/committee.xl.css
+++ b/scss/modules/committee.xl.scss
diff --git a/public/css/modules/footer.css b/scss/modules/footer.scss
index 0d1a896..0d1a896 100644
--- a/public/css/modules/footer.css
+++ b/scss/modules/footer.scss
diff --git a/scss/modules/index.lg.scss b/scss/modules/index.lg.scss
new file mode 100644
index 0000000..56a6dd8
--- /dev/null
+++ b/scss/modules/index.lg.scss
@@ -0,0 +1,2 @@
+@use 'nav.lg' as *;
+
diff --git a/scss/modules/index.md.scss b/scss/modules/index.md.scss
new file mode 100644
index 0000000..b426b71
--- /dev/null
+++ b/scss/modules/index.md.scss
@@ -0,0 +1,4 @@
+@use 'committee.md' as *;
+@use 'nav.md' as *;
+@use 'schedule.md' as *;
+
diff --git a/scss/modules/index.scss b/scss/modules/index.scss
new file mode 100644
index 0000000..6e67241
--- /dev/null
+++ b/scss/modules/index.scss
@@ -0,0 +1,11 @@
+@use 'btn' as *;
+@use 'committee' as *;
+@use 'footer' as *;
+@use 'link' as *;
+@use 'link-gallery' as *;
+@use 'nav' as *;
+@use 'news-index' as *;
+@use 'product' as *;
+@use 'schedule' as *;
+@use 'skip-to-content' as *;
+
diff --git a/scss/modules/index.xl.scss b/scss/modules/index.xl.scss
new file mode 100644
index 0000000..17e1d8c
--- /dev/null
+++ b/scss/modules/index.xl.scss
@@ -0,0 +1,2 @@
+@use 'committee.xl' as *;
+
diff --git a/scss/modules/index.xs.scss b/scss/modules/index.xs.scss
new file mode 100644
index 0000000..9dd43c5
--- /dev/null
+++ b/scss/modules/index.xs.scss
@@ -0,0 +1,3 @@
+@use 'link-gallery.xs' as *;
+@use 'nav.xs' as *;
+
diff --git a/public/css/modules/link-gallery.css b/scss/modules/link-gallery.scss
index d9f9514..d9f9514 100644
--- a/public/css/modules/link-gallery.css
+++ b/scss/modules/link-gallery.scss
diff --git a/public/css/modules/link-gallery.xs.css b/scss/modules/link-gallery.xs.scss
index b2bf86c..b2bf86c 100644
--- a/public/css/modules/link-gallery.xs.css
+++ b/scss/modules/link-gallery.xs.scss
diff --git a/public/css/modules/link.css b/scss/modules/link.scss
index d225e9d..d225e9d 100644
--- a/public/css/modules/link.css
+++ b/scss/modules/link.scss
diff --git a/public/css/modules/nav.lg.css b/scss/modules/nav.lg.scss
index c47a685..c47a685 100644
--- a/public/css/modules/nav.lg.css
+++ b/scss/modules/nav.lg.scss
diff --git a/public/css/modules/nav.md.css b/scss/modules/nav.md.scss
index c3f4a18..c3f4a18 100644
--- a/public/css/modules/nav.md.css
+++ b/scss/modules/nav.md.scss
diff --git a/public/css/modules/nav.css b/scss/modules/nav.scss
index 44ec5c6..44ec5c6 100644
--- a/public/css/modules/nav.css
+++ b/scss/modules/nav.scss
diff --git a/public/css/modules/nav.xs.css b/scss/modules/nav.xs.scss
index 708652c..708652c 100644
--- a/public/css/modules/nav.xs.css
+++ b/scss/modules/nav.xs.scss
diff --git a/public/css/modules/news-index.css b/scss/modules/news-index.scss
index 0050f70..0050f70 100644
--- a/public/css/modules/news-index.css
+++ b/scss/modules/news-index.scss
diff --git a/public/css/modules/product.css b/scss/modules/product.scss
index 32fa37f..32fa37f 100644
--- a/public/css/modules/product.css
+++ b/scss/modules/product.scss
diff --git a/public/css/modules/schedule.md.css b/scss/modules/schedule.md.scss
index 9ccfb0b..9ccfb0b 100644
--- a/public/css/modules/schedule.md.css
+++ b/scss/modules/schedule.md.scss
diff --git a/public/css/modules/schedule.css b/scss/modules/schedule.scss
index 140767c..140767c 100644
--- a/public/css/modules/schedule.css
+++ b/scss/modules/schedule.scss
diff --git a/public/css/modules/skip-to-content.css b/scss/modules/skip-to-content.scss
index a752b29..a752b29 100644
--- a/public/css/modules/skip-to-content.css
+++ b/scss/modules/skip-to-content.scss
diff --git a/public/normalize.css b/scss/normalize.scss
index 0130a0b..0130a0b 100644
--- a/public/normalize.css
+++ b/scss/normalize.scss
diff --git a/public/css/utils.css b/scss/utils.scss
index a05a216..a05a216 100644
--- a/public/css/utils.css
+++ b/scss/utils.scss
diff --git a/public/css/variables/colours.css b/scss/variables/colours.scss
index 5c34e42..65dd421 100644
--- a/public/css/variables/colours.css
+++ b/scss/variables/colours.scss
@@ -1,5 +1,3 @@
-@import 'palette.css';
-
 :root {
   --text-color: var(--color-primary-98);
   --text-highlight-color: var(--color-primary-10);
@@ -20,4 +18,4 @@
 
 :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
     --background-color: var(--color-primary-95);
-}
\ No newline at end of file
+}
diff --git a/scss/variables/index.lg.scss b/scss/variables/index.lg.scss
new file mode 100644
index 0000000..598c04f
--- /dev/null
+++ b/scss/variables/index.lg.scss
@@ -0,0 +1,2 @@
+@use 'spacing.lg' as *;
+
diff --git a/scss/variables/index.md.scss b/scss/variables/index.md.scss
new file mode 100644
index 0000000..b2bf6ac
--- /dev/null
+++ b/scss/variables/index.md.scss
@@ -0,0 +1,3 @@
+@use 'spacing.md' as *;
+@use 'typography.md' as *;
+
diff --git a/scss/variables/index.scss b/scss/variables/index.scss
new file mode 100644
index 0000000..57403d6
--- /dev/null
+++ b/scss/variables/index.scss
@@ -0,0 +1,5 @@
+@use 'colours' as *;
+@use 'palette' as *;
+@use 'spacing' as *;
+@use 'typography' as *;
+
diff --git a/scss/variables/index.sm.scss b/scss/variables/index.sm.scss
new file mode 100644
index 0000000..1ed077f
--- /dev/null
+++ b/scss/variables/index.sm.scss
@@ -0,0 +1,2 @@
+@use 'spacing.sm' as *;
+
diff --git a/scss/variables/index.xl.scss b/scss/variables/index.xl.scss
new file mode 100644
index 0000000..6e082d1
--- /dev/null
+++ b/scss/variables/index.xl.scss
@@ -0,0 +1,2 @@
+@use 'spacing.xl' as *;
+
diff --git a/scss/variables/index.xs.scss b/scss/variables/index.xs.scss
new file mode 100644
index 0000000..fd7abc2
--- /dev/null
+++ b/scss/variables/index.xs.scss
@@ -0,0 +1,3 @@
+@use 'spacing.xs' as *;
+@use 'typography.xs' as *;
+
diff --git a/scss/variables/index.xxl.scss b/scss/variables/index.xxl.scss
new file mode 100644
index 0000000..8d40b0c
--- /dev/null
+++ b/scss/variables/index.xxl.scss
@@ -0,0 +1,2 @@
+@use 'spacing.xxl' as *;
+
diff --git a/public/css/variables/palette.css b/scss/variables/palette.scss
index f40bb89..f40bb89 100644
--- a/public/css/variables/palette.css
+++ b/scss/variables/palette.scss
diff --git a/public/css/variables/spacing.lg.css b/scss/variables/spacing.lg.scss
index bc18bfd..bc18bfd 100644
--- a/public/css/variables/spacing.lg.css
+++ b/scss/variables/spacing.lg.scss
diff --git a/public/css/variables/spacing.md.css b/scss/variables/spacing.md.scss
index 0028e8a..0028e8a 100644
--- a/public/css/variables/spacing.md.css
+++ b/scss/variables/spacing.md.scss
diff --git a/public/css/variables/spacing.css b/scss/variables/spacing.scss
index a4d1d91..a4d1d91 100644
--- a/public/css/variables/spacing.css
+++ b/scss/variables/spacing.scss
diff --git a/public/css/variables/spacing.sm.css b/scss/variables/spacing.sm.scss
index 7cdf26f..7cdf26f 100644
--- a/public/css/variables/spacing.sm.css
+++ b/scss/variables/spacing.sm.scss
diff --git a/public/css/variables/spacing.xl.css b/scss/variables/spacing.xl.scss
index fc8b1f3..fc8b1f3 100644
--- a/public/css/variables/spacing.xl.css
+++ b/scss/variables/spacing.xl.scss
diff --git a/public/css/variables/spacing.xs.css b/scss/variables/spacing.xs.scss
index fb7c01a..fb7c01a 100644
--- a/public/css/variables/spacing.xs.css
+++ b/scss/variables/spacing.xs.scss
diff --git a/public/css/variables/spacing.xxl.css b/scss/variables/spacing.xxl.scss
index 17d2f66..17d2f66 100644
--- a/public/css/variables/spacing.xxl.css
+++ b/scss/variables/spacing.xxl.scss
diff --git a/public/css/variables/typography.md.css b/scss/variables/typography.md.scss
index 2c36d1d..2c36d1d 100644
--- a/public/css/variables/typography.md.css
+++ b/scss/variables/typography.md.scss
diff --git a/public/css/variables/typography.css b/scss/variables/typography.scss
index f8515fd..f8515fd 100644
--- a/public/css/variables/typography.css
+++ b/scss/variables/typography.scss
diff --git a/public/css/variables/typography.xs.css b/scss/variables/typography.xs.scss
index 6375aad..6375aad 100644
--- a/public/css/variables/typography.xs.css
+++ b/scss/variables/typography.xs.scss
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 24d0198..a5315be 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -31,8 +31,13 @@ function qualifiedLocalisedPath(newLocale: Locale) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.ico" />
     <link rel="sitemap" href="/sitemap-index.xml" />
-    <link rel="stylesheet" href="/normalize.css" />
-    <link rel="stylesheet" href="/main.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/index.xs.css" media="(min-width: 16rem)" />
+    <link rel="stylesheet" href="/css/index.sm.css" media="(min-width: 32rem)" />
+    <link rel="stylesheet" href="/css/index.md.css" media="(min-width: 48rem)" />
+    <link rel="stylesheet" href="/css/index.lg.css" media="(min-width: 64rem)" />
+    <link rel="stylesheet" href="/css/index.xl.css" media="(min-width: 96rem)" />
+    <link rel="stylesheet" href="/css/index.xl.css" media="(min-width: 120rem)" />
     <link
       rel="alternate"
       type="application/rss+xml"