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/link-gallery.scss | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 scss/modules/link-gallery.scss

(limited to 'scss/modules/link-gallery.scss')

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);
+}
-- 
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/link-gallery.scss')

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/link-gallery.scss')

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