Using color-scheme and light-dark() to implement dark mode (#154)

* Lint fixes.

* Implement light-dark().

* Lint css with biome, remove stylelint.

* Biome lint fixes.

* Dark mode adjustments.

* Style bug fixes.

* Colour adjustments.

* Move header and footer styles to base.

* Site header adjustments.

* Removing jQuery and umbrella libs. They where great but not needed anymore.

* Add colorScheme to optionally lock light/dark.

* Update README.

* Biome adjustments.

assets/css/base/_document.css

@@ -1,21 +1,31 @@
 /* Document */
 
 html {
-  /* Change the default font family in all browsers. */
-  font-family: var(--ff-body);
-
   /* Set base font size in percent. */
   font-size: calc(var(--base-font-size) / 16 * 100%);
-
-  /* Set text colour. */
-  color: var(--color-text);
 }
 
 body {
+  /* Change the default font family in all browsers. */
+  font-family: var(--ff-body);
+
   /* Correct the line height in all browsers. */
   line-height: var(--base-line-height);
 
+  /* Set text colour. */
+  color: var(--color-text);
+
   /* Accent colour for forms. */
   accent-color: var(--color-accent);
+
+  /* Set background colour. */
+  background-color: var(--color-body-bg);
 }
 
+.page {
+  background-color: var(--color-page-bg);
+}
+
+::backdrop {
+  background-color: var(--color-backdrop);
+}

assets/css/base/_footer.css

@@ -0,0 +1,11 @@
+/* Branding footer */
+
+.footer {
+  padding-block: var(--gutters);
+  background-color: var(--color-footer-bg);
+  text-align: center;
+
+  p {
+    margin: 0;
+  }
+}

assets/css/base/_forms.css

@@ -16,7 +16,7 @@ label {
 
   /* Display as block if before input. */
   &:has(+ input),
-  &:has(+ textarea){
+  &:has(+ textarea) {
     display: block;
   }
 

assets/css/base/_header.css

@@ -0,0 +1,55 @@
+/* Branding header */
+
+.header {
+  --header-gap: var(--spacing-s);
+
+  padding-block: min(var(--gutters), var(--spacing-m));
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--header-gap);
+  background-color: var(--color-header-bg);
+
+  @media (min-width: 666px) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+/* Wrapping link for logo. */
+.header__logo {
+  width: fit-content;
+}
+
+/* Logo image. */
+.header__logo-image {
+  vertical-align: bottom;
+  min-width: 32px;
+}
+
+/* The name of the website. */
+.header__site-name {
+  margin: 0;
+  line-height: 1;
+}
+
+/* The link around the name of the website. */
+.header__site-link {
+  &:link,
+  &:visited {
+    color: var(--color-text);
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+/* Wrapper for any blocks placed in the header region. */
+.header__region {
+  @media (min-width: 666px) {
+    margin-inline-start: auto;
+  }
+}

assets/css/base/_headings.css

@@ -8,7 +8,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-block: 1.5em .5em;
+  margin-block: 1.5em 0.5em;
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
@@ -17,7 +17,7 @@ h6 {
 
   /* Smaller margin when a headeing is right after another heading. */
   & + & {
-    margin-block-start: .75em;
+    margin-block-start: 0.75em;
   }
 
   /* Set max text line width in main for readability. */
@@ -31,17 +31,17 @@ h1 {
   margin-block-start: var(--spacing-m);
   margin-block-end: var(--spacing-xs);
   font-size: var(--fs-xxl);
-  letter-spacing: -.01em;
+  letter-spacing: -0.01em;
 }
 
 h2 {
   font-size: var(--fs-xl);
-  letter-spacing: -.01em;
+  letter-spacing: -0.01em;
 }
 
 h3 {
   font-size: var(--fs-l);
-  letter-spacing: -.01em;
+  letter-spacing: -0.01em;
 }
 
 h4 {

assets/css/base/_images.css

@@ -3,7 +3,7 @@
 figure,
 img {
   &.image {
-    --image-padding: .75rem;
+    --image-padding: 0.75rem;
 
     @media (min-width: 666px) {
       &.center {

assets/css/base/_links.css

@@ -55,25 +55,3 @@ a:active {
     }
   }
 }
-
-/* Inverted links, for dark backgrounds. */
-.link-inverted {
-  a {
-    &:link {
-      color: var(--color-link-inverted);
-    }
-
-    &:visited {
-      color: var(--color-link-visited-inverted);
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--color-link-hover-inverted);
-    }
-
-    &:active {
-      color: var(--color-link-active-inverted);
-    }
-  }
-}