From 2d538f4b2da85f8f60991b4e86b13770f55b8705 Mon Sep 17 00:00:00 2001
From: Nabil Kashyap <nkashyap@getty.edu>
Date: Mon, 22 Jan 2024 14:41:52 -0800
Subject: [PATCH] home links and proto scroll

---
 .../css/components/_header-noun-scroll.scss   | 44 +++++++++++++++++++
 assets/css/components/_nav.scss               |  6 +--
 assets/css/style.scss                         |  1 +
 includes/header-noun-scroll.html              | 13 ++++++
 includes/navigation.html                      |  2 +-
 5 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 assets/css/components/_header-noun-scroll.scss
 create mode 100644 includes/header-noun-scroll.html

diff --git a/assets/css/components/_header-noun-scroll.scss b/assets/css/components/_header-noun-scroll.scss
new file mode 100644
index 0000000..f94657c
--- /dev/null
+++ b/assets/css/components/_header-noun-scroll.scss
@@ -0,0 +1,44 @@
+.header-noun-scroll > span {
+  position: absolute;
+  top: 0;
+}
+
+.header-noun-scroll__wrapper {
+  display: inline-block;
+  position: relative;
+  left: 4rem;
+  height: 2.5rem;
+  overflow: hidden;
+}
+
+.header-noun-scroll__list {
+  display: inline-block;
+  transition: 300ms all;
+  margin-top: 0;
+  animation: slide 10s infinite alternate $easing--bezier-sharp 2s;
+}
+
+.header-noun-scroll__list span {
+  display: block;
+  padding-bottom: 0.25rem;
+}
+@keyframes slide {
+  0% {
+    margin-top: 0;
+  }
+  20% {
+    margin-top: calc(-1 * 2.5rem);
+  }
+  40% {
+    margin-top: calc(-2 * 2.5rem);
+  }
+  60% {
+    margin-top: calc(-3 * 2.5rem);
+  }
+  80% {
+    margin-top: calc(-4 * 2.5rem);
+  }
+  100% {
+    margin-top: calc(-5 * 2.5rem);
+  }
+}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 822973f..5eecdde 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -50,7 +50,7 @@
     height: 100%;
   }
 
-  &.nav--open .nav__header-noun {
+  &.nav--open .header-noun-scroll {
     opacity: 0;
   }
 
@@ -66,7 +66,7 @@
     }
   }
 
-  .nav__header-noun {
+  .header-noun-scroll {
     position: absolute;
     display: none;
     padding-left: 0.5rem;
@@ -134,7 +134,7 @@
 // page specific styles
 
 .p-home {
-  .nav__header-noun {
+  .header-noun-scroll {
     display: inline;
   }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 75e18bb..0454506 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -9,6 +9,7 @@
 @import "components/pagination";
 @import "components/footer";
 @import "components/page";
+@import "components/header-noun-scroll";
 
 @import "pages/home";
 @import "pages/post-page";
diff --git a/includes/header-noun-scroll.html b/includes/header-noun-scroll.html
new file mode 100644
index 0000000..89b6364
--- /dev/null
+++ b/includes/header-noun-scroll.html
@@ -0,0 +1,13 @@
+<span class="header-noun-scroll"><span>is a</span>
+  <div class="header-noun-scroll__wrapper">
+    <div class="header-noun-scroll__list">
+      <span>Shop</span>
+      <span>Gallery</span>
+      <span>Archive</span>
+      <span>Institute</span>
+      <span>Company</span>
+      <span>Project</span>
+      <span>Group</span>
+    </div>
+  </div>
+</span>
\ No newline at end of file
diff --git a/includes/navigation.html b/includes/navigation.html
index 27e2b19..302e1e5 100644
--- a/includes/navigation.html
+++ b/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><span class="nav__header-noun"> is a archive</span></h1>
+      <h1 class="nav__header-title"><a href="/">ulises</a>{% include "header-noun-scroll.html" %}</h1>
     </div>
 
     <div class="nav__links">