Layout and typography improvements (#63)

* Adds soft hyphens to homepage

* auto-hyphenates!

* Tighter line-height in logo

* Fixes spacing and typography below xs breakpoint

* Fixes xs-sm spacing and typography

* Fixes border widths

* Link hover uses wavy underline instead of fat underline

* Fixes committee img layout on <xs

* Nice separators between committee members

* Better styling for committee member heading

* Consistent start-end block padding for sections

* Better breadcrumb styling

* Neatens alignment in footer

* Renames scss/variables -> scss/custom-properties

* Pulls out colours SCSS variables

* Merges margins and padding values

* Moves variables/colours -> values/colours

* Starts migrating spacing values to SCSS

* Pulls out typography logic to SCSS variables/functions

* Removes unneeded --er custom property

* Calculates grid-total-width-absolute in SCSS

* Forwards constants with @forward

* Removes TODOs and unnecessary assignment to --width-prose

24 files changed, 228 insertions, 0 deletions

diff --git a/scss/custom-properties/colours.scss b/scss/custom-properties/colours.scss
new file mode 100644
index 0000000..dadb50e
--- /dev/null
+++ b/scss/custom-properties/colours.scss
@@ -0,0 +1,23 @@
+@use '../values/colours' as colours;
+
+:root {
+  --text-color: #{colours.$primary-98};
+  --text-highlight-color: #{colours.$primary-10};
+  --background-color: #{colours.$primary-10};
+  --background-highlight-color: #{colours.$primary-90};
+  --special-text-color: #{colours.$secondary-90};
+  --special-text-highlight-color: #{colours.$secondary-10};
+}
+
+:is(main, article) {
+  --text-color: #{colours.$primary-10};
+  --text-highlight-color: #{colours.$primary-90};
+  --background-color: #{colours.$primary-98};
+  --background-highlight-color: #{colours.$primary-10};
+  --special-text-color: #{colours.$secondary-40};
+  --special-text-highlight-color: #{colours.$secondary-90};
+}
+
+:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
+    --background-color: #{colours.$primary-95};
+}
diff --git a/scss/custom-properties/index.lg.scss b/scss/custom-properties/index.lg.scss
new file mode 100644
index 0000000..2a36586
--- /dev/null
+++ b/scss/custom-properties/index.lg.scss
@@ -0,0 +1,3 @@
+@use 'spacing/lg' as *;
+@use 'typography/lg' as *;
+
diff --git a/scss/custom-properties/index.md.scss b/scss/custom-properties/index.md.scss
new file mode 100644
index 0000000..2367952
--- /dev/null
+++ b/scss/custom-properties/index.md.scss
@@ -0,0 +1,3 @@
+@use 'spacing/md' as *;
+@use 'typography/md' as *;
+
diff --git a/scss/custom-properties/index.scss b/scss/custom-properties/index.scss
new file mode 100644
index 0000000..e7279b6
--- /dev/null
+++ b/scss/custom-properties/index.scss
@@ -0,0 +1,3 @@
+@use 'colours' as *;
+@use 'spacing/initial' as *;
+@use 'typography/initial' as *;
diff --git a/scss/custom-properties/index.sm.scss b/scss/custom-properties/index.sm.scss
new file mode 100644
index 0000000..c1ddffe
--- /dev/null
+++ b/scss/custom-properties/index.sm.scss
@@ -0,0 +1,3 @@
+@use 'spacing/sm' as *;
+@use 'typography/sm' as *;
+
diff --git a/scss/custom-properties/index.xl.scss b/scss/custom-properties/index.xl.scss
new file mode 100644
index 0000000..14c55cf
--- /dev/null
+++ b/scss/custom-properties/index.xl.scss
@@ -0,0 +1,3 @@
+@use 'spacing/xl' as *;
+@use 'typography/xl' as *;
+
diff --git a/scss/custom-properties/index.xs.scss b/scss/custom-properties/index.xs.scss
new file mode 100644
index 0000000..32eb377
--- /dev/null
+++ b/scss/custom-properties/index.xs.scss
@@ -0,0 +1,3 @@
+@use 'spacing/xs' as *;
+@use 'typography/xs' as *;
+
diff --git a/scss/custom-properties/index.xxl.scss b/scss/custom-properties/index.xxl.scss
new file mode 100644
index 0000000..8555eee
--- /dev/null
+++ b/scss/custom-properties/index.xxl.scss
@@ -0,0 +1,3 @@
+@use 'spacing/xxl' as *;
+@use 'typography/xxl' as *;
+
diff --git a/scss/custom-properties/spacing/_mixins.scss b/scss/custom-properties/spacing/_mixins.scss
new file mode 100644
index 0000000..4e35ee7
--- /dev/null
+++ b/scss/custom-properties/spacing/_mixins.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+@use '../../values/spacing' as spacing-values;
+
+@mixin spacing($breakpoint: initial) {
+  --spacing-inline-lg: #{spacing-values.spacing($direction: inline, $size: lg, $breakpoint: $breakpoint)};
+  --spacing-inline-md: #{spacing-values.spacing($direction: inline, $size: md, $breakpoint: $breakpoint)};
+  --spacing-inline-sm: #{spacing-values.spacing($direction: inline, $size: sm, $breakpoint: $breakpoint)};
+  --spacing-block-lg: #{spacing-values.spacing($direction: block, $size: lg, $breakpoint: $breakpoint)};
+  --spacing-block-md: #{spacing-values.spacing($direction: block, $size: md, $breakpoint: $breakpoint)};
+  --spacing-block-sm: #{spacing-values.spacing($direction: block, $size: sm, $breakpoint: $breakpoint)};
+}
+
+@mixin grid($breakpoint: initial) {
+  --grid-padding: #{spacing-values.grid-padding($breakpoint: $breakpoint)};
+  --grid-column-count: #{map.get(spacing-values.$grid-column-count, $breakpoint)};
+  --grid-column-width: #{spacing-values.grid-column-width($breakpoint: $breakpoint)};
+  --grid-gutter-width: #{spacing-values.grid-gutter-width($breakpoint: $breakpoint)};
+  --grid-prose-column-count: #{map.get(spacing-values.$grid-prose-column-count, $breakpoint)};
+  --grid-total-width: #{spacing-values.grid-total-width-absolute($breakpoint)};
+}
diff --git a/scss/custom-properties/spacing/initial.scss b/scss/custom-properties/spacing/initial.scss
new file mode 100644
index 0000000..a38388f
--- /dev/null
+++ b/scss/custom-properties/spacing/initial.scss
@@ -0,0 +1,14 @@
+@use 'sass:map';
+
+@use '../../values/spacing' as spacing-values;
+@use 'mixins';
+
+:root {
+  @include mixins.spacing();
+  @include mixins.grid();
+
+  --width-prose: calc(
+    var(--grid-column-width) * var(--grid-prose-column-count) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
+  );
+}
diff --git a/scss/custom-properties/spacing/lg.scss b/scss/custom-properties/spacing/lg.scss
new file mode 100644
index 0000000..1e9b090
--- /dev/null
+++ b/scss/custom-properties/spacing/lg.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: lg);
+}
diff --git a/scss/custom-properties/spacing/md.scss b/scss/custom-properties/spacing/md.scss
new file mode 100644
index 0000000..99b9352
--- /dev/null
+++ b/scss/custom-properties/spacing/md.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: md);
+}
diff --git a/scss/custom-properties/spacing/sm.scss b/scss/custom-properties/spacing/sm.scss
new file mode 100644
index 0000000..0fdfcfe
--- /dev/null
+++ b/scss/custom-properties/spacing/sm.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  @include mixins.spacing($breakpoint: sm);
+  @include mixins.grid($breakpoint: sm);
+}
diff --git a/scss/custom-properties/spacing/xl.scss b/scss/custom-properties/spacing/xl.scss
new file mode 100644
index 0000000..265c6e9
--- /dev/null
+++ b/scss/custom-properties/spacing/xl.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: xl);
+}
diff --git a/scss/custom-properties/spacing/xs.scss b/scss/custom-properties/spacing/xs.scss
new file mode 100644
index 0000000..13a14d6
--- /dev/null
+++ b/scss/custom-properties/spacing/xs.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  @include mixins.spacing($breakpoint: xs);
+  @include mixins.grid($breakpoint: xs);
+}
diff --git a/scss/custom-properties/spacing/xxl.scss b/scss/custom-properties/spacing/xxl.scss
new file mode 100644
index 0000000..600f74e
--- /dev/null
+++ b/scss/custom-properties/spacing/xxl.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: xxl);
+}
diff --git a/scss/custom-properties/typography/_mixins.scss b/scss/custom-properties/typography/_mixins.scss
new file mode 100644
index 0000000..a370356
--- /dev/null
+++ b/scss/custom-properties/typography/_mixins.scss
@@ -0,0 +1,12 @@
+@use '../../values/typography' as typography-values;
+
+@mixin font-sizes($breakpoint: initial) {
+  --font-size-0: #{typography-values.font-size('0', $breakpoint)};
+  --font-size-1: #{typography-values.font-size('1', $breakpoint)};
+  --font-size-2: #{typography-values.font-size('2', $breakpoint)};
+  --font-size-3: #{typography-values.font-size('3', $breakpoint)};
+  --font-size-4: #{typography-values.font-size('4', $breakpoint)};
+  --font-size-5: #{typography-values.font-size('5', $breakpoint)};
+  --font-size-6: #{typography-values.font-size('6', $breakpoint)};
+}
+
diff --git a/scss/custom-properties/typography/initial.scss b/scss/custom-properties/typography/initial.scss
new file mode 100644
index 0000000..c9d95da
--- /dev/null
+++ b/scss/custom-properties/typography/initial.scss
@@ -0,0 +1,41 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes();
+  --border-width: #{typography-values.border-width()};
+
+  --font-serif:
+    Alegreya,
+    -apple-system-ui-serif,
+    Iowan Old Style,
+    Apple Garamond,
+    Baskerville,
+    Sitka, "Sitka Display", "Sitka Heading", "Sitka Text",
+    Times New Roman,
+    Droid Serif,
+    Times,
+    Source Serif Pro,
+    serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol;
+
+  --font-sans-serif:
+    'Alegreya Sans',
+    Lato,
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
+}
diff --git a/scss/custom-properties/typography/lg.scss b/scss/custom-properties/typography/lg.scss
new file mode 100644
index 0000000..30a3019
--- /dev/null
+++ b/scss/custom-properties/typography/lg.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(lg);
+  --border-width: #{typography-values.border-width(lg)};
+}
+
diff --git a/scss/custom-properties/typography/md.scss b/scss/custom-properties/typography/md.scss
new file mode 100644
index 0000000..df49bdd
--- /dev/null
+++ b/scss/custom-properties/typography/md.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(md);
+  --border-width: #{typography-values.border-width(md)};
+}
+
diff --git a/scss/custom-properties/typography/sm.scss b/scss/custom-properties/typography/sm.scss
new file mode 100644
index 0000000..e1c3585
--- /dev/null
+++ b/scss/custom-properties/typography/sm.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(sm);
+  --border-width: #{typography-values.border-width(sm)};
+}
+
diff --git a/scss/custom-properties/typography/xl.scss b/scss/custom-properties/typography/xl.scss
new file mode 100644
index 0000000..0ddba99
--- /dev/null
+++ b/scss/custom-properties/typography/xl.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(xl);
+  --border-width: #{typography-values.border-width(xl)};
+}
+
diff --git a/scss/custom-properties/typography/xs.scss b/scss/custom-properties/typography/xs.scss
new file mode 100644
index 0000000..44d8bbb
--- /dev/null
+++ b/scss/custom-properties/typography/xs.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(xs);
+  --border-width: #{typography-values.border-width(xs)};
+}
+
diff --git a/scss/custom-properties/typography/xxl.scss b/scss/custom-properties/typography/xxl.scss
new file mode 100644
index 0000000..1a777dc
--- /dev/null
+++ b/scss/custom-properties/typography/xxl.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(xxl);
+  --border-width: #{typography-values.border-width(xxl)};
+}
+