Updates from staging (#79)

* Adds no-breadcrumbs variant of the navbar (#75)

* README: replaces 'Sycamost' with 'joeacarstairs' (#74)

* Design system board (#77)

* Simplifies theme selector syntax

* Adds .dark theming class

* Adds design system page (dev env only)

* Closes the Sangschaw (#78)

* Closes the Sangschaw

* Fixes syntax

---------

Co-authored-by: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>

---------

Co-authored-by: Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com>
Co-authored-by: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>

9 files changed, 243 insertions, 44 deletions

diff --git a/README.md b/README.md
index f24a853..9bafcf5 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ This is the Scots Leid Associe website, implemented in [Astro](https://astro.bui
 ## Gettin yokit
 
 ```bash
-git clone https://github.com/Sycamost/lallans-wabsteid-astro.git \
+git clone https://github.com/joeacarstairs/lallans-wabsteid-astro.git \
   && cd lallans-wabsteid-astro \
   && npm install \
   && npm run dev
@@ -35,14 +35,14 @@ git clone https://github.com/Sycamost/lallans-wabsteid-astro.git \
 2. Make a suitably named branch on your fork.
 3. Make your desired changes (see sections below for common cases).
 4. Commit and push them on your branch.
-5. Make a Pull Request to merge your changes into `Sycamost/deployment-staging`.
+5. Make a Pull Request to merge your changes into `joeacarstairs/deployment-staging`.
 6. A code owner (probably the Scots Language Society Webmaster) will review your Pull Request, ask
-   for any necessary changes, and when satisfied, merge it into `Sycamost/deployment-staging`. (This will
-   update the [staging deployment](#cicd) on
+   for any necessary changes, and when satisfied, merge it into `joeacarstairs/deployment-staging`.
+   (This will update the [staging deployment](#cicd) on
    [staging.scotsleidassocie.org](https://staging.scotsleidassocie.org).)
-7. Code owners will merge `Sycamost/deployment-staging` into `Sycamost/deployment-production` at their discretion.
-   (This will update the production deployment on
-   [scotsleidassocie.org](https://scotsleidassocie.org).)
+7. Code owners will merge `joeacarstairs/deployment-staging` into
+   `joeacarstairs/deployment-production` at their discretion. (This will update the production
+   deployment on [scotsleidassocie.org](https://scotsleidassocie.org).)
 
 ### Coding style
 
@@ -148,6 +148,6 @@ To update production, you'll want to first merge your changes into `deployment-s
 Pull Request and getting it approved and merged. Once you've done that, given it five minutes to
 deploy, and you've checked that everything looks good on
 [staging.scotsleidassocie.org](https://staging.scotsleidassocie.org),
-[make a Pull Request to merge deployment-staging into deployment-production](https://github.com/Sycamost/lallans-wabsteid-astro/compare/deployment-production...deployment-staging).
+[make a Pull Request to merge deployment-staging into deployment-production](https://github.com/joeacarstairs/lallans-wabsteid-astro/compare/deployment-production...deployment-staging).
 Once that Pull Request is approved by a code owner, merge it in and it should update production in
 under five minutes.
diff --git a/scss/base/_theme.scss b/scss/base/_theme.scss
index f5d178c..c97c788 100644
--- a/scss/base/_theme.scss
+++ b/scss/base/_theme.scss
@@ -1,13 +1,11 @@
-:root {
+:is(
+  :root,
+  .dark,
+  main,
+  article,
+  :is(main, article) > section:not(:is(section, header) :is(section, header))
+) {
   color: var(--text-color);
   background-color: var(--background-color);
 }
 
-:is(main, article) {
-  color: var(--text-color);
-  background-color: var(--background-color);
-}
-
-:is(main, article) > section:not(:is(section, header) :is(section, header)) {
-  background-color: var(--background-color);
-}
\ No newline at end of file
diff --git a/scss/custom-properties/_colours.scss b/scss/custom-properties/_colours.scss
index dadb50e..138a724 100644
--- a/scss/custom-properties/_colours.scss
+++ b/scss/custom-properties/_colours.scss
@@ -1,14 +1,5 @@
 @use '../values/colours' as colours;
 
-:root {
-  --text-color: #{colours.$primary-98};
-  --text-highlight-color: #{colours.$primary-10};
-  --background-color: #{colours.$primary-10};
-  --background-highlight-color: #{colours.$primary-90};
-  --special-text-color: #{colours.$secondary-90};
-  --special-text-highlight-color: #{colours.$secondary-10};
-}
-
 :is(main, article) {
   --text-color: #{colours.$primary-10};
   --text-highlight-color: #{colours.$primary-90};
@@ -18,6 +9,15 @@
   --special-text-highlight-color: #{colours.$secondary-90};
 }
 
-:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
+:root, .dark {
+  --text-color: #{colours.$primary-98};
+  --text-highlight-color: #{colours.$primary-10};
+  --background-color: #{colours.$primary-10};
+  --background-highlight-color: #{colours.$primary-90};
+  --special-text-color: #{colours.$secondary-90};
+  --special-text-highlight-color: #{colours.$secondary-10};
+}
+
+:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)):not(.dark *) {
     --background-color: #{colours.$primary-95};
 }
diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro
index 4fa05a9..0722f01 100644
--- a/src/components/Navbar/Navbar.astro
+++ b/src/components/Navbar/Navbar.astro
@@ -3,13 +3,19 @@ import Breadcrumbs from './Breadcrumbs.astro';
 import SwitchLanguageLink from '../SwitchLanguageLink.astro';
 import NavLinks from './NavLinks.astro';
 import Logo from './Logo.astro';
+
+interface Props {
+  noBreadcrumbs?: boolean;
+}
+
+const { noBreadcrumbs } = Astro.props;
 ---
 
 <nav class="nav">
   <Logo />
   <NavLinks />
   <div class="nav__bottom-row">
-    <Breadcrumbs />
+    {!noBreadcrumbs && <Breadcrumbs />}
     <SwitchLanguageLink />
   </div>
 </nav>
diff --git a/src/i18n/translations/pages/home.ts b/src/i18n/translations/pages/home.ts
index 6628682..a3bafe9 100644
--- a/src/i18n/translations/pages/home.ts
+++ b/src/i18n/translations/pages/home.ts
@@ -6,30 +6,24 @@ const tPage = {
     'en-GB': () => 'Home',
   },
   submit: {
-    sco: () => 'Sang\u00adschaw apen for submeissions',
-    'en-GB': () => 'Sang\u00adschaw open for submissions',
+    sco: () => 'Lallans 104 apen for sub\u00admeissions',
+    'en-GB': () => 'Lallans 104 open for sub\u00admissions',
   },
   'submit-para-1': {
     sco: () => `
-      We ar acceptin submeissions til our annual Scots scrievin competeition,
-      the Sangschaw, until the 31st o Januar 2024.
+      We ar acceptin submeissions til Lallans 104.
     `,
     'en-GB': () => `
-      We are accepting submissions to our annual Scots writing competition, the
-      Sangschaw, until the 31st of January 2024.
+      We are accepting submissions to Lallans 104.
     `,
   },
   'submit-para-2': {
     sco: () => `
-      Aince ye’ve read the submeission criteria in
-      <a href="/sco/news/2023-12-10-eiks-31"><i>Eiks an Ens</i> 31</a>, send
-      your submeissions til
+      Send us your cuttie tales, poesie and drama til
       <a href="mailto:lallans@hotmail.co.uk">lallans@hotmail.co.uk</a>.
     `,
     'en-GB': () => `
-      Once you’ve read the submission criteria in
-      <a href="/en-GB/news/2023-12-10-eiks-31"><i>Eiks an Ens</i> 31</a>, send
-      your submissions to
+      Send us your short stories, poetry and drama to
       <a href="mailto:lallans@hotmail.co.uk">lallans@hotmail.co.uk</a>.
     `,
   },
@@ -43,6 +37,14 @@ const tPage = {
       submitting for years or you’re a first-time writer!
     `,
   },
+  'sangschaw-closed': {
+    sco: () => `
+      This year’s Sangschaw competeition closed on the 31st o Januar 2024.
+    `,
+    'en-GB': () => `
+      This year’s Sangschaw competition closed on the 31st of January 2024.
+    `,
+  },
   news: {
     sco: () => 'Recent News',
     'en-GB': () => 'Recent News',
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a5315be..938bfe5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,9 +10,10 @@ import type Locale from '$types/Locale';
 
 interface Props {
   title: string;
+  noBreadcrumbs?: boolean;
 }
 
-const { title } = Astro.props;
+const { noBreadcrumbs, title } = Astro.props;
 const locale = getLocaleFromPathOrDefault(Astro.url.pathname);
 const t = translate(locale);
 
@@ -55,7 +56,7 @@ function qualifiedLocalisedPath(newLocale: Locale) {
   </head>
   <body id="top">
     <a class="btn skip-to-content" href="#main">Skip to content</a>
-    <Navbar />
+    <Navbar noBreadcrumbs={noBreadcrumbs} />
     <slot />
     <Footer />
   </body>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index bc7a095..da75514 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -2,13 +2,14 @@
 import Layout from './Layout.astro';
 
 interface Props {
+  noBreadcrumbs?: boolean;
   title: string;
 }
 
-const { title } = Astro.props;
+const { noBreadcrumbs, title } = Astro.props;
 ---
 
-<Layout title={title}>
+<Layout noBreadcrumbs={noBreadcrumbs} title={title}>
   <main id="main">
     <slot />
   </main>
diff --git a/src/pages/[designSystem].astro b/src/pages/[designSystem].astro
new file mode 100644
index 0000000..4ab93f8
--- /dev/null
+++ b/src/pages/[designSystem].astro
@@ -0,0 +1,190 @@
+---
+import Page from '$layouts/Page.astro';
+import env from '$lib/env';
+
+export async function getStaticPaths() {
+  switch (env.ENVIRONMENT) {
+    case 'dev':
+      return [{ params: { designSystem: 'design-system' } }];
+    case 'prod':
+      return [];
+  }
+}
+---
+
+<Page title="Design system">
+  <section>
+    <h1>Heading level 1</h1>
+    <h2>Heading level 2</h2>
+    <h3>Heading level 3</h3>
+    <h4>Heading level 4</h4>
+    <h3>Heading level 3</h3>
+    <h4>Heading level 4</h4>
+    <h2>Heading level 2</h2>
+    <h3>Heading level 3</h3>
+    <h2>Heading level 2</h2>
+  </section>
+
+  <section>
+    <h1>Heading level 1</h1>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+    <p>
+      Est numquam sint consequatur culpa quo dolores. Aut eum aut non et est blanditiis tempore.
+      Enim voluptate accusamus id veniam.
+    </p>
+
+    <h2>Heading level 2</h2>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+
+    <h3>Heading level 3</h3>
+    <p>
+      Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi
+      tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum
+      est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore.
+    </p>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+
+    <h4>Heading level 4</h4>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+
+    <h3>Heading level 3</h3>
+    <p>
+      Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi
+      tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum
+      est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore.
+    </p>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+
+    <h4>Heading level 4</h4>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+
+    <h2>Heading level 2</h2>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+
+    <h3>Heading level 3</h3>
+    <p>
+      Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi
+      tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum
+      est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore.
+    </p>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+
+    <h2>Heading level 2</h2>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+  </section>
+
+  <section>
+    <h2>Lists</h2>
+
+    <h3>Unordered list</h3>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>
+        Item 3
+        <ul>
+          <li>Item 3.1</li>
+          <li>Item 3.2</li>
+          <li>Item 3.3</li>
+        </ul>
+      </li>
+      <li>Item 4</li>
+    </ul>
+
+    <h3>Ordered list</h3>
+    <ol>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>
+        Item 3
+        <ol>
+          <li>Item 3.1</li>
+          <li>Item 3.2</li>
+          <li>Item 3.3</li>
+        </ol>
+      </li>
+      <li>Item 4</li>
+    </ol>
+  </section>
+
+  <section>
+    <h2>Buttons</h2>
+
+    <section>
+      <h3>Light mode</h3>
+      <button type="button">Button</button>
+      <button type="submit">Submit</button>
+      <button type="button" disabled>Disabled button</button>
+      <button type="submit" disabled>Disabled submit</button>
+    </section>
+
+    <section class="dark">
+      <h3>Dark mode</h3>
+      <button type="button">Button</button>
+      <button type="submit">Submit</button>
+      <button type="button" disabled>Disabled button</button>
+      <button type="submit" disabled>Disabled submit</button>
+    </section>
+  </section>
+
+  <section>
+    <h2>Hyperlinks</h2>
+
+    <section>
+      <h3>Light mode</h3>
+      <a href="#">Hyperlink</a>
+    </section>
+
+    <section class="dark">
+      <h3>Dark mode</h3>
+      <a href="#">Hyperlink</a>
+    </section>
+  </section>
+</Page>
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index d930c20..4f00eff 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -25,6 +25,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     <p set:html={t(tPage, { key: 'submit-para-1' })} />
     <p set:html={t(tPage, { key: 'submit-para-2' })} />
     <p set:html={t(tPage, { key: 'submit-para-3' })} />
+    <p><small set:html={t(tPage, { key: 'sangschaw-closed' })} /></p>
   </section>
   <section>
     <h2 class="grid-span-6" set:html={t(tPage, { key: 'news' })} />