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

19 files changed, 0 insertions, 220 deletions

diff --git a/scss/variables/colours.scss b/scss/variables/colours.scss
deleted file mode 100644
index 65dd421..0000000
--- a/scss/variables/colours.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-:root {
-  --text-color: var(--color-primary-98);
-  --text-highlight-color: var(--color-primary-10);
-  --background-color: var(--color-primary-10);
-  --background-highlight-color: var(--color-primary-90);
-  --special-text-color: var(--color-secondary-90);
-  --special-text-highlight-color: var(--color-secondary-10);
-}
-
-:is(main, article) {
-  --text-color: var(--color-primary-10);
-  --text-highlight-color: var(--color-primary-90);
-  --background-color: var(--color-primary-98);
-  --background-highlight-color: var(--color-primary-10);
-  --special-text-color: var(--color-secondary-40);
-  --special-text-highlight-color: var(--color-secondary-90);
-}
-
-:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
-    --background-color: var(--color-primary-95);
-}
diff --git a/scss/variables/index.lg.scss b/scss/variables/index.lg.scss
deleted file mode 100644
index 598c04f..0000000
--- a/scss/variables/index.lg.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.lg' as *;
-
diff --git a/scss/variables/index.md.scss b/scss/variables/index.md.scss
deleted file mode 100644
index b2bf6ac..0000000
--- a/scss/variables/index.md.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@use 'spacing.md' as *;
-@use 'typography.md' as *;
-
diff --git a/scss/variables/index.scss b/scss/variables/index.scss
deleted file mode 100644
index 57403d6..0000000
--- a/scss/variables/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'colours' as *;
-@use 'palette' as *;
-@use 'spacing' as *;
-@use 'typography' as *;
-
diff --git a/scss/variables/index.sm.scss b/scss/variables/index.sm.scss
deleted file mode 100644
index 1ed077f..0000000
--- a/scss/variables/index.sm.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.sm' as *;
-
diff --git a/scss/variables/index.xl.scss b/scss/variables/index.xl.scss
deleted file mode 100644
index 6e082d1..0000000
--- a/scss/variables/index.xl.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.xl' as *;
-
diff --git a/scss/variables/index.xs.scss b/scss/variables/index.xs.scss
deleted file mode 100644
index fd7abc2..0000000
--- a/scss/variables/index.xs.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@use 'spacing.xs' as *;
-@use 'typography.xs' as *;
-
diff --git a/scss/variables/index.xxl.scss b/scss/variables/index.xxl.scss
deleted file mode 100644
index 8d40b0c..0000000
--- a/scss/variables/index.xxl.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.xxl' as *;
-
diff --git a/scss/variables/palette.scss b/scss/variables/palette.scss
deleted file mode 100644
index f40bb89..0000000
--- a/scss/variables/palette.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-:root {
-  --color-primary-0: #000000;
-  --color-primary-10: #190064;
-  --color-primary-20: #2d009d;
-  --color-primary-25: #381aa8;
-  --color-primary-30: #442bb3;
-  --color-primary-35: #503abf;
-  --color-primary-40: #5c48cc;
-  --color-primary-50: #7663e7;
-  --color-primary-60: #907eff;
-  --color-primary-70: #ac9fff;
-  --color-primary-80: #c8bfff;
-  --color-primary-90: #e5deff;
-  --color-primary-95: #f4eeff;
-  --color-primary-98: #fdf8ff;
-  --color-primary-99: #fffbff;
-  --color-primary-100: #ffffff;
-
-  --color-secondary-0: #000000;
-  --color-secondary-10: #00201e;
-  --color-secondary-20: #003733;
-  --color-secondary-25: #00433f;
-  --color-secondary-30: #00504b;
-  --color-secondary-35: #005d57;
-  --color-secondary-40: #006a64;
-  --color-secondary-50: #00867e;
-  --color-secondary-60: #00a299;
-  --color-secondary-70: #26bfb4;
-  --color-secondary-80: #50dbcf;
-  --color-secondary-90: #71f7ec;
-  --color-secondary-95: #b2fff6;
-  --color-secondary-98: #e4fffb;
-  --color-secondary-99: #f2fffc;
-  --color-secondary-100: #ffffff;
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.lg.scss b/scss/variables/spacing.lg.scss
deleted file mode 100644
index bc18bfd..0000000
--- a/scss/variables/spacing.lg.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 64rem;
-  --grid-padding-relative-eighth-rem: 20;
-  --grid-column-count: 12;
-  --grid-prose-column-count: 8;
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.md.scss b/scss/variables/spacing.md.scss
deleted file mode 100644
index 0028e8a..0000000
--- a/scss/variables/spacing.md.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 48rem;
-  --grid-padding-relative-eighth-rem: 16;
-  --grid-column-count: 8;
-  --grid-prose-column-count: 8;
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.scss b/scss/variables/spacing.scss
deleted file mode 100644
index a4d1d91..0000000
--- a/scss/variables/spacing.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-:root {
-  --margin-inline-md: calc(2 * var(--relative-eighth-rem));
-  --margin-block-lg: calc(16 * var(--relative-eighth-rem));
-  --margin-block-md: calc(10 * var(--relative-eighth-rem));
-  --margin-block-sm: calc(5 * var(--relative-eighth-rem));
-
-  --padding-inline-lg: calc(4 * var(--relative-eighth-rem));
-  --padding-inline-md: calc(2 * var(--relative-eighth-rem));
-  --padding-inline-sm: calc(1 * var(--relative-eighth-rem));
-  --padding-block-lg: calc(12 * var(--relative-eighth-rem));
-  --padding-block-md: calc(8 * var(--relative-eighth-rem));
-  --padding-block-sm: calc(5 * var(--relative-eighth-rem));
-
-  --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem));
-  --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem));
-  --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem));
-  
-  --grid-total-relative-eighth-rem-width: calc(
-    var(--grid-padding-relative-eighth-rem) * 2 +
-    var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + 
-    var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1)
-  );
-  --relative-eighth-rem: calc(
-    var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
-  );
-  --width-prose: calc(
-    var(--grid-column-width) * var(--grid-prose-column-count) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
-  );
-
-  --grid-column-width-relative-eighth-rem: 32;
-  --grid-gutter-width-relative-eighth-rem: 4;
-
-  /***********************************************************
-   * Generally, we will use columns to keep things laid out  *
-   * nicely. However, on screens narrower than xs, this gets *
-   * pretty much impossible. So for those screens, we use a  *
-   * single-column layout taking up 100vw. In effect, this   *
-   * is just default CSS layout plus a wee bit padding. From *
-   * xs widewards, we use multiple columns on a fixed width. *
-   ***********************************************************/
-
-  --grid-total-width: 100vw;
-  --grid-padding-relative-eighth-rem: 8;
-  --grid-column-count: 1;
-  --grid-prose-column-count: 1;
-}
diff --git a/scss/variables/spacing.sm.scss b/scss/variables/spacing.sm.scss
deleted file mode 100644
index 7cdf26f..0000000
--- a/scss/variables/spacing.sm.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:root {
-  --grid-total-width: 30rem;
-  --grid-padding-relative-eighth-rem: 12;
-}
diff --git a/scss/variables/spacing.xl.scss b/scss/variables/spacing.xl.scss
deleted file mode 100644
index fc8b1f3..0000000
--- a/scss/variables/spacing.xl.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-:root {
-  --grid-total-width: 80rem;
-  --grid-padding-relative-eighth-rem: 26;
-  --grid-column-count: 12;
-  --grid-prose-column-count: 8;
-  --width-prose: calc(
-    var(--grid-column-width) * min(8, var(--grid-column-count)) +
-    var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1))
-  );
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.xs.scss b/scss/variables/spacing.xs.scss
deleted file mode 100644
index fb7c01a..0000000
--- a/scss/variables/spacing.xs.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 15rem;
-  --grid-padding-relative-eighth-rem: 8;
-  --grid-column-count: 4;
-  --grid-prose-column-count: 4;
-}
diff --git a/scss/variables/spacing.xxl.scss b/scss/variables/spacing.xxl.scss
deleted file mode 100644
index 17d2f66..0000000
--- a/scss/variables/spacing.xxl.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 100rem;
-  --grid-padding-relative-eighth-rem: 32;
-  --grid-column-count: 12;
-  --grid-prose-column-count: 8;
-}
\ No newline at end of file
diff --git a/scss/variables/typography.md.scss b/scss/variables/typography.md.scss
deleted file mode 100644
index 2c36d1d..0000000
--- a/scss/variables/typography.md.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-  --font-size-0: calc(7 * var(--relative-eighth-rem));
-  --font-size-1: calc(9 * var(--relative-eighth-rem));
-  --font-size-2: calc(12 * var(--relative-eighth-rem));
-  --font-size-3: calc(16 * var(--relative-eighth-rem));
-  --font-size-4: calc(20 * var(--relative-eighth-rem));
-  --font-size-5: calc(26 * var(--relative-eighth-rem));
-  --font-size-6: calc(32 * var(--relative-eighth-rem));
-}
\ No newline at end of file
diff --git a/scss/variables/typography.scss b/scss/variables/typography.scss
deleted file mode 100644
index f8515fd..0000000
--- a/scss/variables/typography.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-:root {
-  --font-size-0: calc(8 * var(--relative-eighth-rem));
-  --font-size-1: calc(8 * var(--relative-eighth-rem));
-  --font-size-2: calc(8 * var(--relative-eighth-rem));
-  --font-size-3: calc(8 * var(--relative-eighth-rem));
-  --font-size-4: calc(8 * var(--relative-eighth-rem));
-  --font-size-5: calc(8 * var(--relative-eighth-rem));
-  --font-size-6: calc(8 * var(--relative-eighth-rem));
-
-  --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
-}
\ No newline at end of file
diff --git a/scss/variables/typography.xs.scss b/scss/variables/typography.xs.scss
deleted file mode 100644
index 6375aad..0000000
--- a/scss/variables/typography.xs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-  --font-size-0: calc(6 * var(--relative-eighth-rem));
-  --font-size-1: calc(8 * var(--relative-eighth-rem));
-  --font-size-2: calc(11 * var(--relative-eighth-rem));
-  --font-size-3: calc(14 * var(--relative-eighth-rem));
-  --font-size-4: calc(18 * var(--relative-eighth-rem));
-  --font-size-5: calc(23 * var(--relative-eighth-rem));
-  --font-size-6: calc(28 * var(--relative-eighth-rem));
-}
\ No newline at end of file