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>

1 files changed, 41 insertions, 0 deletions

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);
+}