Merge branch 'earthlapse-menu' into earthlapse-stories

Author: Lidaron

earthlapse-hci/modes-menu.css

@@ -1,25 +1,27 @@
 .earthlapse-modes-menu-container {
     text-align: left;
-    padding: 0 0 0 20%;
+    padding: 0 20%;
 }
 
 .earthlapse-modes-menu-container h1 {
-    margin: 2em 0 1em 0;
+    margin: 1.6em 0 0.8em 0;
     line-height: 1;
+    font-size: 84px;
     text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
 }
 
 .earthlapse-modes-menu-container h2 {
-    margin: 0 0 0.5em -100px;
+    margin: 0 0 0.6em -60px;
     font-weight: 400;
-    padding: 0 0 0 100px;
-    font-size: 60px;
+    padding: 0 0 0 60px;
+    font-size: 48px;
+    line-height: 1;
     text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
 }
 
 .earthlapse-modes-menu-section {
-    margin: 5em 0;
-    padding: 0 0 0 80px;
+    margin: 3.4em 0;
+    padding: 0 0 0 60px;
     position: relative;
 }
 
@@ -30,59 +32,72 @@
     top: 0;
     background: url(menu-section-arrow.png) no-repeat left;
     background-size: contain;
-    height: 80px;
-    width: 80px;
+    height: 64px;
+    width: 56px;
 }
 
 .earthlapse-modes-menu-section-stories::before {
-    background-position: 0 7px;
+    background-position: 0 0;
 }
 
 .earthlapse-modes-menu-section-explore::before {
-    background-position: 0 23px;
+    background-position: 0 16px;
 }
 
 /* Stories Section
 -------------------------------------------------- */
 
-.earthlapse-modes-menu-container div.img {
-    margin: 0 30px 30px 0;
+.earthlapse-stories-gallery {
+    display: inline-block;
+}
+
+.earthlapse-modes-menu-item {
+    margin: 0 15px 15px 0;
     float: left;
     position: relative;
+    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
 }
 
-.earthlapse-modes-menu-container div.img img {
+.earthlapse-modes-menu-item img {
     display: block;
+    width: 242px;
+    height: 187px;
 }
 
-.earthlapse-modes-menu-container div.desc {
-    padding: 15px;
+.earthlapse-modes-menu-item .desc {
+    padding: 8px;
     text-align: center;
     font-weight: 300;
-    font-size: 1.8em;
+    font-size: 22px;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0,0,0,0.65);
-    padding: 10px;
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.earthlapse-modes-menu-item.hasfocus .desc {
+    background: #ffffff;
+    color: #000000;
 }
 
 /* Explore Section
 -------------------------------------------------- */
 
-.earthlapse-modes-menu-container .earthlapse-modes-menu-explore::before {
+.earthlapse-modes-menu-explore::before {
     font-size: 36px;
     display: block;
     margin: 36px;
 }
 
-.earthlapse-modes-menu-container .earthlapse-modes-menu-explorebutton {
+.earthlapse-modes-menu-explorebutton {
     font: inherit;
-    font-size: 48px;
+    font-size: 36px;
     background: none;
-    padding: 20px 30px;
-    border: 5px solid #ffffff;
+    padding: 15px 25px;
+    border: 4px solid #ffffff;
     box-shadow: 5px 5px 15px rgba(0,0,0,0.50), 5px 5px 15px rgba(0,0,0,0.50) inset;
     text-shadow: 5px 5px 15px rgba(0,0,0,0.65);
     color: #ffffff;

earthlapse-hci/modes-menu.html

@@ -2,10 +2,22 @@
     EarthlapseUI.bind("loadedscreen", function (e) {
         if (e.mode !== "menu") { return; }
 
+        var $screen = $(".earthlapse-modes-menu-container");
+
+        // Enable focus style
+        $screen.on("mousedown", ".earthlapse-modes-menu-item, .earthlapse-modes-menu-explorebutton", function () {
+            $(this).addClass("hasfocus");
+        });
+
         // On selection of any tile, initiate the story
-        $(".earthlapse-modes-menu-container").on("click", ".earthlapse-modes-menu-item", function (e) {
-            var $item = $(this);
-            var storyId = $item.data("storyId");
+        $screen.on("mouseup", ".earthlapse-modes-menu-item", function (e) {
+            var $this = $(this);
+
+            // If this button had focus, then we should execute an action
+            if (!$this.hasClass("hasfocus")) { return; }
+            $this.removeClass("hasfocus");
+
+            var storyId = $this.data("storyId");
 
             // Make sure the story is ready to be played
             if (typeof storyId === "undefined" || storyId === null) {
@@ -18,9 +30,7 @@
         });
 
         // On selection of explore button, initiate exploration mode
-        $(".earthlapse-modes-menu-container").on("mousedown", ".earthlapse-modes-menu-explorebutton", function (e) {
-            $(this).addClass("hasfocus");
-        }).on("mouseup", ".earthlapse-modes-menu-explorebutton", function (e) {
+        $screen.on("mouseup", ".earthlapse-modes-menu-explorebutton", function (e) {
             var $this = $(this);
 
             // If this button had focus, then we should execute an action