From a1cabdeaaf3bade1bd0872bcafc52c81f1c31ce8 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Thu, 19 Oct 2023 23:13:30 +0100
Subject: 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>
---
 public/css/layout/grid.css            | 30 -------------------
 public/css/layout/grid.md.css         |  8 -----
 public/css/layout/grid.xs.css         | 55 -----------------------------------
 public/css/layout/index.css           |  4 ---
 public/css/layout/section-margins.css | 14 ---------
 5 files changed, 111 deletions(-)
 delete mode 100644 public/css/layout/grid.css
 delete mode 100644 public/css/layout/grid.md.css
 delete mode 100644 public/css/layout/grid.xs.css
 delete mode 100644 public/css/layout/index.css
 delete mode 100644 public/css/layout/section-margins.css

(limited to 'public/css/layout')

diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
deleted file mode 100644
index 25cdd95..0000000
--- a/public/css/layout/grid.css
+++ /dev/null
@@ -1,30 +0,0 @@
-:is(
-  header,
-  footer,
-  nav,
-  :is(main, article) > section:not(:is(section, header) :is(section, header))
-):not(.section--full-width) {
-  padding-inline: calc(var(--grid-padding) + 0.5 * (100vw - var(--grid-total-width)));
-}
-
-.grid-span-1 {
-  width: var(--grid-column-width);
-}
-
-/* On screens narrower than 16rem, there is only one column. */
-
-.grid-span-2 {
-  width: var(--grid-column-width);
-}
-
-.grid-span-3 {
-  width: var(--grid-column-width);
-}
-
-.width-prose {
-  width: var(--prose-width);
-}
-
-.grid-span-full {
-  width: var(--grid-total-width);
-}
diff --git a/public/css/layout/grid.md.css b/public/css/layout/grid.md.css
deleted file mode 100644
index f0c8478..0000000
--- a/public/css/layout/grid.md.css
+++ /dev/null
@@ -1,8 +0,0 @@
-:is(
-  header,
-  footer,
-  nav,
-  :is(main, article) > section:not(:is(section, header) :is(section, header))
-) {
-  padding-inline: var(--grid-padding);
-}
\ No newline at end of file
diff --git a/public/css/layout/grid.xs.css b/public/css/layout/grid.xs.css
deleted file mode 100644
index e7c6d1a..0000000
--- a/public/css/layout/grid.xs.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.grid-span-2 {
-  width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
-}
-
-.grid-span-3 {
-  width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2);
-}
-
-.grid-span-1.grid-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-column-count) - 1) +
-    var(--grid-gutter-width) * (var(--grid-column-count) - 1)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-2.grid-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-column-count) - 2) +
-    var(--grid-gutter-width) * (var(--grid-column-count) - 2)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-3.grid-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-column-count) - 3) +
-    var(--grid-gutter-width) * (var(--grid-column-count) - 3)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-1.grid-prose-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-prose-column-count) - 1) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-2.grid-prose-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-prose-column-count) - 2) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-3.grid-prose-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-prose-column-count) - 3) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3)
-  );
-  margin-inline-end: 0;
-}
\ 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/layout/section-margins.css b/public/css/layout/section-margins.css
deleted file mode 100644
index a11073f..0000000
--- a/public/css/layout/section-margins.css
+++ /dev/null
@@ -1,14 +0,0 @@
-:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) {
-  padding-block-start: var(--margin-block-lg);
-  padding-block-end: var(--margin-block-md);
-}
-
-footer {
-  padding-block-start: var(--margin-block-md);
-  padding-block-end: var(--margin-block-lg);
-}
-
-nav {
-  padding-block-start: var(--margin-block-sm);
-  padding-block-end: var(--margin-block-md);
-}
\ No newline at end of file
-- 
cgit v1.2.3