3 files changed, 20 insertions, 3 deletions
diff --git a/studio-susie/public/assets/css/css.css b/studio-susie/public/assets/css/css.css
index 73163be..a1cfe52 100644
--- a/studio-susie/public/assets/css/css.css
+++ b/studio-susie/public/assets/css/css.css
@@ -33,11 +33,17 @@ h1, h2 {
 .section {
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: top left;
+  background-position: 0% 0%;
+  transition: all 0.6s cubic-bezier(0,0,0,1);
 }
 .mobile .section {
   background-size: contain;
 }
+.section.zoomed {
+  transform: scale(0.8);
+  background-size: contain;
+  background-position: 50% 50%;
+}
 .plaque {
   position: absolute;
   bottom: 20px;
diff --git a/studio-susie/public/assets/js/app.js b/studio-susie/public/assets/js/app.js
index 3c2fd37..74e4b40 100644
--- a/studio-susie/public/assets/js/app.js
+++ b/studio-susie/public/assets/js/app.js
@@ -68,15 +68,20 @@ var app = (function() {
   }
   
   app.fullpage = function(){
+    $("#fullpage .section").on("click", function(){
+      $(this).toggleClass("zoomed")
+    })
     $('#fullpage').fullpage({
       css3: true,
       scrollingSpeed: 800,
       continuousVertical: false,
-      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
+      afterLoad: function(anchorLink, index, slideAnchor, slideIndex){
 //         app.views.painting.show_slide(index)
+        $(".zoomed").removeClass("zoomed")
       },
-      onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
+      onLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
 //         app.views.painting.hide_slide()
+        $(".zoomed").removeClass("zoomed")
       }
     })
   }
diff --git a/studio-susie/public/assets/js/lib/nav/DesktopNav.js b/studio-susie/public/assets/js/lib/nav/DesktopNav.js
index 5d00c23..0503b4a 100644
--- a/studio-susie/public/assets/js/lib/nav/DesktopNav.js
+++ b/studio-susie/public/assets/js/lib/nav/DesktopNav.js
@@ -4,6 +4,7 @@ var NavView = View.extend({
 
   events: {
     "click .pages a": "go",
+    "click .pages > span": "go_span",
   },
 
 	initialize: function(){
@@ -19,6 +20,7 @@ var NavView = View.extend({
 
   go: function(e){
     e.preventDefault()
+    e.stopPropagation()
     var href = $(e.currentTarget).attr("href")
     app.router.go(href)
     console.log(href)
@@ -28,6 +30,10 @@ var NavView = View.extend({
     this.after_go()
   },
   
+  go_span: function(e){
+    $("a", e.currentTarget).trigger("click")
+  },
+  
   after_go: function(){  
   },