Merge pull request #65 from joeacarstairs/deployment-staging

Update production

28 files changed, 143 insertions, 49 deletions

diff --git a/scss/modules/btn.scss b/scss/modules/_btn.scss
index e9db392..6b5e543 100644
--- a/scss/modules/btn.scss
+++ b/scss/modules/_btn.scss
@@ -1,11 +1,11 @@
 .btn {
   display: block;
-  border: solid var(--relative-eighth-rem) var(--text-color);
+  border: solid var(--border-width) var(--text-color);
   font-weight: 600;
   text-align: center;
-  margin-block-start: var(--margin-block-sm);
-  padding-inline: var(--padding-inline-md);
-  padding-block: var(--padding-block-sm);
+  margin-block-start: var(--spacing-block-sm);
+  padding-inline: var(--spacing-inline-md);
+  padding-block: var(--spacing-block-sm);
   background-color: transparent;
   transition:
     background-color 100ms,
diff --git a/scss/modules/committee.md.scss b/scss/modules/_committee.md.scss
index 83ca252..83ca252 100644
--- a/scss/modules/committee.md.scss
+++ b/scss/modules/_committee.md.scss
diff --git a/scss/modules/_committee.scss b/scss/modules/_committee.scss
new file mode 100644
index 0000000..f6528a3
--- /dev/null
+++ b/scss/modules/_committee.scss
@@ -0,0 +1,37 @@
+.committee__member {
+  list-style-type: none;
+  margin-block-start: var(--spacing-block-sm);
+}
+
+.committee__member + .committee__member {
+  border-top-width: var(--border-width);
+  border-top-style: solid;
+  border-image: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 19.1%,
+    var(--text-color) 19.1%,
+    var(--text-color) 80.9%,
+    transparent 80.9%,
+    transparent 100%
+  ) 1;
+  margin-block-start: var(--spacing-block-md);
+  padding-block-start: var(--spacing-block-md);
+}
+
+.committee__member__img {
+  margin-inline: 25%;
+  width: 50%;
+  border-radius: 50%;
+}
+
+.committee__member__text {
+  text-align: center;
+  margin-block-start: var(--spacing-block-sm);
+}
+
+.committee__member__role {
+  display: block;
+  font-weight: lighter;
+}
+
diff --git a/scss/modules/_committee.sm.scss b/scss/modules/_committee.sm.scss
new file mode 100644
index 0000000..a2b2216
--- /dev/null
+++ b/scss/modules/_committee.sm.scss
@@ -0,0 +1,5 @@
+.committee__member__text {
+  text-align: start;
+  margin: 0;
+}
+
diff --git a/scss/modules/committee.xl.scss b/scss/modules/_committee.xl.scss
index 94d8429..94d8429 100644
--- a/scss/modules/committee.xl.scss
+++ b/scss/modules/_committee.xl.scss
diff --git a/scss/modules/committee.scss b/scss/modules/_committee.xs.scss
index 2badf57..5681bc7 100644
--- a/scss/modules/committee.scss
+++ b/scss/modules/_committee.xs.scss
@@ -1,10 +1,5 @@
-.committee__member {
-  list-style-type: none;
-  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%;
 }
