feat: navigation (resolves #14) (#30)

src/_includes/components/color/color.config.js

@@ -3,6 +3,7 @@ module.exports = {
     context: {
         colors: [
             "blue-100",
+            "blue-300",
             "blue-600",
             "blue-700",
             "green-100",

src/_includes/components/navigation/README.md

@@ -0,0 +1 @@
+# Navigation

src/_includes/components/navigation/navigation.config.js

@@ -0,0 +1,101 @@
+module.exports = {
+    title: "Navigation",
+    context: {
+        items: [
+            {
+                title: "Insights"
+            },
+            {
+                title: "Practices"
+            },
+            {
+                title: "Techniques"
+            },
+            {
+                title: "Activities"
+            }
+        ]
+    },
+    variants: [
+        {
+            title: "Current Page - Insights",
+            context: {
+                items: [
+                    {
+                        title: "Insights",
+                        current: true
+                    },
+                    {
+                        title: "Practices"
+                    },
+                    {
+                        title: "Techniques"
+                    },
+                    {
+                        title: "Activities"
+                    }
+                ]
+            }
+        },
+        {
+            title: "Current Page - Practices",
+            context: {
+                items: [
+                    {
+                        title: "Insights"
+                    },
+                    {
+                        title: "Practices",
+                        current: true
+                    },
+                    {
+                        title: "Techniques"
+                    },
+                    {
+                        title: "Activities"
+                    }
+                ]
+            }
+        },
+        {
+            title: "Current Page - Techniques",
+            context: {
+                items: [
+                    {
+                        title: "Insights"
+                    },
+                    {
+                        title: "Practices"
+                    },
+                    {
+                        title: "Techniques",
+                        current: true
+                    },
+                    {
+                        title: "Activities"
+                    }
+                ]
+            }
+        },
+        {
+            title: "Current Page - Activities",
+            context: {
+                items: [
+                    {
+                        title: "Insights"
+                    },
+                    {
+                        title: "Practices"
+                    },
+                    {
+                        title: "Techniques"
+                    },
+                    {
+                        title: "Activities",
+                        current: true
+                    }
+                ]
+            }
+        }
+    ]
+};

src/_includes/components/navigation/navigation.njk

@@ -0,0 +1,17 @@
+<nav aria-labelledby="navigation" x-data="{open: false}">
+    <a rel="home" href="/">
+        {% include "../../../static/svg/idrc.svg" %}
+        <span>Inclusive Design Guide</span>
+    </a>
+    <button aria-expanded="false" x-bind:aria-expanded="open" @click="open = !open">{% include "../../../static/svg/close.svg" %}{% include "../../../static/svg/menu.svg" %}<span class="label">menu</span></button>
+    <div class="inner flow">
+        <h2 id="navigation">Menu</h2>
+        <ul role="list">
+            {% for item in params.items %}
+            <li>
+                <a class="--{{ item.title | slugify }}" href="#{{ item.title | slugify }}"{% if item.current %} aria-current="page"{% endif %}>{{ item.title }}</a>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</nav>

src/static/css/_color.css

@@ -2,8 +2,8 @@
     background-color: var(--fl-bgColor, var(--color-blue-100));
 }
 
-.bg-blue-200 {
-    background-color: var(--fl-bgColor, var(--color-blue-200));
+.bg-blue-300 {
+    background-color: var(--fl-bgColor, var(--color-blue-300));
 }
 
 .bg-blue-600 {

src/static/css/_font.css

@@ -43,6 +43,24 @@
     src: url("../fonts/mulish-v12-latin-italic.woff2") format("woff2");
 }
 
+/* mulish-500 - latin */
+@font-face {
+    font-display: swap;
+    font-family: Mulish;
+    font-style: normal;
+    font-weight: 500;
+    src: url("../fonts/mulish-v12-latin-500.woff2") format("woff2");
+}
+
+/* mulish-700 - latin */
+@font-face {
+    font-display: swap;
+    font-family: Mulish;
+    font-style: normal;
+    font-weight: 700;
+    src: url("../fonts/mulish-v12-latin-700.woff2") format("woff2");
+}
+
 /* mulish-800 - latin */
 @font-face {
     font-display: swap;

src/static/css/_link.css

@@ -1,5 +1,6 @@
 a {
     color: var(--fl-linkColor, var(--link-color));
+    font-weight: 800;
     text-decoration: underline;
 }