hovering over projects activates hover class on type

3 files changed, 31 insertions, 15 deletions

diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 31b10b7..e1d032a 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -177,6 +177,28 @@ environment.ready = function(){
       }, 100)
     }, 500)
   })
+
+
+  $("#scene_container").click(function(e){
+    if ( $("body").hasClass("menuActive") ) {
+      return
+    }
+    else {
+      toggle_menu()
+    }
+  })
+  $(document).on("mouseenter", ".project", function(){
+    var type = $(this).data("type")
+    $(".entry").addClass("hover")
+    $(this).addClass("hover")
+    $(".cat[data-type=" + type + "]").addClass("hover")
+  })
+  $(document).on("mouseleave", ".project", function(){
+    var type = $(this).data("type")
+    $(".entry").removeClass("hover")
+    $(this).removeClass("hover")
+    $(".cat[data-type=" + type + "]").removeClass("hover")
+  })
 }
 
 
@@ -262,16 +284,6 @@ function build_scene () {
 	
 	scene.update()
 	environment.update = environment.updateOnReady
-
-  $("#scene_container").click(function(e){
-    if ( $("body").hasClass("menuActive") ) {
-      return
-    }
-    else {
-      toggle_menu()
-    }
-  })
-
 }
 
 var entry_open_time = 0;
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index 28d0013..71d8e8f 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -296,6 +296,7 @@ nav a {
 	color:black;
 }
 
+.desktop nav .cat.hover,
 .desktop nav .cat:hover {
 	cursor:pointer;
 	background:#eee;
@@ -742,6 +743,9 @@ nav .sub.active a {
 .desktop .ready .project:hover {
 	opacity: 1.0;
 }
+.entry.hover .project { opacity: 0.5 }
+.entry.hover .project.hover { opacity: 1.0 }
+
 .project img {
 	width: 100%;
 }
diff --git a/site/templates/index.liquid b/site/templates/index.liquid
index 298ec0d..c5891a1 100644
--- a/site/templates/index.liquid
+++ b/site/templates/index.liquid
@@ -85,25 +85,25 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
 <nav>
 	<div class="top">
 		<img src="assets/images/2H_WORDMARK.png" class="toplogo">
-		<div class="cat">retail</div>
+		<div class="cat" data-type="retail">retail</div>
 		<div class="sub" data-type="retail">
 		  {% for project in retails %}
         <a href="#" data-type="retail" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>
       {% endfor %}
 		</div>
-		<div class="cat">advertising</div>
+		<div class="cat" data-type="advertising">advertising</div>
 		<div class="sub" data-type="advertising">
 		  {% for project in advertisings %}
         <a href="#" data-type="advertising" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>
       {% endfor %}
 		</div>
-		<div class="cat">experiential</div>
-		<div class="sub" data-type="experiental">
+		<div class="cat" data-type="experiential">experiential</div>
+		<div class="sub" data-type="experiential">
 		  {% for project in experientials %}
         <a href="#" data-type="experiential" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>
       {% endfor %}
 		</div>
-		<div class="cat">content</div>
+		<div class="cat" data-type="content">content</div>
 		<div class="sub" data-type="content">
 		  {% for project in contents %}
         <a href="#" data-type="content" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>