+
diff --git a/scss/modules/footer.scss b/scss/modules/_footer.scss
index 0d1a896..9210044 100644
--- a/scss/modules/footer.scss
+++ b/scss/modules/_footer.scss
@@ -1,8 +1,8 @@
 footer {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
-  gap: var(--grid-gutter-width);
-  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-block-sm);
+  align-items: center;
 }
 
 .footer__rss-button__label {
@@ -19,10 +19,10 @@ footer {
 }
 
 .footer__rss-button__img {
-  min-width: 44px;
-  width: calc(8 * var(--relative-eighth-rem));
+  display: block;
 }
 
 .footer__back-to-top {
   grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1);
-}
\ No newline at end of file
+  margin: 0;
+}
diff --git a/scss/modules/_footer.xs.scss b/scss/modules/_footer.xs.scss
new file mode 100644
index 0000000..67cab7f
--- /dev/null
+++ b/scss/modules/_footer.xs.scss
@@ -0,0 +1,7 @@
+footer {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  gap: var(--grid-gutter-width);
+  align-items: end;
+}
+
diff --git a/scss/modules/index.lg.scss b/scss/modules/_index.lg.scss
index 56a6dd8..56a6dd8 100644
--- a/scss/modules/index.lg.scss
+++ b/scss/modules/_index.lg.scss
diff --git a/scss/modules/index.md.scss b/scss/modules/_index.md.scss
index b426b71..b426b71 100644
--- a/scss/modules/index.md.scss
+++ b/scss/modules/_index.md.scss
diff --git a/scss/modules/index.scss b/scss/modules/_index.scss
index 6e67241..6e67241 100644
--- a/scss/modules/index.scss
+++ b/scss/modules/_index.scss
diff --git a/scss/modules/_index.sm.scss b/scss/modules/_index.sm.scss
new file mode 100644
index 0000000..a4fb988
--- /dev/null
+++ b/scss/modules/_index.sm.scss
@@ -0,0 +1,3 @@
+@use 'committee.sm' as *;
+@use 'nav.sm' as *;
+
diff --git a/scss/modules/index.xl.scss b/scss/modules/_index.xl.scss
index 17e1d8c..17e1d8c 100644
--- a/scss/modules/index.xl.scss
+++ b/scss/modules/_index.xl.scss
diff --git a/scss/modules/index.xs.scss b/scss/modules/_index.xs.scss
index 9dd43c5..ef77c6d 100644
--- a/scss/modules/index.xs.scss
+++ b/scss/modules/_index.xs.scss
@@ -1,3 +1,5 @@
+@use 'committee.xs' as *;
+@use 'footer.xs' as *;
 @use 'link-gallery.xs' as *;
 @use 'nav.xs' as *;
 
diff --git a/scss/modules/link-gallery.scss b/scss/modules/_link-gallery.scss
index 56949e2..d321419 100644
--- a/scss/modules/link-gallery.scss
+++ b/scss/modules/_link-gallery.scss
@@ -2,7 +2,7 @@
   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);
+  padding-block: var(--spacing-block-md);
   --gallery-item-column-span: 1;
   --gallery-row-image-height: 12rem;
   --gallery-row-title-height: fit-content;
@@ -25,13 +25,13 @@
   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);
