Remove redundant colours

Fixes #25.

README.md

@@ -1,8 +1,19 @@
 # FWDekker Template
 The base template for pages on fwdekker.com.
 
-This module contains templating functions (e.g. `nav`, `footer`), CSS libraries, and some common utility methods that
-are used on nearly all pages anyway.
+Contains utilities for
+* settings up header, footer, and navigation,
+* interacting with local storage (and an in-memory variant for testing), and
+* form validation.
+
+Simply import `template.js` and `template.css` to get it working.
+All JavaScript functionalities are exposed using the `window.fwdekker` object.
+
+Some functionalities are automatically executed after configuring some `<meta>` tags in the HTML.
+For example, set `<meta name="fwd:nav:target" content="#nav" />` to automatically put the navigation bar in the `#nav`
+element.
+
+Read the files' individual documentation for more information.
 
 
 ## Development

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.0.0-RC1",
+    "version": "3.0.0",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",

src/main/css/snippets/colors.css

@@ -1,27 +1,9 @@
-/* Custom main colors */
-:root {
-    --fwdekker-theme-color-triplet: 0, 51, 204;
-    --fwdekker-theme-color: rgb(var(--fwdekker-theme-color-triplet));
-
-    --fwdekker-theme-color-dark-triplet: 0, 41, 163;
-    --fwdekker-theme-color-dark: rgb(var(--fwdekker-theme-color-dark-triplet));
-
-    --fwdekker-theme-color-very-dark-triplet: 0, 31, 122;
-    --fwdekker-theme-color-very-dark: rgb(var(--fwdekker-theme-color-very-dark-triplet));
-
-    --fwdekker-theme-color-light-triplet: 0, 61, 245;
-    --fwdekker-theme-color-light: rgb(var(--fwdekker-theme-color-light-triplet));
-
-    --fwdekker-theme-color-very-light-triplet: 31, 87, 255;
-    --fwdekker-theme-color-very-light: rgb(var(--fwdekker-theme-color-very-light-triplet));
-}
-
-
 /* pico.css overrides, based on https://picocss.com/docs/customization.html */
 :root {
-    --primary: var(--fwdekker-theme-color) !important;
-    --primary-hover: var(--fwdekker-theme-color-light) !important;
-    --primary-focus: rgba(var(--fwdekker-theme-color-dark-triplet), 0.125) !important;
+    --primary: rgb(0, 51, 204) !important;
+    --primary-hover: rgb(0, 61, 245) !important;
+    --primary-focus: rgba(0, 41, 163, 0.125) !important;
+    --primary-focus-opaque: rgb(0, 41, 163) !important;
     --primary-inverse: white !important;
 
     --form-element-active-border-color: var(--primary) !important;

src/main/css/snippets/nav.css

@@ -6,8 +6,8 @@ nav.fwd-nav {
     margin: 0;
     width: 100%;
 
-    background-color: var(--fwdekker-theme-color);
-    border-bottom: 1px solid #cccccc;
+    background-color: var(--primary);
+    border-bottom: 1px solid var(--nav-border-color);
 
     --padding: calc(2em / 3);
 }
@@ -36,7 +36,7 @@ nav.fwd-nav #nav-hamburger-label {
     padding: calc(var(--padding)) calc(var(--padding));
     height: 100%;
 
-    color: white;
+    color: var(--primary-inverse);
 }
 
 nav.fwd-nav #nav-hamburger-label {
@@ -45,7 +45,7 @@ nav.fwd-nav #nav-hamburger-label {
 
 nav.fwd-nav a[target="_blank"]::after {
     margin-bottom: 0.2rem;
-    background-color: white;
+    background-color: var(--primary-inverse);
 }
 
 
@@ -79,7 +79,7 @@ nav.fwd-nav ul li {
     padding: 0;
 
     position: relative;
-    background-color: var(--fwdekker-theme-color);
+    background-color: var(--primary);
 }
 
 nav.fwd-nav ul li:hover,
@@ -87,11 +87,11 @@ nav.fwd-nav ul li:focus-within,
 nav.fwd-nav #nav-hamburger-label:hover,
 nav.fwd-nav #nav-hamburger-label:focus-within {
     cursor: pointer;
-    background-color: var(--fwdekker-theme-color-very-dark);
+    background-color: var(--primary-hover);
 }
 
 nav.fwd-nav li.currentPage {
-    background-color: var(--fwdekker-theme-color-dark);
+    background-color: var(--primary-focus-opaque);
 }
 
 

src/test/index.html

@@ -42,7 +42,7 @@
     </aside>
     <div role="document">
         <section>
-            <header id="header">
+            <header class="fwd-header">
                 <hgroup>
                     <h1><a href=".">Test</a></h1>
                     <h2>A test page</h2>