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/modules/nav.scss | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

(limited to 'scss/modules/nav.scss')

diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss
index 765c44f..f2f32a9 100644
--- a/scss/modules/nav.scss
+++ b/scss/modules/nav.scss
@@ -28,9 +28,10 @@
   font-family: var(--font-serif);
   font-size: var(--font-size-5);
   font-weight: 700;
+  line-height: 1.15;
 
   /* This gradient is based on                  *
-   * --color-primary-60 -> --color-secondary-60 *
+   * colours.$primary-60 -> colours.$secondary-60 *
    * using Josh W Comeau's gradient generator   */
   width: fit-content;
   background-image: linear-gradient(
@@ -53,7 +54,7 @@
 
   a {
     text-decoration: none;
-    border: var(--relative-eighth-rem) dotted transparent;
+    border: var(--border-width) dotted transparent;
     transition: border-color 100ms;
 
     &:is(:focus, :focus-visible, :focus-within) {
@@ -66,14 +67,9 @@
 }
 
 .nav__breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-
   li {
-    min-width: max-content;
-    &::before {
-      content: '/'
-    }
+    list-style: '▸';
+    list-style-position: inside;
   }
 }
 
-- 
cgit v1.2.3