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

1 files changed, 32 insertions, 0 deletions

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