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

8 files changed, 107 insertions, 0 deletions

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