From f2cb32cb8c22b5bd0675edf638ce07aaacf20704 Mon Sep 17 00:00:00 2001
From: Nathanael Silverman <nathanael@hey.com>
Date: Sun, 7 Jul 2024 10:26:07 -0400
Subject: [PATCH 01/12] Update header

---
 _includes/page.hbs    |  50 ++++--------
 public/stylesheet.css | 180 ++++++++++--------------------------------
 2 files changed, 59 insertions(+), 171 deletions(-)
diff --git a/_includes/page.hbs b/_includes/page.hbs
index 81a1d43..6ae7986 100644
--- a/_includes/page.hbs
+++ b/_includes/page.hbs
@@ -40,22 +40,6 @@ scripts: []
   <link rel="stylesheet" href="/{{ this }}" />
   {{/each}}
 
-  <!-- patreon banner -->
-  <script>
-    // check if cookie exists
-    if (document.cookie.indexOf('patreon-banner-closed=1') == -1) {
-      // cookie doesn't exist, show banner
-      setTimeout(() => {
-        document.getElementById('patreon-banner').classList.add('visible')
-      }, 1500)      
-    }
-    closeBanner = () => {
-      // set cookie
-      document.cookie = 'patreon-banner-closed=1; path=/; max-age=2628000'
-      document.getElementById('patreon-banner').classList.remove('visible')
-    }
-  </script>
-
   <!-- analytics -->
   <script data-goatcounter="https://liputenpo.goatcounter.com/count"
         async src="//gc.zgo.at/count.js"></script>
@@ -67,33 +51,31 @@ scripts: []
 </head>
 
 <body>
-  <article id="patreon-banner" class="patreon-banner">
-    <div>
-      <p>
-        lipu tenpo li lon ma Patreon!
-        <a href="https://www.patreon.com/liputenpo">o lukin!</a>
-      </p>
-      <button class="close" onclick="closeBanner()">&#10006;</button>
-    </div>
-  </article>
   <header>
-    <div id="banner"></div>
-    <a href="/" class="title">
-      <img src="/logo.png" alt="lipu tenpo logo" width="475" height="497" />
-      <h1>lipu tenpo</h1>
-    </a>
+    <div class="sewi-lipu">
+      <a href="/">
+        <img src="/logo.png" alt="lipu tenpo logo" class="logo" />
+      </a>
+      <div>
+        <h1><a href="/">lipu tenpo</a></h1>
+        <div class="subtitle"><a href="/">kulupu pi toki pona</a></div>
+      </div>
+    </div>
     <nav>
       <ul>
         <li>
-          <a href="/">open</a>
+          <a href="/"><span class="sitelen-pona">lipu</span> lipu</a>
+        <li>
+          <a href="/toki"><span class="sitelen-pona">toki</span> toki</a>
+        </li>
         <li>
-          <a href="/toki">toki</a>
+          <a href="/sona"><span class="sitelen-pona">sona</span> sona</a>
         </li>
         <li>
-          <a href="/sona">sona</a>
+          <a href="https://www.patreon.com/liputenpo"><span class="sitelen-pona">esun</span> Patreon</a>
         </li>
         <li>
-          <a href="/lipu-ante">lipu ante</a>
+          <a href="/lipu-ante"><span class="sitelen-pona">lipu</span><span class="sitelen-pona">ante</span> lipu ante</a>
         </li>
       </ul>
       <!-- search bar -->
diff --git a/public/stylesheet.css b/public/stylesheet.css
index 4403de6..1d5cfc6 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -74,6 +74,11 @@ body {
   min-height: 100vh;
   position: relative;
 }
+
+body {
+  background-color: var(--background);
+}
+
 h2,
 h3,
 h4,
@@ -82,56 +87,13 @@ h6 {
   font-family: "Bricolage Grotesque", sans-serif;
 }
 
-.patreon-banner {
-  position: fixed;
-  top: -10rem;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
+header {
   align-items: center;
-  text-align: center;
-  z-index: 100;
-  transition: top 1s cubic-bezier(0.21, -0.53, 0.82, 1.43);
-}
-.patreon-banner.visible {
-  top: 0;
-}
-.patreon-banner div {
-  background-color: var(--logo-primary);
-  color: white;
-  padding: 0.5rem;
-  margin: 0.5rem 2rem;
-  border-radius: 1rem;
-  box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black;
+  border-bottom: 2px solid var(--colour-pimeja-lili);
   display: flex;
-  justify-content: center;
-}
-.patreon-banner p {
-  margin: 0;
-}
-.patreon-banner a {
-  color: var(--logo-secondary);
-  text-decoration: underline;
-}
-.patreon-banner a:hover {
-  color: var(--logo-secondary-dark);
-}
-.patreon-banner button.close {
-  background-color: transparent;
-  border: none;
-  color: white;
-  margin-left: 1rem;
-  cursor: pointer;
-}
-
-header {
-  font-family: "Bogface", sans-serif;
-  padding: 1rem 1rem 0;
-  display: grid;
-  grid-template-columns: fit-content(100%);
-  justify-content: center;
-  position: relative;
+  flex-direction: column;
+  font-family: "Bricolage Grotesque", sans-serif;
+  margin: 2rem;
 }
 header #banner {
   position: absolute;
@@ -144,78 +106,62 @@ header #banner {
   z-index: -5;
   background-color: var(--background);
 }
