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>
---
 scss/layout/grid.md.scss         |  8 ++++++
 scss/layout/grid.scss            | 30 ++++++++++++++++++++++
 scss/layout/grid.xs.scss         | 55 ++++++++++++++++++++++++++++++++++++++++
 scss/layout/index.md.scss        |  2 ++
 scss/layout/index.scss           |  3 +++
 scss/layout/index.xs.scss        |  2 ++
 scss/layout/section-margins.scss | 14 ++++++++++
 7 files changed, 114 insertions(+)
 create mode 100644 scss/layout/grid.md.scss
 create mode 100644 scss/layout/grid.scss
 create mode 100644 scss/layout/grid.xs.scss
 create mode 100644 scss/layout/index.md.scss
 create mode 100644 scss/layout/index.scss
 create mode 100644 scss/layout/index.xs.scss
 create mode 100644 scss/layout/section-margins.scss

(limited to 'scss/layout')

diff --git a/scss/layout/grid.md.scss b/scss/layout/grid.md.scss
new file mode 100644
index 0000000..f0c8478
--- /dev/null
+++ b/scss/layout/grid.md.scss
@@ -0,0 +1,8 @@
+: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/scss/layout/grid.scss b/scss/layout/grid.scss
new file mode 100644
index 0000000..25cdd95
--- /dev/null
+++ b/scss/layout/grid.scss
@@ -0,0 +1,30 @@
+: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/scss/layout/grid.xs.scss b/scss/layout/grid.xs.scss
new file mode 100644
index 0000000..e7c6d1a
--- /dev/null
+++ b/scss/layout/grid.xs.scss
@@ -0,0 +1,55 @@
+.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/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/scss/layout/section-margins.scss b/scss/layout/section-margins.scss
new file mode 100644
index 0000000..a11073f
--- /dev/null
+++ b/scss/layout/section-margins.scss
@@ -0,0 +1,14 @@
+: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