Merge branch 'deployment-staging' into 34-add-disabled-button-variant34-add-disabled-button-variant

7 files changed, 230 insertions, 34 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 efa9cdc..d6e5deb 100644
--- a/scss/custom-properties/_colours.scss
+++ b/scss/custom-properties/_colours.scss
@@ -1,16 +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};
-  --neutral-text-color: #{colours.$neutral-50};
-  --neutral-background-color: #{colours.$neutral-30};
-}
-
 :is(main, article) {
   --text-color: #{colours.$primary-10};
   --text-highlight-color: #{colours.$primary-90};
@@ -22,6 +11,17 @@
   --neutral-background-color: #{colours.$neutral-95};
 }
 
-: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};
+  --neutral-text-color: #{colours.$neutral-50};
+  --neutral-background-color: #{colours.$neutral-30};
+}
+
+: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/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>