Finish homepage iterations

server/files/javascript/home.js

@@ -83,52 +83,81 @@ semantic.home.ready = function() {
     })
   ;
 
-  $('body')
-    .visibility({
-      offset: -1,
-      once: false,
-      continuous: false,
-      onTopPassed: function() {
-        $('.following.bar')
-          .removeClass('dark')
-          .addClass('light fixed')
-          .find('.menu')
-            .removeClass('inverted')
-        ;
-        requestAnimationFrame(function() {
-          $('.following .additional.item')
-            .transition('scale in', 750)
+  if($(window).width() > 768) {
+    $('body')
+      .visibility({
+        offset: -1,
+        once: false,
+        continuous: false,
+        onTopPassed: function() {
+          $('.following.bar')
+            .removeClass('dark')
+            .addClass('light fixed')
+            .find('.menu')
+              .removeClass('inverted')
           ;
-        });
-      },
-      onTopPassedReverse: function() {
-        $('.following.bar')
-          .removeClass('light fixed')
-          .addClass('dark')
-          .find('.menu')
-            .addClass('inverted')
-            .find('.additional.item')
-              .transition('hide')
-        ;
-      }
-    })
-  ;
+          requestAnimationFrame(function() {
+            $('.following .additional.item')
+              .transition('scale in', 750)
+            ;
+          });
+        },
+        onTopPassedReverse: function() {
+          $('.following.bar')
+            .removeClass('light fixed animated')
+            .addClass('dark')
+            .find('.menu')
+              .addClass('inverted')
+              .find('.additional.item')
+                .transition('hide')
+          ;
+        }
+      })
+    ;
+    $('.vertical.stripe').eq(0)
+      .visibility({
+        offset: 70,
+        once: false,
+        onTopPassed: function() {
+          $('.following.bar')
+            .addClass('animated')
+          ;
+        }
+      })
+    ;
+    /*  Inverts
+   $('.vertical.stripe').eq(0)
+      .visibility({
+        offset: 70,
+        once: false,
+        onTopPassed: function() {
+          $('.following.bar')
+            .addClass('animated dark')
+            .find('.menu')
+              .addClass('inverted')
+          ;
+        },
+        onTopPassedReverse: function() {
+          $('.following.bar')
+            .removeClass('animated dark')
+            .addClass('light')
+            .find('.menu')
+              .removeClass('inverted')
+          ;
+        }
+      })
+    ;*/
+  }
   $('.additional.item')
     .popup({
+      delay: {
+        show: 200,
+        hide: 50
+      },
+      variation: 'inverted',
       position: 'bottom center'
     })
   ;
-  $('.vertical.stripe').eq(0)
-    .visibility({
-      offset: 70,
-      once: false,
-      onTopPassed: function() {
-        $('.following.bar')
-          .addClass('animated')
-        ;
-      }
-    })
-  ;
 
   $('.following.bar .network')
     .find('.item')

server/files/stylesheets/home.css

@@ -622,6 +622,9 @@
 #example.index .following.bar .additional.item {
   display: none;
 }
+#example.index .following.bar span.additional.item {
+  cursor: default;
+}
 #example.index .following.bar .network.menu {
   margin-top: 0px;
   font-weight: bold;
@@ -629,6 +632,9 @@
 #example.index .following.bar .network.menu .view-ui {
   margin-right: 2em;
 }
+#example.index .fixed.following.bar .network.menu .view-ui {
+  color: #00B5AD;
+}
 #example.index .following .logo {
   float: left;
   width: 35px;
@@ -663,7 +669,8 @@
 }
 #example.index .feature.stripe .icon.header .icon.image {
   width: auto;
-  height: 50px;
+  height: 65px;
+  margin-bottom: 20px;
 }
 #example.index .stripe .icon.header .icon.image {
   width: 64px;
@@ -854,11 +861,8 @@
     margin-left: 2em;
     margin-right: 2em;
   }
-  #example.index .following.bar {
-    top: 37px;
-  }
-  #example.index .following.bar .logo {
-    margin-left: 75px;
+  #example.index .following.bar .network.menu .view-ui {
+    margin-right: 0.75em;
   }
 }