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 @@
+is a
+