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/modules/btn.scss             | 38 +++++++++++++++++++
 scss/modules/committee.md.scss    | 16 ++++++++
 scss/modules/committee.scss       |  9 +++++
 scss/modules/committee.xl.scss    | 15 ++++++++
 scss/modules/footer.scss          | 28 ++++++++++++++
 scss/modules/index.lg.scss        |  2 +
 scss/modules/index.md.scss        |  4 ++
 scss/modules/index.scss           | 11 ++++++
 scss/modules/index.xl.scss        |  2 +
 scss/modules/index.xs.scss        |  3 ++
 scss/modules/link-gallery.scss    | 41 +++++++++++++++++++++
 scss/modules/link-gallery.xs.scss | 21 +++++++++++
 scss/modules/link.scss            | 42 +++++++++++++++++++++
 scss/modules/nav.lg.scss          | 15 ++++++++
 scss/modules/nav.md.scss          | 11 ++++++
 scss/modules/nav.scss             | 77 +++++++++++++++++++++++++++++++++++++++
 scss/modules/nav.xs.scss          | 19 ++++++++++
 scss/modules/news-index.scss      | 31 ++++++++++++++++
 scss/modules/product.scss         | 20 ++++++++++
 scss/modules/schedule.md.scss     | 16 ++++++++
 scss/modules/schedule.scss        | 13 +++++++
 scss/modules/skip-to-content.scss | 13 +++++++
 22 files changed, 447 insertions(+)
 create mode 100644 scss/modules/btn.scss
 create mode 100644 scss/modules/committee.md.scss
 create mode 100644 scss/modules/committee.scss
 create mode 100644 scss/modules/committee.xl.scss
 create mode 100644 scss/modules/footer.scss
 create mode 100644 scss/modules/index.lg.scss
 create mode 100644 scss/modules/index.md.scss
 create mode 100644 scss/modules/index.scss
 create mode 100644 scss/modules/index.xl.scss
 create mode 100644 scss/modules/index.xs.scss
 create mode 100644 scss/modules/link-gallery.scss
 create mode 100644 scss/modules/link-gallery.xs.scss
 create mode 100644 scss/modules/link.scss
 create mode 100644 scss/modules/nav.lg.scss
 create mode 100644 scss/modules/nav.md.scss
 create mode 100644 scss/modules/nav.scss
 create mode 100644 scss/modules/nav.xs.scss
 create mode 100644 scss/modules/news-index.scss
 create mode 100644 scss/modules/product.scss
 create mode 100644 scss/modules/schedule.md.scss
 create mode 100644 scss/modules/schedule.scss
 create mode 100644 scss/modules/skip-to-content.scss

(limited to 'scss/modules')

diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss
new file mode 100644
index 0000000..142463c
--- /dev/null
+++ b/scss/modules/btn.scss
@@ -0,0 +1,38 @@
+.btn {
+  display: block;
+  box-sizing: border-box;
+  color: var(--text-color);
+  border: solid var(--relative-eighth-rem) var(--text-color);
+  font-weight: 500;
+  text-align: center;
+  margin-block-start: var(--margin-block-sm);
+  padding-inline: var(--padding-inline-md);
+  padding-block: var(--padding-block-sm);
+  background-color: transparent;
+  transition:
+    background-color 100ms,
+    font-weight 100ms,
+    transform 100ms;
+}
+
+.btn:is(:hover, :focus, :focus-visible, :focus-within, :active) {
+  box-shadow: none;
+  outline: none;
+  color: var(--text-highlight-color);
+  border-color: var(--background-highlight-color);
+  background-color: var(--background-highlight-color);
+  font-weight: 700;
+  transition:
+    background-color 300ms,
+    font-weight 300ms,
+    transform 300ms;
+}
+
+.btn:is(:focus, :focus-visible, :focus-within) {
+  border-color: var(--special-text-highlight-color);
+  border-style: dotted;
+}
+
+.btn:active {
+  transform: scale(1.1, 1.1);
+}
\ No newline at end of file
diff --git a/scss/modules/committee.md.scss b/scss/modules/committee.md.scss
new file mode 100644
index 0000000..83ca252
--- /dev/null
+++ b/scss/modules/committee.md.scss
@@ -0,0 +1,16 @@
+.committee__member {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  grid-template-rows: 1fr;
+  column-gap: var(--grid-gutter-width);
+}
+
+.committee__member__img {
+  grid-column: 1 / 3;
+  margin-block: auto;
+  margin-inline: 0;
+}
+
+.committee__member__text {
+  grid-column: 3 / calc(3 + var(--grid-prose-column-count) - 2);
+}
\ No newline at end of file
diff --git a/scss/modules/committee.scss b/scss/modules/committee.scss
new file mode 100644
index 0000000..8817fc1
--- /dev/null
+++ b/scss/modules/committee.scss
@@ -0,0 +1,9 @@
+.committee__member {
+  margin-block-start: var(--margin-block-sm);
+}
+
+.committee__member__img {
+  margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width));
+  width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width));
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/scss/modules/committee.xl.scss b/scss/modules/committee.xl.scss
new file mode 100644
index 0000000..94d8429
--- /dev/null
+++ b/scss/modules/committee.xl.scss
@@ -0,0 +1,15 @@
+.committee__member {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  grid-template-rows: 1fr;
+  column-gap: var(--grid-gutter-width);
+}
+
+.committee__member__img {
+  grid-column: 1 / 3;
+  margin-block: auto;
+}
+
+.committee__member__text {
+  grid-column: 3 / min(11, calc(var(--grid-column-count) + 1));
+}
\ No newline at end of file
diff --git a/scss/modules/footer.scss b/scss/modules/footer.scss
new file mode 100644
index 0000000..0d1a896
--- /dev/null
+++ b/scss/modules/footer.scss
@@ -0,0 +1,28 @@
+footer {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  gap: var(--grid-gutter-width);
+  align-items: baseline;
+}
+
+.footer__rss-button__label {
+  /* Hides the label from non-screen-readers */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.footer__rss-button__img {
+  min-width: 44px;
+  width: calc(8 * var(--relative-eighth-rem));
+}
+
+.footer__back-to-top {
+  grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1);
+}
\ No newline at end of file
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/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss
new file mode 100644
index 0000000..d9f9514
--- /dev/null
+++ b/scss/modules/link-gallery.scss
@@ -0,0 +1,41 @@
+.link-gallery {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  gap: var(--grid-gutter-width);
+  padding-block: var(--margin-block-md);
+  --gallery-item-column-span: 1;
+  --gallery-row-image-height: 12rem;
+  --gallery-row-title-height: fit-content;
+  text-align: center;
+}
+
+.link-gallery li {
+  grid-column: span var(--gallery-item-column-span);
+}
+
+.link-gallery__container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height);
+  row-gap: var(--margin-block-sm);
+}
+
+.link-gallery--furthsettins img {
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color);
+}
+
+.link-gallery img {
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+  height: auto;
+}
+
+.link-gallery__title {
+  width: 100%;
+  height: min-content;
+  text-align: center;
+  margin-inline: var(--spacing-inline-xs);
+}
diff --git a/scss/modules/link-gallery.xs.scss b/scss/modules/link-gallery.xs.scss
new file mode 100644
index 0000000..b2bf86c
--- /dev/null
+++ b/scss/modules/link-gallery.xs.scss
@@ -0,0 +1,21 @@
+.link-gallery {
+  grid-auto-rows: calc(
+    var(--gallery-row-image-height) +
+    var(--margin-block-sm) +
+    var(--gallery-row-title-height)
+  );
+  --gallery-item-column-span: 2;
+  --gallery-row-title-height: 11ex;
+  text-align: center;
+}
+
+.link-gallery__title {
+  width: 100%;
+  height: 9.9ex;
+  height: 3lh;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
diff --git a/scss/modules/link.scss b/scss/modules/link.scss
new file mode 100644
index 0000000..d225e9d
--- /dev/null
+++ b/scss/modules/link.scss
@@ -0,0 +1,42 @@
+.link {
+  color: var(--special-text-color);
+  text-decoration-line: underline;
+  text-decoration-color: var(--special-text-color);
+  text-decoration-thickness: var(--relative-eighth-rem);
+  text-underline-offset: var(--relative-eighth-rem);
+  border: dotted transparent var(--relative-eighth-rem);
+  border-radius: calc(3 * var(--relative-eighth-rem));
+  transition:
+    color 100ms,
+    text-decoration-color 100ms,
+    text-decoration-thickness 100ms,
+    text-underline-offset 100ms,
+    border-color 100ms,
+    text-shadow 100ms;
+}
+
+.link:is(:hover, :focus, :focus-visible, :focus-within),
+.group-hover:is(:hover, :focus, :focus-visible, :focus-within) .link {
+  text-decoration-color: currentColor;
+  text-decoration-thickness: calc(4 * var(--relative-eighth-rem));
+  text-underline-offset: calc(3 * var(--relative-eighth-rem));
+  text-shadow:
+    0 1px 0 currentColor,
+    1px 0 0 currentColor,
+    1px 0 0 currentColor,
+    0 1px 0 currentColor;
+  transition:
+    color 300ms,
+    text-decoration-color 300ms,
+    text-decoration-thickness 300ms,
+    text-underline-offset 300ms,
+    border-color 300ms,
+    text-shadow 300ms;
+}
+
+.link:focus, .link:focus-visible {
+  box-shadow: none;
+  outline: none;
+  border-color: var(--special-text-color);
+}
+
diff --git a/scss/modules/nav.lg.scss b/scss/modules/nav.lg.scss
new file mode 100644
index 0000000..c47a685
--- /dev/null
+++ b/scss/modules/nav.lg.scss
@@ -0,0 +1,15 @@
+.nav__bottom-row {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
+  gap: var(--spacing-inline-xs);
+}
+
+.nav__nav-links li:nth-child(4) {
+  grid-column: 8 / 10;
+}
+
+.nav__nav-links li:nth-child(5) {
+  grid-column: 10 / 12;
+}
diff --git a/scss/modules/nav.md.scss b/scss/modules/nav.md.scss
new file mode 100644
index 0000000..c3f4a18
--- /dev/null
+++ b/scss/modules/nav.md.scss
@@ -0,0 +1,11 @@
+.nav__nav-links li:nth-child(3) {
+  grid-column: 5 / 8;
+}
+
+.nav__nav-links li:nth-child(4) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(5) {
+  grid-column: 3 / 5;
+}
\ No newline at end of file
diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss
new file mode 100644
index 0000000..44ec5c6
--- /dev/null
+++ b/scss/modules/nav.scss
@@ -0,0 +1,77 @@
+.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;
+}
diff --git a/scss/modules/nav.xs.scss b/scss/modules/nav.xs.scss
new file mode 100644
index 0000000..708652c
--- /dev/null
+++ b/scss/modules/nav.xs.scss
@@ -0,0 +1,19 @@
+.nav__nav-links li:nth-child(1) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(2) {
+  grid-column: 3 / 5;
+}
+
+.nav__nav-links li:nth-child(3) {
+  grid-column: 1 / 4;
+}
+
+.nav__nav-links li:nth-child(4) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(5) {
+  grid-column: 3 / 5;
+}
diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss
new file mode 100644
index 0000000..0050f70
--- /dev/null
+++ b/scss/modules/news-index.scss
@@ -0,0 +1,31 @@
+.news-index__item {
+  display: block;
+  box-sizing: border-box;
+  border: var(--relative-eighth-rem) solid var(--text-color);
+  transition: background 100ms;
+  padding-block: var(--margin-block-md);
+  padding-inline: var(--padding-inline-sm);
+  width: var(--width-prose);
+}
+
+.news-index__item:not(:first-child) {
+  border-top-width: 0;
+}
+
+.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) {
+  outline: none;
+  box-shadow: none;
+  color: var(--text-highlight-color);
+  border-color: var(--background-highlight-color);
+  background: var(--background-highlight-color);
+  transition-duration: 300ms;
+}
+
+.news-index__item:is(:hover, :focus, :focus-visible, :focus-within) .link {
+  color: var(--special-text-highlight-color);
+}
+
+.news-index__item:is(:focus, :focus-visible, :focus-within) {
+  border-color: var(--special-text-highlight-color);
+  border-style: dotted;
+}
\ No newline at end of file
diff --git a/scss/modules/product.scss b/scss/modules/product.scss
new file mode 100644
index 0000000..32fa37f
--- /dev/null
+++ b/scss/modules/product.scss
@@ -0,0 +1,20 @@
+.product__header-block {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  gap: var(--spacing-inline-sm);
+}
+
+.product__action-block {
+  display: flex;
+  flex-direction: column;
+  margin-inline: auto;
+  width: fit-content;
+  gap: var(--margin-block-sm);
+}
+
+.product__action-block img {
+  max-width: 12rem;
+  width: 100%;
+  height: auto;
+}
diff --git a/scss/modules/schedule.md.scss b/scss/modules/schedule.md.scss
new file mode 100644
index 0000000..9ccfb0b
--- /dev/null
+++ b/scss/modules/schedule.md.scss
@@ -0,0 +1,16 @@
+.schedule {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  column-gap: var(--grid-gutter-width);
+}
+
+.schedule dt {
+  grid-column: 1 / 3;
+  margin: 0;
+  text-align: end;
+}
+
+.schedule dd {
+  grid-column: 3 / calc(1 + var(--grid-prose-column-count));
+  text-align: start;
+}
diff --git a/scss/modules/schedule.scss b/scss/modules/schedule.scss
new file mode 100644
index 0000000..140767c
--- /dev/null
+++ b/scss/modules/schedule.scss
@@ -0,0 +1,13 @@
+.schedule:not(:first-child) {
+  margin-block-start: var(--margin-block-sm);
+}
+
+.schedule dt {
+  font-weight: 700;
+  margin-block-start: var(--margin-block-sm);
+  text-align: center;
+}
+
+.schedule dd {
+  text-align: center;
+}
diff --git a/scss/modules/skip-to-content.scss b/scss/modules/skip-to-content.scss
new file mode 100644
index 0000000..a752b29
--- /dev/null
+++ b/scss/modules/skip-to-content.scss
@@ -0,0 +1,13 @@
+.skip-to-content {
+  position: absolute;
+  left: var(--grid-padding);
+  top: -10rem;
+  opacity: 0;
+  transition: top 300ms, opacity 300ms;
+}
+
+.skip-to-content:is(:focus, :focus-visible, :focus-within) {
+  top: var(--margin-block-md);
+  opacity: 1;
+  transition: top 100ms;
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 8038cbe1938f9567856bb97fd4ed24376f74dbf1 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <jcarstairs@scottlogic.com>
Date: Fri, 20 Oct 2023 13:20:16 +0100
Subject: Nests link-gallery bits and pieces

---
 scss/modules/link-gallery.scss | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'scss/modules')

diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss
index d9f9514..2c2cdb7 100644
--- a/scss/modules/link-gallery.scss
+++ b/scss/modules/link-gallery.scss
@@ -7,10 +7,17 @@
   --gallery-row-image-height: 12rem;
   --gallery-row-title-height: fit-content;
   text-align: center;
-}
 
-.link-gallery li {
-  grid-column: span var(--gallery-item-column-span);
+  li {
+    grid-column: span var(--gallery-item-column-span);
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    height: auto;
+  }
 }
 
 .link-gallery__container {
@@ -26,13 +33,6 @@
   border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color);
 }
 
-.link-gallery img {
-  max-width: 100%;
-  max-height: 100%;
-  margin: auto;
-  height: auto;
-}
-
 .link-gallery__title {
   width: 100%;
   height: min-content;
-- 
cgit v1.2.3


From 644f10a3284e034ed5cd2e32f276efd7aff56723 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <jcarstairs@scottlogic.com>
Date: Fri, 20 Oct 2023 13:20:56 +0100
Subject: Link gallery images are object-fit:contain

---
 scss/modules/link-gallery.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'scss/modules')

diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss
index 2c2cdb7..c3788dc 100644
--- a/scss/modules/link-gallery.scss
+++ b/scss/modules/link-gallery.scss
@@ -16,7 +16,7 @@
     max-width: 100%;
     max-height: 100%;
     margin: auto;
-    height: auto;
+    object-fit: contain;
   }
 }
 
-- 
cgit v1.2.3