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

4 files changed, 11 insertions, 15 deletions

diff --git a/src/components/CommitteeList/CommitteeListItem.astro b/src/components/CommitteeList/CommitteeListItem.astro
index 9a5a55b..542d11f 100644
--- a/src/components/CommitteeList/CommitteeListItem.astro
+++ b/src/components/CommitteeList/CommitteeListItem.astro
@@ -43,8 +43,7 @@ const t = translate(locale);
       {committeeMember.name}
       {
         committeeMember.roles.length > 0 && (
-          <span class="font-weight-lighter">
-            |{' '}
+          <span class="committee__member__role">
             {committeeMember.roles.map((role) => t(tRole, { key: CommitteeRole[role] })).join(', ')}
           </span>
         )
diff --git a/src/i18n/translations/pages/home.ts b/src/i18n/translations/pages/home.ts
index 3a81710..b577a46 100644
--- a/src/i18n/translations/pages/home.ts
+++ b/src/i18n/translations/pages/home.ts
@@ -6,8 +6,8 @@ const tPage = {
     'en-GB': () => 'Home',
   },
   submit: {
-    sco: () => 'Sangschaw apen for submeissions',
-    'en-GB': () => 'Sangschaw open for submissions',
+    sco: () => 'Sang\u00adschaw apen for submeissions',
+    'en-GB': () => 'Sang\u00adschaw open for submissions',
   },
   'submit-para-1': {
     sco: () => `
@@ -97,13 +97,9 @@ const tPage = {
     sco: () => 'Meet the Commattee',
     'en-GB': () => 'Meet the Committee',
   },
-  'mair-commattee-details-soon': {
-    sco: () => 'Mair details comin shuin!',
-    'en-GB': () => 'More details coming soon!',
-  },
   furthsettins: {
-    sco: () => 'Furthsettins',
-    'en-GB': () => 'Publications',
+    sco: () => 'Furth\u00adsettins',
+    'en-GB': () => 'Public\u00adations',
   },
   'furthsettins-para': {
     sco: () => `
diff --git a/src/i18n/translations/site.ts b/src/i18n/translations/site.ts
index 59a8cd4..51e4183 100644
--- a/src/i18n/translations/site.ts
+++ b/src/i18n/translations/site.ts
@@ -5,8 +5,9 @@ import type { TranslationsDictionary } from '$types/TranslationsDictionary';
 
 const tSite = {
   title: {
-    sco: () => 'Scots Leid Associe',
-    'en-GB': () => 'Scots Language Society',
+    // On very narrow screens, use \u00ad to suggest hyphenation points
+    sco: () => 'Scots Leid Assoc\u00adie',
+    'en-GB': () => 'Scots Lang\u00aduage Soc\u00adiety',
   },
   description: {
     sco: () => 'The wabsteid o the Scots Leid Associe',
@@ -21,8 +22,9 @@ const tSite = {
     'en-GB': () => 'Scotsoun',
   },
   'scots-leid-associe': {
-    sco: () => 'Scots Leid Associe',
-    'en-GB': () => 'Scots Language Society',
+    // On very narrow screens, use \u00ad to suggest hyphenation points
+    sco: () => 'Scots Leid Assoc\u00adie',
+    'en-GB': () => 'Scots Lang\u00aduage Soc\u00adiety',
   },
   by: {
     sco: () => 'bi',
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index b08f412..e8b9cf0 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -44,7 +44,6 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     <p set:html={t(tPage, { key: 'about-us-para-2' })} />
     <p set:html={t(tPage, { key: 'about-us-para-3' })} />
     <h3 set:html={t(tPage, { key: 'meet-the-commattee' })} />
-    <p class="italic">{t(tPage, { key: 'mair-commattee-details-soon' })}</p>
     <CommitteeList />
   </section>