From b449ec25c85cb3548a8bb1844b542ddd4f1a77d6 Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Sat, 8 Jul 2017 09:58:17 +0100
Subject: [PATCH] loop through faces in members header

---
 src/js/main.js          |  5 ++++-
 src/styles/_header.styl | 48 +++++++++++++++++++++++++++++++++++++----
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 64f7d72..fd58fe8 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -46,6 +46,9 @@ if(pathName == '/') {
     document.getElementById('email'));
 
   ReactDOM.render(
-    members(),
+    React.createElement('div', {}, [
+      members({key: 0}),
+      members({key: 1})
+    ]),
     document.getElementById('members'));
 }
diff --git a/src/styles/_header.styl b/src/styles/_header.styl
index ca3ee77..ecf3ec7 100644
--- a/src/styles/_header.styl
+++ b/src/styles/_header.styl
@@ -1,8 +1,10 @@
+headerHeight = 400px
+
 .header
   background url('../images/jumbo.jpg')
   background-position bottom center
   background-size cover
-  height 400px
+  height headerHeight
   overflow hidden
   position relative
   width 100%
@@ -103,20 +105,58 @@
     width 100%
     height auto
 
+@keyframes spin
+  0%
+    top 0
+  50%
+    top -(headerHeight)
+  50.0001%
+    top headerHeight
+  100%
+    top 0
+
+@keyframes spin2
+  0%
+    top (headerHeight)
+  50%
+    top 0
+  99.99999%
+    top -(headerHeight)
+  100%
+    top (headerHeight)
+
 .header__members
+  width 100%
+  height 100%
   z-index -1
   position absolute
   top 0
   left 0
-  height 100%
+
   .member
     margin 0
     border-radius 0
     width (100/18)%
 
+    @media screen and (min-width: 2000px)
+      width 5%
     @media screen and (max-width: 1200px)
       width (100/15)%
     @media screen and (max-width: 810px)
       width 10%
-    @media screen and (min-width: 2000px)
-      width 5%
+    @media screen and (max-width: 450px)
+      width 20%
+
+  .members
+    position absolute
+    overflow hidden
+    top 0
+    left 0
+    right 0
+    height headerHeight
+    animation spin 10s infinite linear
+    &:first-child
+      z-index 1
+    &:last-child
+      animation spin2 10s infinite linear
+