_includes/base.webc

@@ -5,7 +5,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta name="color-scheme" content="dark light">
   <title @text="site.name"></title>
 
   <meta name="generator" :content="site.generator">

_includes/components/nav-link.webc

@@ -17,8 +17,8 @@ customElements.define('nav-link', NavLink)
 
 <style webc:scoped>
 :host {
-  --colour-solid: var(--primary-colour);
-  --colour-transparent: var(--primary-colour-25);
+  --color-solid: var(--primary-colour, pink);
+  --color-transparent: var(--primary-colour-25);
   display: flex;
   position: relative;
   color: var(--color-transparent);

_includes/components/nav-primary.webc

@@ -135,13 +135,14 @@ ul.active {
   padding: 0;
   font-size: 33vw;
   opacity: 0;
-  color: var(--neutral-100);
   transform: translateY(100px);
   transform-origin: bottom left;
+  mix-blend-mode: difference;
   transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
 }
 
 #menuItem h1.active {
+  mix-blend-mode: difference;
   opacity: 1 !important;
   transform: translateY(-600px) !important;
 }

assets/css/main.css

@@ -8,25 +8,21 @@
 /* --> BASE STYLES <-- */
 :root {
   --page-margin-inline: 1em;
+  /* --neutral-900: #1e1e3cff; */
+  /* --neutral-900-25: #1e1e3c33; */
   --neutral-900: #080c11ff;
   --neutral-900-25: #080c1133;
   --neutral-100: #c7c7c7ff;
   --neutral-100-25: #c7c7c733;
 
-  --primary-colour: var(--neutral-900);
-  --primary-colour-25: var(--neutral-900-25);
+  --primary-colour: var(--netural-900);
+  --primary-colour-25: var(--netural-900-25);
   --bg-colour: #fcfcfcff;
   --bg-colour-25: #fcfcfc33;
 }
 
-body {
-  font-family: 'fira code', monospace;
-  color: var(--primary-colour);
-  background-color: var(--bg-colour);
-}
-
 @media (prefers-color-scheme: dark) {
-  body {
+  :root {
     --primary-colour: var(--neutral-100);
     --primary-colour-25: var(--neutral-100-25);
     --bg-colour: var(--neutral-900);
@@ -34,6 +30,13 @@ body {
   }
 }
 
+
+body {
+  font-family: 'fira code', monospace;
+  color: var(--primary-colour);
+  background-color: var(--bg-colour);
+}
+
 p {
   max-width: 80ch;
 }
@@ -49,6 +52,7 @@ em {
 
 a, a:visited {
   color: var(--primary-colour);
+  padding-bottom: 2px;
   text-decoration: none;
   border-bottom: 1px var(--primary-colour) solid;
   transition: color ease 0.5s, border ease 0.2s;
@@ -57,7 +61,7 @@ a, a:visited {
 img {
   max-width: 100%;
   height: auto;
-  outline: 1px dotted var(--bg-colour);
+  outline: 1px dotted var(--neutral-900);
 }
 
 hr {