Merge pull request #13 from hello-ulises/home-links

home links and proto scroll

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);
+  }
+}

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;
   }
 }

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";

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>

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">