Merge pull request #86 from ngsilverman/ns/new-header

Update header
lipu-tenpo · Oct 10, 2024 · c7a5ca0 · c7a5ca0
2 parents 12e6af9 + 5f2aac5
commit c7a5ca0
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 255 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -190,6 +190,24 @@ module.exports = function (eleventyConfig) {
   //  use like {{ eleventyImage "images/blah.jpg" "classes" "alt" 300 }}
   eleventyConfig.addShortcode("eleventyImage", imageShortcode);
 
+  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 {
     markdownTemplateEngine: "hbs",
   };

diff --git a/_data/redirects.yaml b/_data/redirects.yaml
@@ -177,4 +177,5 @@
 - /author/jan-sonatan/: /sona/
 - /author/kulupu-pi-lipu-tenpo/: /sona/
 - /author/jan-alonola/: /sona/
-- /feed: /lipu/feed.xml
+- /feed: /lipu/feed.xml
+- /lipu-ante/: /sona#lipu-ante
diff --git 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,41 +51,35 @@ 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>
-    <nav>
-      <ul>
-        <li>
-          <a href="/">open</a>
-        <li>
-          <a href="/toki">toki</a>
-        </li>
-        <li>
-          <a href="/sona">sona</a>
-        </li>
-        <li>
-          <a href="/lipu-ante">lipu ante</a>
-        </li>
-      </ul>
-      <!-- search bar -->
-      <!-- <form onsubmit="">
-        <input type="text" name="q" placeholder="search" />
-      </form> -->
-    </nav>
-  </header>
+  <div class="poki-insa">
+    <header>
+      <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="/sona#faq">li alasa e jan pali sin</a></div>
+        </div>
+      </div>
+      <nav>
+        <ul>
+          {{!--
+          Conversation about menu links: https://discord.com/channels/795288348024373289/796468535672963122/1278030295211442291
+          --}}
+          {{{ nav "/" "lipu ale" }}}
+          {{{ nav "/toki/" "toki ale" }}}
+          {{{ nav "/sona/" "ni li seme" }}}
+        </ul>
+        <!-- search bar -->
+        <!-- <form onsubmit="">
+          <input type="text" name="q" placeholder="search" />
+        </form> -->
+      </nav>
+    </header>
+
+    <hr class="anpa-sewi" />
+  </div>
 
   <main>{{{ content }}}</main>
 

diff --git a/lipu-ante.hbs b/lipu-ante.hbs
diff --git a/public/stylesheet-lipu-ante.css b/public/stylesheet-lipu-ante.css
diff --git 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;
@@ -117,6 +128,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/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;
 }