pages with colorful navigation

.zs/active

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+# sets the 'active' class on an item if the url matches the directory
+urlpath=$(dirname "$ZS_URL")
+test "$1" = $urlpath && printf "active" || true

.zs/layout.html

@@ -0,0 +1,15 @@
+<link href=/style.css rel=stylesheet />
+
+<nav>
+  <a href=jonathan.is>jonathan.is</a>
+  <menu>
+    <li class="{{ active writing }}"><a href=/writing  >/writing</a>
+    <li class="{{ active speaking }}"><a href=/speaking >/speaking</a>
+    <li class="{{ active coding }}"><a href=/coding   >/coding</a>
+    <li class="{{ active making }}"><a href=/making   >/making</a>
+    <li class="{{ active working }}"><a href=/working  >/working</a>
+    <li class="{{ active living }}"><a href=/living   >/living</a>
+  </menu>
+</nav>
+
+{{ content }}

coding/index.md

@@ -0,0 +1 @@
+coding

index.html

@@ -1,13 +0,0 @@
-<link href=style.css rel=stylesheet />
-
-<nav>
-  <a href=jonathan.is>jonathan.is</a>
-  <menu>
-    <li><a href=/writing>/writing</a>
-    <li><a href=/speaking>/speaking</a>
-    <li><a href=/coding>/coding</a>
-    <li><a href=/making>/making</a>
-    <li><a href=/working>/working</a>
-    <li><a href=/living>/living</a>
-  </menu>
-</nav>

index.md

@@ -0,0 +1 @@
+Hello, reach out to me via email

living/index.md

@@ -0,0 +1 @@
+living

making/index.md

@@ -0,0 +1 @@
+making

speaking/index.md

@@ -0,0 +1 @@
+speaking

style.css

@@ -1,5 +1,5 @@
 body {
-  font-size: x-large
+  font-size: xx-large
 }
 
 li {
@@ -26,12 +26,12 @@ a:hover {
   --purple: #a033b3;
 }
 
-li:nth-of-type(6n + 1):hover { color: var(--red) }
-li:nth-of-type(6n + 2):hover { color: var(--orange) }
-li:nth-of-type(6n + 3):hover { color: var(--pink) }
-li:nth-of-type(6n + 4):hover { color: var(--green) }
-li:nth-of-type(6n + 5):hover { color: var(--blue) }
-li:nth-of-type(6n + 6):hover { color: var(--purple) }
+li:nth-of-type(6n + 1):hover, li.active:nth-of-type(6n + 1) { color: var(--red) }
+li:nth-of-type(6n + 2):hover, li.active:nth-of-type(6n + 2) { color: var(--orange) }
+li:nth-of-type(6n + 3):hover, li.active:nth-of-type(6n + 3) { color: var(--pink) }
+li:nth-of-type(6n + 4):hover, li.active:nth-of-type(6n + 4) { color: var(--green) }
+li:nth-of-type(6n + 5):hover, li.active:nth-of-type(6n + 5) { color: var(--blue) }
+li:nth-of-type(6n + 6):hover, li.active:nth-of-type(6n + 6) { color: var(--purple) }
 
 menu {
   padding: 0;

working/index.md

@@ -0,0 +1 @@
+working

writing/index.md

@@ -0,0 +1 @@
+writing