adds scrolly widget

assets/css/components/_madlib.scss

@@ -0,0 +1,44 @@
+.madlib > span {
+  position: absolute;
+  top: 0;
+}
+
+.madlib__wrapper {
+  display: inline-block;
+  position: relative;
+  left: 3.65rem;
+  height: 2.5rem;
+  overflow: hidden;
+}
+
+.madlib__list {
+  display: inline-block;
+  margin-top: 0;
+}
+
+.madlib__list span {
+  display: block;
+  opacity: 0;
+  max-height: 0;
+
+  &.active {
+    opacity: 1;
+    max-height: 100%;
+    animation: slide 3s $easing--bezier-standard;
+  }
+}
+
+@keyframes slide {
+  0% {
+    margin-top: calc(3 * 2.5rem);
+  }
+  20% {
+    margin-top: calc(0 * 2.5rem);
+  }
+  40% {
+    margin-top: calc(0 * 2.5rem);
+  }
+  100% {
+    margin-top: calc(-3 * 2.5rem);
+  }
+}

assets/css/components/_nav.scss

@@ -42,7 +42,7 @@
   }
 
   &.nav--open {
-    height: 27em;
+    height: 30em;
   }
 
   &.nav--open .nav__links-list {
@@ -51,23 +51,23 @@
     height: 100%;
   }
 
-  &.nav--open .header-noun-scroll {
+  &.nav--open .madlib {
     opacity: 0;
   }
 
   // other styles
-  .nav__header-title,
   .nav__page-title,
   .nav__links-list,
-  .nav__action .button {
+  .nav__action .button,
+  .madlib__list {
     @include get-map-values($serif);
     font-size: 1.5rem;
     @include breakpoint("medium") {
       font-size: 2rem;
     }
   }
 
-  .header-noun-scroll {
+  .madlib {
     position: absolute;
     display: none;
     padding-left: 0.5rem;
@@ -89,6 +89,10 @@
     a + ul {
       margin-top: 1rem;
     }
+
+    .shop a {
+      font-size: 3rem;
+    }
   }
 
   .nav__links-about {
@@ -137,27 +141,27 @@
 // page specific styles
 
 .p-home {
-  .header-noun-scroll {
+  .madlib {
     display: inline;
   }
 }
 
 .p-events,
 .p-post-page.events {
-  .nav__links-list #events {
+  .nav__links-list .events {
     display: none;
   }
 }
 
 .p-projects,
 .p-post-page.projects {
-  .nav__links-list #projects {
+  .nav__links-list .projects {
     display: none;
   }
 }
 
 .p-search {
-  .nav__links-list #search {
+  .nav__links-list .search {
     display: none;
   }
 }
@@ -171,6 +175,6 @@
   }
 }
 
-.p-about .nav__links-list #about {
+.p-about .nav__links-list .about {
   display: none;
 }

assets/css/style.scss

@@ -25,9 +25,10 @@ $background--dark: $color__black;
 @import "components/pagination";
 @import "components/footer";
 @import "components/page";
-@import "components/header-noun-scroll";
+@import "components/madlib";
 @import "components/searchbox";
 
+@import "pages/about";
 @import "pages/home";
 @import "pages/post-page";
 @import "pages/post-type";

assets/js/main.js

@@ -181,6 +181,24 @@ function handleMutation(
     window.location = searchUrl.toString();
   });
 
+  // handle home route
+  if (route.pathname == "/") {
+    // handle header madlib
+    const madlib = document.querySelector(".madlib__list");
+    let nounCount = madlib.children.length;
+    let activeIndex = nounCount % 2 ? (nounCount - 1) / 2 : nounCount / 2;
+    madlib.children[activeIndex].classList.add("active");
+
+    setInterval(() => {
+      for (let n of madlib.children) {
+        n.classList.remove("active");
+      }
+      let oldNode = madlib.removeChild(madlib.children[0]);
+      madlib.appendChild(oldNode);
+      madlib.children[activeIndex].classList.add("active");
+    }, 2000);
+  }
+
   // handle search route
   if (route.pathname.includes("/search")) {
     const fuse = await initFuse();

includes/madlib.html

@@ -0,0 +1,14 @@
+{% for card in collections.meta %}
+{% if card.data.tags contains 'madlib' %}
+{% assign madlib = card %}
+{% endif %}
+{% endfor %}
+<span class="madlib"><span>is a</span>
+  <div class="madlib__wrapper">
+    <div class="madlib__list">
+      {% for n in madlib.data.values %}
+      <span>{{ n }}</span>
+      {% endfor %}
+    </div>
+  </div>
+</span>

includes/navigation.html

@@ -3,7 +3,7 @@
 <div class="nav" id="nav">
   <div class="nav__wrapper">
     <div class="nav__header">
-      <h1 class="nav__header-title"><a href="/">ulises</a>{% include "header-noun-scroll.html" %}</h1>
+      <h1 class="nav__header-title"><a href="/">ulises</a>{% include "madlib.html" %}</h1>
     </div>
 
     <div class="nav__links">
@@ -14,19 +14,14 @@ <h1 class="nav__header-title"><a href="/">ulises</a>{% include "header-noun-scro
         {% endif %}
       </div>
       {% endif %}
+      <!-- Projects, Events,  About, Donate, Shop, Search -->
       <ul class="nav__links-list" id="nav-menu-links">
-        <li id="events"><a href="/events">events</a></li>
-        <li id="projects"><a href="/projects">projects</a></li>
-        <li id="about"><a href="/about">about</a>
-          <ul class="nav__links-about">
-            <li><a href="/about#visit">visit</a></li>
-            <li><a href="/about#consignment">consignment</a></li>
-            <li><a href="/about#donate">donate</a></li>
-            <li><a href="/about#contact">contact</a></li>
-          </ul>
-        </li>
-        <!-- <li><a href="/shop">shop</a></li> -->
-        <li id="search">
+        <li class="projects"><a href="/projects">projects</a></li>
+        <li class="events"><a href="/events">events</a></li>
+        <li class="about"><a href="/about">about</a></li>
+        <li class="about"><a href="/donate">donate</a></li>
+        <li class="shop"><a href="/#shop">shop</a></li>
+        <li class="search">
           {% include "searchbox.html" %}
         </li>
       </ul>

meta/madlib.md

@@ -0,0 +1,12 @@
+---
+tags:
+  - madlib
+values:
+  - Shop
+  - Gallery
+  - Archive
+  - Institute
+  - Company
+  - Project
+  - Group
+---