Simple footer buttons animation

OpenPurpose · Feb 8, 2014 · 6389d26 · 6389d26
1 parent 4974645
commit 6389d26
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/source/index.html.erb b/source/index.html.erb
@@ -3,7 +3,7 @@
     <ul class="sitenav__list">
       <li class="sitenav__item">
         <a href="/" class="active">
-          <img src="/images/logo.svg">
+          <img class="sitenav__logo" src="/images/logo.svg">
         </a>
       </li>
       <li class="sitenav__item">
@@ -12,7 +12,7 @@
     </ul>
     <ul class="sitenav__altlist">
       <li class="sitenav__item">
-        <a href="javascript:void(0);">Get in touch</a>
+        <a href="javascript:void(0);" class="sitenav__contact">Get in touch</a>
       </li>
     </ul>
   </nav>

diff --git a/source/stylesheets/app/components/_sitenav.scss b/source/stylesheets/app/components/_sitenav.scss
@@ -54,3 +54,7 @@
     }
   }
 }
+
+.sitenav__logo { margin-bottom: -1px; }
+
+a.sitenav__contact { color: #13c5f1; }
diff --git a/source/stylesheets/app/components/_slinks.scss b/source/stylesheets/app/components/_slinks.scss
@@ -1,3 +1,17 @@
+@include keyframes(slinks-item-pop) {
+  0% {
+    @include transform(scale(1));
+  }
+
+  50% {
+    @include transform(scale(.95));
+  }
+
+  100% {
+    @include transform(scale(1));
+  }
+}
+
 .slinks {
   margin: 0;
   padding: 0;
@@ -15,7 +29,15 @@
   margin-right: 16px;
 
   &:last-child { margin-right: 0; }
-  &:active { @include transform(translateY(1px)); }
+
+  .no-touch & {
+    @include transition(all 200ms ease);
+    &:hover { @include transform(translateY(-6px)); }
+    &:active {
+      @include transition(none);
+      @include transform(translateY(-5px));
+    }
+  }
 
   a {
     display: block;