-header a.title {
-  text-decoration: none;
-  color: white;
-}
-header .title {
-  background-color: var(--background);
-  display: flex;
+header .sewi-lipu {
   align-items: center;
-  justify-content: center;
-  padding: 1rem 1rem 0;
-  border-top-left-radius: 2rem;
-  border-top-right-radius: 2rem;
-  position: relative;
-}
-header .title::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-top-left-radius: 2rem;
-  border-top-right-radius: 2rem;
-  box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black;
+  display: flex;
+  margin: 1rem 0;
 }
-header .title img {
+header .logo {
   width: 5rem;
   height: auto;
 }
-header .title h1 {
+header h1 {
   font-size: 2rem;
-  margin: 0;
-  margin-left: 1rem;
+  margin: 0 0 .2rem 1rem;
+  text-align: left;
 }
-header nav {
-  background-color: var(--background);
-  padding: 0 1rem 1rem;
-  position: relative;
+header h1 a {
+  color: white;
+  text-decoration: none;
 }
-header nav::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-bottom-left-radius: 2rem;
-  border-bottom-right-radius: 2rem;
-  box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black;
+header .subtitle {
+  font-size: 1.4rem;
+  font-weight: bold;
+  margin: 0 0 .5rem 1rem;
+}
+header .subtitle a {
+  color: var(--colour-kiwen);
+  text-decoration: none;
+}
+header nav {
+  padding: 1.5rem 5rem;
 }
 header nav ul {
+  display: flex;
+  flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
-  display: grid;
-  grid-template-columns: 1fr;
-  align-items: center;
+}
+header nav li {
+  padding: .5rem 1.5rem;
 }
 header nav a {
   color: white;
+  font-size: 1.7rem;
+  padding-bottom: .2rem;
   text-align: center;
-  display: block;
-  width: 100%;
-  font-size: 1.5rem;
   text-decoration: none;
-  padding: 1rem;
-  border-radius: 0.5rem;
+}
+header nav a .sitelen-pona {
+  color: var(--primary-200);
 }
 header nav a:hover {
-  background-color: var(--primary-300);
+  border-bottom: 3px solid var(--primary-200);
 }
 
 main {
-  background-color: var(--background);
-  padding: 1rem 0 3rem;
-  box-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 30px black;
+  padding: 1rem 0;
   flex-grow: 1;
 }
 
@@ -226,46 +172,6 @@ main a:hover {
   color: var(--primary-200);
 }
 
-@media (min-width: 15rem) {
-  header nav ul {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (min-width: 35rem) {
-  header nav ul {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-@media (min-width: 52rem) {
-  header {
-    height: 20rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: end;
-    padding: 0;
-  }
-  header .title {
-    border-top-left-radius: 0;
-    height: 7rem;
-  }
-  header nav {
-    border-radius: 2rem 0 0;
-    padding: 1rem;
-    height: 7rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  header nav ul {
-    height: 100%;
-  }
-  header nav::before {
-    border-radius: 2rem 0 0;
-  }
-}
-
 footer {
   font-family: "Andika", sans-serif;
   background-color: var(--logo-primary);

From 4af4796e6f77f2bd2fb981de4682718f4bf0a4c0 Mon Sep 17 00:00:00 2001
From: Nathanael Silverman <nathanael@hey.com>
Date: Tue, 9 Jul 2024 22:33:55 -0400
Subject: [PATCH 02/12] New design iteration

---
 .eleventy.js          |  8 ++++++++
 _includes/page.hbs    | 21 ++++++-------------
 public/stylesheet.css | 48 ++++++++++++++++++++++++++++++-------------
 3 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 2a97611..9ff5641 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -189,6 +189,14 @@ module.exports = function (eleventyConfig) {
   //  use like {{ eleventyImage "images/blah.jpg" "classes" "alt" 300 }}
   eleventyConfig.addShortcode("eleventyImage", imageShortcode);
 
+  eleventyConfig.addShortcode("nav", function(url, label) {
+    const isActive = this.page.url === url;
+    const content = label.split(' ').map(word => {
+      return `<span class="sitelen-tu" data-text="${word}">${word}</span>`;
+    }).join(' ');
+    return `<li class="${isActive ? 'active' : ''}"><a href="${url}">${content}</a></li>`;
+  });
+
   return {
     markdownTemplateEngine: "hbs",
   };
diff --git a/_includes/page.hbs b/_includes/page.hbs
index 6ae7986..a811b66 100644
--- a/_includes/page.hbs
+++ b/_includes/page.hbs
@@ -58,25 +58,16 @@ scripts: []
       </a>
       <div>
         <h1><a href="/">lipu tenpo</a></h1>
-        <div class="subtitle"><a href="/">kulupu pi toki pona</a></div>
+        <div class="subtitle"><a href="/">li kulupu pi toki pona</a></div>
       </div>
     </div>
     <nav>
       <ul>
-        <li>
-          <a href="/"><span class="sitelen-pona">lipu</span> lipu</a>
-        <li>
-          <a href="/toki"><span class="sitelen-pona">toki</span> toki</a>
-        </li>
-        <li>
-          <a href="/sona"><span class="sitelen-pona">sona</span> sona</a>
-        </li>
-        <li>
-          <a href="https://www.patreon.com/liputenpo"><span class="sitelen-pona">esun</span> Patreon</a>
-        </li>
-        <li>
-          <a href="/lipu-ante"><span class="sitelen-pona">lipu</span><span class="sitelen-pona">ante</span> lipu ante</a>
-        </li>
+        {{{ nav "/" "lipu ni" }}}
+        {{{ nav "/toki/" "toki tan kulupu" }}}
+        {{{ nav "/sona/" "sona seme" }}}
+        {{{ nav "https://www.patreon.com/liputenpo" "esun tawa ni" }}}
+        {{{ nav "/lipu-ante/" "lipu ante" }}}
       </ul>
       <!-- search bar -->
       <!-- <form onsubmit="">
diff --git a/public/stylesheet.css b/public/stylesheet.css
index 1d5cfc6..959c739 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -88,12 +88,12 @@ h6 {
 }
 
 header {
-  align-items: center;
+  align-items: flex-start;
   border-bottom: 2px solid var(--colour-pimeja-lili);
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
   font-family: "Bricolage Grotesque", sans-serif;
-  margin: 2rem;
+  margin: 3rem 2rem 1rem;
 }
 header #banner {
   position: absolute;
@@ -109,7 +109,7 @@ header #banner {
 header .sewi-lipu {
   align-items: center;
   display: flex;
-  margin: 1rem 0;
+  margin: 0 4rem 1.5rem 1.5rem;
 }
 header .logo {
   width: 5rem;
@@ -133,10 +133,8 @@ header .subtitle a {
   color: var(--colour-kiwen);
   text-decoration: none;
 }
-header nav {
-  padding: 1.5rem 5rem;
-}
 header nav ul {
+  align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -144,20 +142,42 @@ header nav ul {
   padding: 0;
 }
 header nav li {
-  padding: .5rem 1.5rem;
+  line-height: 1;
+  margin-top: 1rem;
+  padding: 1.5rem;
+  position: relative;
+  top: -1.5rem;
+}
+header nav li.active {
+  background-color: var(--colour-unu-walo);
+  border-radius: var(--blob-border-radius-02);
+}
+header nav li.active a {
+  color: var(--primary-700);
+}
+header nav li.active .sitelen-tu::before {
+  color: var(--primary-700);
 }
 header nav a {
   color: white;
-  font-size: 1.7rem;
-  padding-bottom: .2rem;
-  text-align: center;
+  font-size: 1.4rem;
+  text-align: left;
   text-decoration: none;
 }
-header nav a .sitelen-pona {
+.sitelen-tu::before {
   color: var(--primary-200);
+  content: attr(data-text);
+  display: inline-block;
+  font-family: "sitelen seli kiwen", sans-serif;
+  margin-right: .5rem;
+  text-align: center;
+  width: 1.5rem;
+}
+.sitelen-tu {
+  display: block;
 }
-header nav a:hover {
-  border-bottom: 3px solid var(--primary-200);
+header nav a:hover .sitelen-tu {
+  text-decoration: underline;
 }
 
 main {

From a644f6ed5a7e006236de3c90e9ec85eb47fca838 Mon Sep 17 00:00:00 2001
From: Nathanael Silverman <nathanael@hey.com>
Date: Wed, 10 Jul 2024 15:34:53 -0400
Subject: [PATCH 03/12] Spacing

---
 public/stylesheet.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/stylesheet.css b/public/stylesheet.css
index 959c739..61315d2 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -141,9 +141,11 @@ header nav ul {
   margin: 0;
   padding: 0;
 }
+header nav {
+  margin-top: 1rem;
+}
 header nav li {
   line-height: 1;
-  margin-top: 1rem;
   padding: 1.5rem;
   position: relative;
   top: -1.5rem;

From e33bad32f94b96eca85a47d0ea0abfcb1ed12e62 Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Fri, 23 Aug 2024 15:20:00 +0100
Subject: [PATCH 04/12] remove lipu tante page (move to sona page)

---
 _includes/page.hbs              |  1 -
 lipu-ante.hbs                   | 27 -----------------------
 public/stylesheet-lipu-ante.css | 32 ---------------------------
 public/stylesheet-sona.css      | 30 +++++++++++++++++++++++++
 sona.hbs                        | 39 ++++++++++++++++++++++++++-------
 5 files changed, 61 insertions(+), 68 deletions(-)
 delete mode 100644 lipu-ante.hbs
 delete mode 100644 public/stylesheet-lipu-ante.css

diff --git a/_includes/page.hbs b/_includes/page.hbs
index a811b66..e0bf05e 100644
--- a/_includes/page.hbs
+++ b/_includes/page.hbs
@@ -67,7 +67,6 @@ scripts: []
         {{{ nav "/toki/" "toki tan kulupu" }}}
         {{{ nav "/sona/" "sona seme" }}}
         {{{ nav "https://www.patreon.com/liputenpo" "esun tawa ni" }}}
-        {{{ nav "/lipu-ante/" "lipu ante" }}}
       </ul>
       <!-- search bar -->
       <!-- <form onsubmit="">
diff --git a/lipu-ante.hbs b/lipu-ante.hbs
deleted file mode 100644
index 3752f7a..0000000
--- a/lipu-ante.hbs
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: page
-title: "lipu tenpo - lipu ante"
-css:
-  - stylesheet-lipu-ante.css
----
-<div class="h2">
-  <h2 id="lipu-ante">lipu ante</h2>
-</div>
-<section class="lipu-ante">
-  {{#each lipu_ante}}
-  <div class="list">
-    <h3 id="{{@key}}">{{@key}}</h3>
-    <nav>
-      <ul>
-      {{#each this}}
-        <li>
-          {{#each this}}
-          <a href="{{this}}">{{@key}}</a>
-          {{/each}}
-        </li>
-      {{/each}}
-      </ul>
-    </nav>
-  </div>
-  {{/each}}
-</section>
diff --git a/public/stylesheet-lipu-ante.css b/public/stylesheet-lipu-ante.css
deleted file mode 100644
index a5d2e46..0000000
--- a/public/stylesheet-lipu-ante.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.h2 {
-  text-align: center;
-  font-size: 3rem;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.h2 h2 {
-  padding: 0.5rem 2rem;
-  margin: 1rem 0 0;
-
-  background-color: var(--colour-laso-walo);
-  color: var(--colour-laso-pimeja);
-  border-radius: var(--blob-border-radius-04);
-}
-
-.lipu-ante {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: start;
-  margin: 0 1rem 1rem;
-}
-.lipu-ante .list {
-  max-width: 15rem;
-  margin: 1rem;
-}
-.lipu-ante li {
-  margin: 0.5rem;
-}
diff --git a/public/stylesheet-sona.css b/public/stylesheet-sona.css
index 72a05a5..f43f8a9 100644
--- a/public/stylesheet-sona.css
+++ b/public/stylesheet-sona.css
@@ -117,6 +117,36 @@
   overflow-y: auto;
 }
 
+.lipu-ante {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.lipu-ante h3 {
+  margin: 4rem 0 1rem;
+  font-size: 2rem;
+  padding: 0.5rem 2rem;
+  background-color: var(--colour-unu-walo);
+  color: var(--colour-unu-pimeja);
+  border-radius: var(--blob-border-radius-01);
+}
+.lipu-ante h4 {
+  text-align: center;
+}
+.lipu-ante .lists {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 1rem;
+}
+.lipu-ante .lipu-ante-wan {
+  margin: 0.5rem;
+}
+.lipu-ante li {
+  margin: 0.5rem;
+}
+
 .sona {
   text-align: center;
   margin-bottom: 2rem;
diff --git a/sona.hbs b/sona.hbs
index 1527060..175a100 100644
--- a/sona.hbs
+++ b/sona.hbs
@@ -9,23 +9,23 @@ css:
   <h2 id="sona">sona</h2>
 </div>
 
-<article class="ni-li-seme">
+<section class="ni-li-seme">
     <h3 id="ni-li-seme">ni li seme?</h3>
     {{#each sona.[ni-li-seme]}}
     <h4 id="{{slugify question}}">{{question}}</h4>
     {{{markdown answer}}}
     {{/each}}
-</article>
+</section>
 
-<article class="faq">
+<section class="faq">
     <h3 id="faq">FAQ</h3>
     {{#each sona.faq}}
     <h4 id="{{slugify question}}">{{question}}</h4>
     {{{markdown answer}}}
     {{/each}}
-</article>
+</section>
 
-<article class="nimi-pi-pu-ala">
+<section class="nimi-pi-pu-ala">
     <h3 id="nimi-pi-pu-ala">nimi pi pu ala</h3>
     <p>o lukin e linluwi...</p>
     <nav>
@@ -38,9 +38,9 @@ css:
             </li>
         </ul>
     </nav>
-</article>
+</section>
 
-<article class="jan-pali">
+<section class="jan-pali">
     <h3 id="jan-pali">jan pali</h3>
     <div class="lists">
         {{#each jan_pali}}
@@ -61,7 +61,30 @@ css:
     <p>
         <span class="active">jan jelo li pali lon tenpo ni.</span> jan walo li pali lon tenpo pini.
     </p>
-</article>
+</section>
+
+<section class="lipu-ante">
+  <h3 id="lipu-ante">lipu ante</h3>
+  <div class="lists">
+    {{#each lipu_ante}}
+    <div class="lipu-ante-wan">
+        <h4 id="{{@key}}">{{@key}}</h4>
+        <nav>
+        <ul>
+            {{#each this}}
+            <li>
+                {{#each this}}
+                <a href="{{this}}">{{@key}}</a>
+                {{/each}}
+            </li>
+            {{/each}}
+        </ul>
+        </nav>
+    </div>
+    {{/each}}
+  </div>
+</section>
+
 
 <section class="sona">
     <h3 id="sona-footer">sona</h3>

From 93bd0c531a201c93e1befdaaa1cc1fc04d67729b Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Fri, 23 Aug 2024 15:29:19 +0100
Subject: [PATCH 05/12] move Patreon to a link under sona page

---
 _includes/page.hbs         |  1 -
 public/stylesheet-sona.css | 11 +++++++++++
 sona.hbs                   |  9 +++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/_includes/page.hbs b/_includes/page.hbs
index e0bf05e..4e57ab8 100644
--- a/_includes/page.hbs
+++ b/_includes/page.hbs
@@ -66,7 +66,6 @@ scripts: []
         {{{ nav "/" "lipu ni" }}}
         {{{ nav "/toki/" "toki tan kulupu" }}}
         {{{ nav "/sona/" "sona seme" }}}
-        {{{ nav "https://www.patreon.com/liputenpo" "esun tawa ni" }}}
       </ul>
       <!-- search bar -->
       <!-- <form onsubmit="">
diff --git a/public/stylesheet-sona.css b/public/stylesheet-sona.css
index f43f8a9..05b3d9d 100644
--- a/public/stylesheet-sona.css
+++ b/public/stylesheet-sona.css
@@ -15,6 +15,17 @@
   border-radius: var(--blob-border-radius-03);
 }
 
+.esun-tawa-ni {
+  text-align: center;
+  font-size: 2rem;
+}
+.esun-tawa-ni img.icon {
+  height: 2rem;
+  width: auto;
+  filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(112deg)
+    brightness(106%) contrast(109%);
+}
+
 .ni-li-seme {
   display: flex;
   flex-direction: column;
diff --git a/sona.hbs b/sona.hbs
index 175a100..fb7bc64 100644
--- a/sona.hbs
+++ b/sona.hbs
@@ -9,6 +9,15 @@ css:
   <h2 id="sona">sona</h2>
 </div>
 
+<section class="esun-tawa-ni">
+    <p>
+        <a href="https://www.patreon.com/liputenpo">
+            <img class="icon" src="/icons/patreon.svg" alt="patreon icon" />
+            esun tawa mi! (Patreon)
+        </a>
+    </p>
+</section>
+
 <section class="ni-li-seme">
     <h3 id="ni-li-seme">ni li seme?</h3>
     {{#each sona.[ni-li-seme]}}

From 98f4a8462279ba9e923f68e96e2c8c02dfa6c359 Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Fri, 23 Aug 2024 15:33:50 +0100
Subject: [PATCH 06/12] change isActive to true on sub-pages (and format code)

---
 .eleventy.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 9ff5641..fffe1b3 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -189,12 +189,22 @@ module.exports = function (eleventyConfig) {
   //  use like {{ eleventyImage "images/blah.jpg" "classes" "alt" 300 }}
   eleventyConfig.addShortcode("eleventyImage", imageShortcode);
 
-  eleventyConfig.addShortcode("nav", function(url, label) {
-    const isActive = this.page.url === url;
-    const content = label.split(' ').map(word => {
-      return `<span class="sitelen-tu" data-text="${word}">${word}</span>`;
-    }).join(' ');
-    return `<li class="${isActive ? 'active' : ''}"><a href="${url}">${content}</a></li>`;
+  eleventyConfig.addShortcode("nav", function (url, label) {
+    let isActive = false;
+    if (url == "/") {
+      isActive = this.page.url == "/" || this.page.url.startsWith("/lipu/");
+    } else {
+      isActive = this.page.url.startsWith(url);
+    }
+    const content = label
+      .split(" ")
+      .map((word) => {
+        return `<span class="sitelen-tu" data-text="${word}">${word}</span>`;
+      })
+      .join(" ");
+    return `<li class="${
+      isActive ? "active" : ""
+    }"><a href="${url}">${content}</a></li>`;
   });
 
   return {

From 5f244bb435c53b0372b57256925d1c3914176bdc Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Mon, 26 Aug 2024 13:10:03 +0100
Subject: [PATCH 07/12] make page links simple words

---
 _includes/page.hbs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/_includes/page.hbs b/_includes/page.hbs
index 4e57ab8..08ff941 100644
--- a/_includes/page.hbs
+++ b/_includes/page.hbs
@@ -63,9 +63,9 @@ scripts: []
     </div>
     <nav>
       <ul>
-        {{{ nav "/" "lipu ni" }}}
-        {{{ nav "/toki/" "toki tan kulupu" }}}
-        {{{ nav "/sona/" "sona seme" }}}
+        {{{ nav "/" "lipu" }}}
+        {{{ nav "/toki/" "toki" }}}
+        {{{ nav "/sona/" "sona" }}}
       </ul>
       <!-- search bar -->
       <!-- <form onsubmit="">

From a4c15b4c1527e29b05ccd65e50cfda2f4c339750 Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Mon, 26 Aug 2024 13:10:41 +0100
Subject: [PATCH 08/12] make entire nav blob clickable

---
 public/stylesheet.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/stylesheet.css b/public/stylesheet.css
index 61315d2..a47a7cd 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -146,14 +146,17 @@ header nav {
 }
 header nav li {
   line-height: 1;
-  padding: 1.5rem;
   position: relative;
   top: -1.5rem;
 }
-header nav li.active {
-  background-color: var(--colour-unu-walo);
+header nav li a {
+  padding: 1.5rem;
+  display: block;
   border-radius: var(--blob-border-radius-02);
 }
+header nav li.active a {
+  background-color: var(--colour-unu-walo);
+}
 header nav li.active a {
   color: var(--primary-700);
 }
@@ -171,7 +174,7 @@ header nav a {
   content: attr(data-text);
   display: inline-block;
   font-family: "sitelen seli kiwen", sans-serif;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   text-align: center;
   width: 1.5rem;
 }

From e65034fc8296e2aafd81ff27f2ea7f30ce40cc67 Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Mon, 26 Aug 2024 13:10:50 +0100
Subject: [PATCH 09/12] auto formatting

---
 public/stylesheet.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/stylesheet.css b/public/stylesheet.css
index a47a7cd..f249ee5 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -117,7 +117,7 @@ header .logo {
 }
 header h1 {
   font-size: 2rem;
-  margin: 0 0 .2rem 1rem;
+  margin: 0 0 0.2rem 1rem;
   text-align: left;
 }
 header h1 a {
@@ -127,7 +127,7 @@ header h1 a {
 header .subtitle {
   font-size: 1.4rem;
   font-weight: bold;
-  margin: 0 0 .5rem 1rem;
+  margin: 0 0 0.5rem 1rem;
 }
 header .subtitle a {
   color: var(--colour-kiwen);

From 0ba38523fd07009dcc1e9d834ec1cbd3062f269d Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Mon, 26 Aug 2024 13:13:53 +0100
Subject: [PATCH 10/12] remove excessive top margin

---
 public/stylesheet-toki-wan.css | 3 ++-
 public/stylesheet.css          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/stylesheet-toki-wan.css b/public/stylesheet-toki-wan.css
index 99b7463..5801259 100644
--- a/public/stylesheet-toki-wan.css
+++ b/public/stylesheet-toki-wan.css
@@ -3,12 +3,13 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 1rem 1rem 3rem;
+  margin: 0 1rem 3rem;
 }
 
 h1 {
   font-size: 3rem;
   margin-bottom: 0;
+  margin-top: 0;
   text-align: center;
 }
 
diff --git a/public/stylesheet.css b/public/stylesheet.css
index f249ee5..ea62f56 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -186,7 +186,7 @@ header nav a:hover .sitelen-tu {
 }
 
 main {
-  padding: 1rem 0;
+  padding: 0 0 1rem 0;
   flex-grow: 1;
 }
 

From 3a41ba7f3bfe0053d1f8dbd86e48dbbee3d478f6 Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Mon, 26 Aug 2024 14:05:01 +0100
Subject: [PATCH 11/12] change to light theme a lot of css variables

---
 .eleventy.js                |  3 ++-
 public/stylesheet-index.css |  6 ++---
 public/stylesheet-lipu.css  |  8 +++---
 public/stylesheet-sona.css  |  6 ++---
 public/stylesheet-toki.css  |  1 -
 public/stylesheet.css       | 49 ++++++++++++++++++++++++++-----------
 sona.hbs                    |  3 +--
 7 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index fffe1b3..0f96849 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -180,7 +180,8 @@ module.exports = function (eleventyConfig) {
       b += str.charCodeAt(i) * (i + 1);
     }
     function cap(x) {
-      return 100 + (x % 156);
+      // make sure all RGB values are below 156 to keep colours dark
+      return x % 156;
     }
     return `rgb(${cap(r)}, ${cap(g)}, ${cap(b)})`;
   });
diff --git a/public/stylesheet-index.css b/public/stylesheet-index.css
index fff00b8..402d23f 100644
--- a/public/stylesheet-index.css
+++ b/public/stylesheet-index.css
@@ -159,7 +159,7 @@
   font-weight: bold;
 }
 .lipuwan .date {
-  color: gray;
+  color: var(--text-subtle);
 }
 .lipuwan a:hover {
   text-decoration: underline;
@@ -186,9 +186,9 @@
   font-size: 1.7rem;
 }
 #lipu-nanpa-lon .lipuwan img {
-  margin-top: .7rem;
+  margin-top: 0.7rem;
   max-width: 12rem;
 }
 #lipu-nanpa-lon .jan-pali {
-  padding: 0 .5rem;
+  padding: 0 0.5rem;
 }
diff --git a/public/stylesheet-lipu.css b/public/stylesheet-lipu.css
index 041cb6f..ae59e94 100644
--- a/public/stylesheet-lipu.css
+++ b/public/stylesheet-lipu.css
@@ -39,7 +39,7 @@ h2 {
 }
 .pdfs li a {
   flex: 1 0;
-  border: 3px solid var(--logo-secondary-dark);
+  border: 3px solid var(--colour-kiwen-pimeja);
   background-color: var(--logo-primary-dark);
   padding: 1rem;
   border-radius: 1.5rem;
@@ -127,7 +127,6 @@ h2 {
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  color: var(--text-colour);
 }
 .article .nimi-suli {
   font-size: 1rem;
@@ -167,7 +166,10 @@ h2 {
   background-color: var(--logo-primary-dark);
   border-radius: 1rem;
   text-decoration: none;
-  color: var(--logo-secondary);
+  color: var(--text-contrast);
+}
+.prevnext a:hover {
+  color: var(--text-contrast-subtle);
 }
 .prevnext .disabled {
   color: var(--text-subtle);
diff --git a/public/stylesheet-sona.css b/public/stylesheet-sona.css
index 05b3d9d..2787bfd 100644
--- a/public/stylesheet-sona.css
+++ b/public/stylesheet-sona.css
@@ -22,8 +22,6 @@
 .esun-tawa-ni img.icon {
   height: 2rem;
   width: auto;
-  filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(112deg)
-    brightness(106%) contrast(109%);
 }
 
 .ni-li-seme {
@@ -105,10 +103,10 @@
   border-radius: var(--blob-border-radius-01);
 }
 .jan-pali .jan {
-  color: var(--colour-pimeja-lili);
+  color: var(--text-subtle);
 }
 .jan-pali .active {
-  color: var(--logo-secondary);
+  color: var(--colour-loje-pimeja);
 }
 .jan-pali .lists {
   display: flex;
diff --git a/public/stylesheet-toki.css b/public/stylesheet-toki.css
index 1cb9fbb..930928f 100644
--- a/public/stylesheet-toki.css
+++ b/public/stylesheet-toki.css
@@ -130,7 +130,6 @@ search > input {
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  color: var(--text-colour);
 }
 
 .article.hidden {
diff --git a/public/stylesheet.css b/public/stylesheet.css
index ea62f56..1e12140 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -8,7 +8,7 @@
   --logo-secondary: #fffd96;
   --logo-secondary-dark: #e0c880;
 
-  --background: #1e2122;
+  --background: #eeeef6;
 
   --primary-100: #e3e3ff;
   --primary-200: #aaacff;
@@ -20,8 +20,10 @@
   --primary-800: #000255;
   --primary-900: #00011c;
 
-  --text: white;
-  --text-subtle: #ddd;
+  --text: #000;
+  --text-subtle: #666;
+  --text-contrast: #fff;
+  --text-contrast-subtle: #ddd;
 
   /* generated with ../scripts/gpl-to-css.sh */
   --colour-walo-taso: #ffffff;
@@ -79,6 +81,30 @@ body {
   background-color: var(--background);
 }
 
+/* "paper" look */
+body {
+  --col: rgba(0, 0, 0, 0.01);
+  /* thickness of thin and thick lines */
+  --small-thickness: 1px;
+  --big-thickness: 2px;
+  /* gap between thin and thick lines */
+  --small-gap: 10px;
+  --big-gap: 50px;
+
+  --st: var(--small-thickness);
+  --bt: var(--big-thickness);
+  --nst: calc(-1 * var(--st));
+  --nbt: calc(-1 * var(--bt));
+  background-image: linear-gradient(var(--col) var(--bt), transparent var(--bt)),
+    linear-gradient(90deg, var(--col) var(--bt), transparent var(--bt)),
+    linear-gradient(var(--col) var(--st), transparent var(--st)),
+    linear-gradient(90deg, var(--col) var(--st), var(--background) var(--st));
+  background-size: var(--big-gap) var(--big-gap), var(--big-gap) var(--big-gap),
+    var(--small-gap) var(--small-gap), var(--small-gap) var(--small-gap);
+  background-position: var(--nbt) var(--nbt), var(--nbt) var(--nbt),
+    var(--nst) var(--nst), var(--nst) var(--nst);
+}
+
 h2,
 h3,
 h4,
@@ -121,7 +147,7 @@ header h1 {
   text-align: left;
 }
 header h1 a {
-  color: white;
+  color: var(--text);
   text-decoration: none;
 }
 header .subtitle {
@@ -157,20 +183,14 @@ header nav li a {
 header nav li.active a {
   background-color: var(--colour-unu-walo);
 }
-header nav li.active a {
-  color: var(--primary-700);
-}
-header nav li.active .sitelen-tu::before {
-  color: var(--primary-700);
-}
 header nav a {
-  color: white;
+  color: var(--text);
   font-size: 1.4rem;
   text-align: left;
   text-decoration: none;
 }
 .sitelen-tu::before {
-  color: var(--primary-200);
+  color: var(--text);
   content: attr(data-text);
   display: inline-block;
   font-family: "sitelen seli kiwen", sans-serif;
@@ -194,12 +214,13 @@ main a {
   color: var(--primary-300);
 }
 main a:hover {
-  color: var(--primary-200);
+  color: var(--primary-400);
 }
 
 footer {
   font-family: "Andika", sans-serif;
   background-color: var(--logo-primary);
+  color: var(--text-contrast);
   padding: 1rem;
   margin-top: auto;
   position: relative;
@@ -236,7 +257,7 @@ footer a img.icon {
 }
 footer a {
   font-family: "BogFace", sans-serif;
-  color: white;
+  color: var(--text-contrast);
   text-decoration: none;
   font-size: 1.2rem;
   text-align: center;
diff --git a/sona.hbs b/sona.hbs
index fb7bc64..f5927c1 100644
--- a/sona.hbs
+++ b/sona.hbs
@@ -12,8 +12,7 @@ css:
 <section class="esun-tawa-ni">
     <p>
         <a href="https://www.patreon.com/liputenpo">
-            <img class="icon" src="/icons/patreon.svg" alt="patreon icon" />
-            esun tawa mi! (Patreon)
+            esun tawa mi! (<img class="icon" src="/icons/patreon.svg" alt="patreon icon" /> Patreon)
         </a>
     </p>
 </section>

From a46613b34043df9bc75668ab8dbcb77bb35c3660 Mon Sep 17 00:00:00 2001
From: alifeee <alifeeerenn@hotmail.com>
Date: Mon, 26 Aug 2024 14:09:58 +0100
Subject: [PATCH 12/12] update subtitle

---
 _includes/page.hbs    | 2 +-
 public/stylesheet.css | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/_includes/page.hbs b/_includes/page.hbs
index 08ff941..d54c007 100644
--- a/_includes/page.hbs
+++ b/_includes/page.hbs
@@ -58,7 +58,7 @@ scripts: []
       </a>
       <div>
         <h1><a href="/">lipu tenpo</a></h1>
-        <div class="subtitle"><a href="/">li kulupu pi toki pona</a></div>
+        <div class="subtitle"><a href="/sona#faq">li alasa e jan pali sin</a></div>
       </div>
     </div>
     <nav>
diff --git a/public/stylesheet.css b/public/stylesheet.css
index ea62f56..7c0e6c3 100644
--- a/public/stylesheet.css
+++ b/public/stylesheet.css
@@ -133,6 +133,9 @@ header .subtitle a {
   color: var(--colour-kiwen);
   text-decoration: none;
 }
+header .subtitle a:hover {
+  text-decoration: underline;
+}
 header nav ul {
   align-items: flex-start;
   display: flex;
