From 0b2fbe3f5b9e2fcf0da2b320af504d5cca759045 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>
Date: Fri, 19 Jan 2024 07:32:30 +0000
Subject: 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
---
 scss/custom-properties/typography/_mixins.scss | 12 ++++++++
 scss/custom-properties/typography/initial.scss | 41 ++++++++++++++++++++++++++
 scss/custom-properties/typography/lg.scss      |  9 ++++++
 scss/custom-properties/typography/md.scss      |  9 ++++++
 scss/custom-properties/typography/sm.scss      |  9 ++++++
 scss/custom-properties/typography/xl.scss      |  9 ++++++
 scss/custom-properties/typography/xs.scss      |  9 ++++++
 scss/custom-properties/typography/xxl.scss     |  9 ++++++
 8 files changed, 107 insertions(+)
 create mode 100644 scss/custom-properties/typography/_mixins.scss
 create mode 100644 scss/custom-properties/typography/initial.scss
 create mode 100644 scss/custom-properties/typography/lg.scss
 create mode 100644 scss/custom-properties/typography/md.scss
 create mode 100644 scss/custom-properties/typography/sm.scss
 create mode 100644 scss/custom-properties/typography/xl.scss
 create mode 100644 scss/custom-properties/typography/xs.scss
 create mode 100644 scss/custom-properties/typography/xxl.scss

(limited to 'scss/custom-properties/typography')

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)};
+}
+
-- 
cgit v1.2.3


From 0cb6960f0c65c0d791ccdee2f5bc2e2b910cfb76 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>
Date: Fri, 19 Jan 2024 09:16:42 +0000
Subject: Uses SCSS partials (#64)

---
 scss/custom-properties/typography/_initial.scss | 41 +++++++++++++++++++++++++
 scss/custom-properties/typography/_lg.scss      |  9 ++++++
 scss/custom-properties/typography/_md.scss      |  9 ++++++
 scss/custom-properties/typography/_sm.scss      |  9 ++++++
 scss/custom-properties/typography/_xl.scss      |  9 ++++++
 scss/custom-properties/typography/_xs.scss      |  9 ++++++
 scss/custom-properties/typography/_xxl.scss     |  9 ++++++
 scss/custom-properties/typography/initial.scss  | 41 -------------------------
 scss/custom-properties/typography/lg.scss       |  9 ------
 scss/custom-properties/typography/md.scss       |  9 ------
 scss/custom-properties/typography/sm.scss       |  9 ------
 scss/custom-properties/typography/xl.scss       |  9 ------
 scss/custom-properties/typography/xs.scss       |  9 ------
 scss/custom-properties/typography/xxl.scss      |  9 ------
 14 files changed, 95 insertions(+), 95 deletions(-)
 create mode 100644 scss/custom-properties/typography/_initial.scss
 create mode 100644 scss/custom-properties/typography/_lg.scss
 create mode 100644 scss/custom-properties/typography/_md.scss
 create mode 100644 scss/custom-properties/typography/_sm.scss
 create mode 100644 scss/custom-properties/typography/_xl.scss
 create mode 100644 scss/custom-properties/typography/_xs.scss
 create mode 100644 scss/custom-properties/typography/_xxl.scss
 delete mode 100644 scss/custom-properties/typography/initial.scss
 delete mode 100644 scss/custom-properties/typography/lg.scss
 delete mode 100644 scss/custom-properties/typography/md.scss
 delete mode 100644 scss/custom-properties/typography/sm.scss
 delete mode 100644 scss/custom-properties/typography/xl.scss
 delete mode 100644 scss/custom-properties/typography/xs.scss
 delete mode 100644 scss/custom-properties/typography/xxl.scss

(limited to 'scss/custom-properties/typography')

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)};
+}
+
diff --git a/scss/custom-properties/typography/initial.scss b/scss/custom-properties/typography/initial.scss
deleted file mode 100644
index c9d95da..0000000
--- a/scss/custom-properties/typography/initial.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@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
deleted file mode 100644
index 30a3019..0000000
--- a/scss/custom-properties/typography/lg.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@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
deleted file mode 100644
index df49bdd..0000000
--- a/scss/custom-properties/typography/md.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@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
deleted file mode 100644
index e1c3585..0000000
--- a/scss/custom-properties/typography/sm.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@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
deleted file mode 100644
index 0ddba99..0000000
--- a/scss/custom-properties/typography/xl.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@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
deleted file mode 100644
index 44d8bbb..0000000
--- a/scss/custom-properties/typography/xs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@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
deleted file mode 100644
index 1a777dc..0000000
--- a/scss/custom-properties/typography/xxl.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use 'mixins';
-
-@use '../../values/typography' as typography-values;
-
-:root {
-  @include mixins.font-sizes(xxl);
-  --border-width: #{typography-values.border-width(xxl)};
-}
-
-- 
cgit v1.2.3