Text color and background colour is controlled by CSS vars

5 files changed, 82 insertions, 23 deletions

diff --git a/public/main.css b/public/main.css
index 5271c55..6d9b8c9 100644
--- a/public/main.css
+++ b/public/main.css
@@ -10,6 +10,11 @@
   --color-primary-800: #442c44;
   --color-primary-900: #251d25;
 
+  --text-color: var(--color-primary-900);
+  --text-highlight-color: var(--color-primary-800);
+  --background-color: var(--color-primary-50);
+  --background-highlight-color: var(--color-primary-200);
+
   --max-width-prose-content: 35rem;
 
   --breakpoint-sm: 640px;
@@ -32,8 +37,15 @@
   font-family: 'Alegreya Sans', Lato, Calibri, 'sans-serif';
   font-size: var(--base-font-size-min);
   font-weight: 300;
-  color: var(--color-primary-50);
-  background-color: var(--color-primary-900);
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.dark {
+  --text-color: var(--color-primary-50);
+  --text-highlight-color: var(--color-primary-100);
+  --background-color: var(--color-primary-900);
+  --background-highlight-color: var(--color-primary-800);
 }
 
 @media screen and (min-width: var(--breakpoint-sm)) {
@@ -47,8 +59,6 @@
 }
 
 :is(main, article) {
-  background-color: var(--color-primary-50);
-  color: var(--color-primary-900);
   container-name: main;
   container-type: inline-size;
 }
@@ -65,7 +75,7 @@
 }
 
 :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
-  background-color: var(--color-primary-100);
+  --background-color: var(--color-primary-100);
 }
 
 .title,
@@ -122,9 +132,13 @@ p:not(:first) {
   padding-block-start: var(--spacing-block-md);
 }
 
+a {
+  color: var(--text-color);
+}
+
 .link {
   text-decoration: underline;
-  text-decoration-color: var(--color-primary-900);
+  text-decoration-color: var(--text-color);
   border: dotted transparent 2px;
   border-radius: 0.375rem;
   transition:
@@ -144,11 +158,11 @@ p:not(:first) {
 
 .link:active {
   font-weight: 700;
-  color: var(--color-primary-100);
+  color: var(--color-primary-500);
 }
 
 .btn {
-  border: solid 2px var(--color-primary-900);
+  border: solid 2px var(--text-color);
   font-weight: 500;
   text-decoration: underline;
   padding-inline: 0.5rem;
@@ -161,7 +175,7 @@ p:not(:first) {
 }
 
 .btn:hover {
-  background-color: var(--color-primary-200);
+  background-color: var(--background-highlight-color);
   text-decoration-color: transparent;
 }
 
@@ -169,14 +183,6 @@ p:not(:first) {
   transform: scale(1.1, 1.1);
 }
 
-.btn--dark {
-  border-color: var(--color-primary-50);
-}
-
-.btn--dark:hover {
-  background-color: var(--color-primary-800);
-}
-
 td {
   padding-block-start: var(--spacing-block-sm);
 }
@@ -234,8 +240,8 @@ ol li {
   margin-block: 1.5rem;
   margin-inline: 0.5rem;
   width: 30%;
-  border: solid 2px var(--color-primary-800);
-  color: var(--color-primary-800);
+  border: solid 2px var(--text-color);
+  color: var(--text-color);
   overflow: hidden;
   text-overflow: ellipsis;
   padding-inline: var(--spacing-inline-sm);
@@ -247,8 +253,8 @@ ol li {
 }
 
 .news-post:hover {
-  background-color: var(--color-primary-50);
-  color: var(--color-primary-900);
+  background-color: var(--background-highlight-color);
+  color: var(--text-highlight-color);
 }
 
 .news-post:active {
@@ -366,3 +372,12 @@ footer {
   font-size: var(--font-size-sm);
   padding-block-end: var(--spacing-block-md);
 }
+
+nav {
+  background-color: var(--color-primary-900);
+  color: var(--color-primary-50);
+  display: flex;
+  justify-content: space-evenly;
+  padding-block-start: var(--spacing-block-sm);
+  padding-block-end: var(--spacing-block-md);
+}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6ad0052..f5de8b8 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,8 +2,8 @@
 
 ---
 
-<footer>
-  <p class="btn btn--dark back-to-top-link">
+<footer class="dark">
+  <p class="btn back-to-top-link">
     <a href="#main">▴ Back til tap</a>
   </p>
 </footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
new file mode 100644
index 0000000..8174efe
--- /dev/null
+++ b/src/components/Navbar.astro
@@ -0,0 +1,14 @@
+---
+import type Locale from '../types/Locale';
+import SwitchLanguageLink from './SwitchLanguageLink.astro';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+---
+
+<nav class="dark">
+  <SwitchLanguageLink currentLocale={locale} />
+</nav>
diff --git a/src/components/SwitchLanguageLink.astro b/src/components/SwitchLanguageLink.astro
new file mode 100644
index 0000000..77dfa18
--- /dev/null
+++ b/src/components/SwitchLanguageLink.astro
@@ -0,0 +1,28 @@
+---
+import tPage from '../i18n/translations/components/languageLinks';
+import tSite from '../i18n/translations/site';
+import translate from '../i18n/translate';
+import type Locale from '../types/Locale';
+
+interface Props {
+  currentLocale: Locale;
+}
+
+// This logic assumes that there are exactly two locales.
+const { currentLocale } = Astro.props;
+const otherLocale: Locale = currentLocale === 'sco' ? 'en-GB' : 'sco';
+const currentPath = Astro.url.pathname;
+const currentLocaleInPath = new RegExp(`(?<=^/)(${currentLocale}/)?`);
+const otherLocalePath = currentPath.replace(currentLocaleInPath, `${otherLocale}/`);
+
+const t = translate(currentLocale);
+---
+
+<a class="link" href={otherLocalePath}>
+  {
+    t(tPage, {
+      key: 'language-link-text',
+      language: t(tSite, { key: 'locale', locale: otherLocale }),
+    })
+  }
+</a>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ca567f6..f63b0ad 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import Footer from '../components/Footer.astro';
+import Navbar from '../components/Navbar.astro';
 import translate from '../i18n/translate';
 import site from '../i18n/translations/site';
 import type Locale from '../types/Locale';
@@ -26,6 +27,7 @@ const t = translate(locale);
     <title>{title} | {t(site, { key: 'title' })}</title>
   </head>
   <body>
+    <Navbar locale={locale} />
     <slot />
     <Footer />
   </body>