+  row-gap: var(--spacing-block-sm);
 }
 
 .link-gallery--furthsettins img {
   box-sizing: border-box;
   border-radius: 50%;
-  border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color);
+  border: solid var(--border-width) var(--text-color);
 }
 
 .link-gallery__title {
diff --git a/scss/modules/link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss
index b2bf86c..b2bf86c 100644
--- a/scss/modules/link-gallery.xs.scss
+++ b/scss/modules/_link-gallery.xs.scss
diff --git a/scss/modules/link.scss b/scss/modules/_link.scss
index 83206d4..2f827c4 100644
--- a/scss/modules/link.scss
+++ b/scss/modules/_link.scss
@@ -2,23 +2,19 @@ a, .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: dotted transparent var(--border-width);
   transition:
     color 100ms,
     text-decoration-color 100ms,
-    text-decoration-thickness 100ms,
     border-color 100ms;
 
   &:is(:hover, :focus, :focus-visible, :focus-within),
   .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & {
     text-decoration-color: currentColor;
-    text-decoration-thickness: calc(3 * var(--relative-eighth-rem));
+    text-decoration-style: wavy;
     transition:
       color 300ms,
       text-decoration-color 300ms,
-      text-decoration-thickness 300ms,
       border-color 300ms;
   }
 
diff --git a/scss/modules/nav.lg.scss b/scss/modules/_nav.lg.scss
index c47a685..c47a685 100644
--- a/scss/modules/nav.lg.scss
+++ b/scss/modules/_nav.lg.scss
diff --git a/scss/modules/_nav.md.scss b/scss/modules/_nav.md.scss
new file mode 100644
index 0000000..7f0f784
--- /dev/null
+++ b/scss/modules/_nav.md.scss
@@ -0,0 +1,26 @@
+.nav__nav-links li {
+  &:nth-child(1) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(2) {
+    grid-column: 3 / 5;
+  }
+
+  &:nth-child(3) {
+    grid-column: 5 / 8;
+  }
+
+  &:nth-child(4) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(5) {
+    grid-column: 3 / 5;
+  }
+}
+
+.nav__switch-language-link {
+  margin-inline-end: calc(var(--grid-column-width) + var(--grid-gutter-width));
+}
+
diff --git a/scss/modules/nav.scss b/scss/modules/_nav.scss
index 765c44f..f2f32a9 100644
--- a/scss/modules/nav.scss
+++ b/scss/modules/_nav.scss
@@ -28,9 +28,10 @@
   font-family: var(--font-serif);
   font-size: var(--font-size-5);
   font-weight: 700;
+  line-height: 1.15;
 
   /* This gradient is based on                  *
-   * --color-primary-60 -> --color-secondary-60 *
+   * colours.$primary-60 -> colours.$secondary-60 *
    * using Josh W Comeau's gradient generator   */
   width: fit-content;
   background-image: linear-gradient(
@@ -53,7 +54,7 @@
 
   a {
     text-decoration: none;
-    border: var(--relative-eighth-rem) dotted transparent;
+    border: var(--border-width) dotted transparent;
     transition: border-color 100ms;
 
     &:is(:focus, :focus-visible, :focus-within) {
@@ -66,14 +67,9 @@
 }
 
 .nav__breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-
   li {
-    min-width: max-content;
-    &::before {
-      content: '/'
-    }
+    list-style: '▸';
+    list-style-position: inside;
   }
 }
 
diff --git a/scss/modules/_nav.sm.scss b/scss/modules/_nav.sm.scss
new file mode 100644
index 0000000..db540bd
--- /dev/null
+++ b/scss/modules/_nav.sm.scss
@@ -0,0 +1,38 @@
+.nav__breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+
+  li {
+    display: inline;
+    min-width: max-content;
+
+    + li::before {
+      content: '/';
+      margin-inline: var(--margin-inline-md);
+    }
+  }
+}
+
+.nav__nav-links li {
+  &:nth-child(1) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(2) {
+    grid-column: 3 / 6;
+  }
+
+  &:nth-child(3) {
+    grid-column: 6 / 9;
+  }
+
+  &:nth-child(4) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(5) {
+    grid-column: 3 / 5;
+  }
+}
+
diff --git a/scss/modules/nav.xs.scss b/scss/modules/_nav.xs.scss
index 708652c..708652c 100644
--- a/scss/modules/nav.xs.scss
+++ b/scss/modules/_nav.xs.scss
diff --git a/scss/modules/news-index.scss b/scss/modules/_news-index.scss
index 5d9bab2..b235edd 100644
--- a/scss/modules/news-index.scss
+++ b/scss/modules/_news-index.scss
@@ -1,10 +1,10 @@
 .news-index__item {
   display: block;
   box-sizing: border-box;
-  border: var(--relative-eighth-rem) solid var(--text-color);
+  border: var(--border-width) solid var(--text-color);
   transition: background 100ms;
-  padding-block: var(--margin-block-md);
-  padding-inline: var(--padding-inline-sm);
+  padding-block: var(--spacing-block-md);
+  padding-inline: var(--spacing-inline-sm);
   width: var(--width-prose);
 }
 
diff --git a/scss/modules/product.scss b/scss/modules/_product.scss
index bc05dfd..bc05dfd 100644
--- a/scss/modules/product.scss
+++ b/scss/modules/_product.scss
diff --git a/scss/modules/schedule.md.scss b/scss/modules/_schedule.md.scss
index 9ccfb0b..9ccfb0b 100644
--- a/scss/modules/schedule.md.scss
+++ b/scss/modules/_schedule.md.scss
diff --git a/scss/modules/schedule.scss b/scss/modules/_schedule.scss
index 40a9fee..40a9fee 100644
--- a/scss/modules/schedule.scss
+++ b/scss/modules/_schedule.scss
diff --git a/scss/modules/skip-to-content.scss b/scss/modules/_skip-to-content.scss
index a752b29..a752b29 100644
--- a/scss/modules/skip-to-content.scss
+++ b/scss/modules/_skip-to-content.scss
diff --git a/scss/modules/nav.md.scss b/scss/modules/nav.md.scss
deleted file mode 100644
index c3f4a18..0000000
--- a/scss/modules/nav.md.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.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