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

7 files changed, 249 insertions, 0 deletions

diff --git a/scss/values/_colours.scss b/scss/values/_colours.scss
new file mode 100644
index 0000000..40db6e8
--- /dev/null
+++ b/scss/values/_colours.scss
@@ -0,0 +1,34 @@
+$primary-0: #000000;
+$primary-10: #190064;
+$primary-20: #2d009d;
+$primary-25: #381aa8;
+$primary-30: #442bb3;
+$primary-35: #503abf;
+$primary-40: #5c48cc;
+$primary-50: #7663e7;
+$primary-60: #907eff;
+$primary-70: #ac9fff;
+$primary-80: #c8bfff;
+$primary-90: #e5deff;
+$primary-95: #f4eeff;
+$primary-98: #fdf8ff;
+$primary-99: #fffbff;
+$primary-100: #ffffff;
+
+$secondary-0: #000000;
+$secondary-10: #00201e;
+$secondary-20: #003733;
+$secondary-25: #00433f;
+$secondary-30: #00504b;
+$secondary-35: #005d57;
+$secondary-40: #006a64;
+$secondary-50: #00867e;
+$secondary-60: #00a299;
+$secondary-70: #26bfb4;
+$secondary-80: #50dbcf;
+$secondary-90: #71f7ec;
+$secondary-95: #b2fff6;
+$secondary-98: #e4fffb;
+$secondary-99: #f2fffc;
+$secondary-100: #ffffff;
+
diff --git a/scss/values/spacing/_constants.scss b/scss/values/spacing/_constants.scss
new file mode 100644
index 0000000..9a990b8
--- /dev/null
+++ b/scss/values/spacing/_constants.scss
@@ -0,0 +1,58 @@
+$grid-column-width-er: 32;
+$grid-gutter-width-er: 4;
+
+$grid-padding-er: (
+  'xxl': 32,
+  'xl': 26,
+  'lg': 20,
+  'md': 16,
+  'sm': 12,
+  'xs': 4,
+  'initial': 1
+);
+
+$grid-column-count: (
+  'xxl': 12,
+  'xl': 12,
+  'lg': 12,
+  'md': 8,
+  'sm': 8,
+  'xs': 4,
+  'initial': 1
+);
+
+$grid-prose-column-count: (
+  'xxl': 8,
+  'xl': 8,
+  'lg': 8,
+  'md': 8,
+  'sm': 8,
+  'xs': 4,
+  'initial': 1
+);
+
+$grid-padding-er: (
+  'xxl': 32,
+  'xl': 26,
+  'lg': 20,
+  'md': 16,
+  'sm': 12,
+  'xs': 4,
+  'initial': 1
+);
+
+$spacing-factor: (
+  'inline': (lg: 4, md: 2, sm: 1),
+  'block': (lg: 16, md: 10, sm: 5)
+);
+
+$grid-min-total-width-absolute: (
+  'xxl': 100rem,
+  'xl': 80rem,
+  'lg': 64rem,
+  'md': 48rem,
+  'sm': 30rem,
+  'xs': 100vw,
+  'initial': 100vw
+);
+
diff --git a/scss/values/spacing/_grid.scss b/scss/values/spacing/_grid.scss
new file mode 100644
index 0000000..50d11c9
--- /dev/null
+++ b/scss/values/spacing/_grid.scss
@@ -0,0 +1,63 @@
+@use 'sass:list';
+@use 'sass:map';
+
+@use 'constants';
+
+@function padding($breakpoint: initial) {
+  @return er-to-absolute(map.get(constants.$grid-padding-er, $breakpoint), $breakpoint);
+}
+
+@function column-width($breakpoint: initial) {
+  @return er-to-absolute(constants.$grid-column-width-er, $breakpoint);
+}
+
+@function gutter-width($breakpoint: initial) {
+  @return er-to-absolute(constants.$grid-gutter-width-er, $breakpoint);
+}
+
+@function column-count($breakpoint: initial) {
+  @return map.get(constants.$grid-column-count, $breakpoint);
+}
+
+@function total-width-er($breakpoint) {
+  $padding-width: calc(2 * map.get(constants.$grid-padding-er, $breakpoint));
+  $column-count: map.get(constants.$grid-column-count, $breakpoint);
+  $columns-width: calc($column-count * constants.$grid-column-width-er);
+  $gutters-width: calc(($column-count - 1) * constants.$grid-gutter-width-er);
+  @return $padding-width + $columns-width + $gutters-width;
+}
+
+@function total-width-absolute($breakpoint: initial) {
+  /**
+    * In theory, the grid total width should be clamped between the min at this
+    * breakpoint and the min at the next breakpoint minus grid padding. In
+    * practice, the only time this makes a difference is at xs, so at every
+    * other breakpoint, we'll just return the min at the current breakpoint.
+    */
+
+  @if $breakpoint == xs {
+    $min-width-xs: map.get(constants.$grid-min-total-width-absolute, xs);
+    $min-width-sm: map.get(constants.$grid-min-total-width-absolute, sm);
+    $padding-sm: calc(2 * padding(sm));
+    @return min($min-width-xs, calc($min-width-sm - $padding-sm));
+  }
+
+  @return map.get(constants.$grid-min-total-width-absolute, $breakpoint);
+}
+
+/**
+  * Converts er units to absolute units.
+  *
+  * This doesn't really belong here, but I think it has to, because it depends
+  * on grid-total-width-absolute which depends on grid-padding which depends on
+  * this. It's fine here, it's just a recursion. But if it lived in a separate
+  * module you'd end up with a circular dependency.
+  */
+@function er-to-absolute($length-er, $breakpoint: initial) {
+  $absolute-per-er: calc(
+    total-width-absolute($breakpoint)
+    / total-width-er($breakpoint)
+  );
+  @return calc($length-er * $absolute-per-er);
+}
+
diff --git a/scss/values/spacing/_index.scss b/scss/values/spacing/_index.scss
new file mode 100644
index 0000000..8f8a454
--- /dev/null
+++ b/scss/values/spacing/_index.scss
@@ -0,0 +1,24 @@
+/**
+  * 'er' (from 'eighth-rem') is a conceptual unit of length. It is determined
+  * by the total width of the grid, the relative eighth rem length of the grid
+  * padding, and the number of columns in the grid. This means you can just
+  * specify those values for each breakpoint, and the rest of the nitty-gritty
+  * griddy details happens by SCSS magic.
+  */
+
+/**
+  * Breakpoints can be:
+  *   - initial
+  *   - xs
+  *   - sm
+  *   - md
+  *   - lg
+  *   - xl
+  *   - xxl
+  */
+
+@forward 'constants' show $grid-column-count, $grid-prose-column-count;
+@forward 'grid' as grid-* hide er-to-absolute;
+@forward 'grid' show er-to-absolute;
+@forward 'spacing';
+
diff --git a/scss/values/spacing/_spacing.scss b/scss/values/spacing/_spacing.scss
new file mode 100644
index 0000000..4fd94e8
--- /dev/null
+++ b/scss/values/spacing/_spacing.scss
@@ -0,0 +1,32 @@
+@use 'sass:list';
+@use 'sass:map';
+
+@use 'constants';
+@use 'grid';
+
+/**
+  * - size: sm, md, lg
+  * - direction: inline, block
+  */
+@function spacing($direction, $size, $breakpoint: initial) {
+  $factor: map.get(
+    map.get(constants.$spacing-factor, $direction),
+    $size
+  );
+
+  @if list.index([xxl xl lg md sm], ($breakpoint)) {
+    @return grid.er-to-absolute($factor, $breakpoint);
+  }
+  @else if $breakpoint == xs {
+    @return clamp(
+      spacing($direction, $size, initial),
+      grid.er-to-absolute($factor, xs),
+      spacing($direction, $size, sm)
+    );
+  }
+  @else if $breakpoint == initial {
+    @return calc($factor * 0.0625rem);
+  }
+  @error "Invalid breakpoint: #{$breakpoint}";
+}
+
diff --git a/scss/values/typography/_constants.scss b/scss/values/typography/_constants.scss
new file mode 100644
index 0000000..4ea0117
--- /dev/null
+++ b/scss/values/typography/_constants.scss
@@ -0,0 +1,20 @@
+$base-font-size: (
+  'xxl': 1.5rem,
+  'xl': 1.2rem,
+  'lg': 1.1rem,
+  'md': 1rem,
+  'sm': 0.9rem,
+  'xs': 0.8rem,
+  'initial': 0.7rem,
+);
+
+$font-size-factor: (
+  '0': 1,
+  '1': 1.25,
+  '2': 1.5,
+  '3': 2,
+  '4': 2.5,
+  '5': 3,
+  '6': 3.5
+);
+
diff --git a/scss/values/typography/_index.scss b/scss/values/typography/_index.scss
new file mode 100644
index 0000000..3aa4384
--- /dev/null
+++ b/scss/values/typography/_index.scss
@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+@use 'constants';
+
+@function font-size($font-size-grade, $breakpoint: initial) {
+  @return calc(
+    map.get(constants.$base-font-size, $breakpoint)
+    * map.get(constants.$font-size-factor, $font-size-grade)
+  );
+}
+
+@function border-width($breakpoint: initial) {
+  @return calc(
+    map.get(constants.$base-font-size, $breakpoint)
+    / 8
+  );
+}
+