Ethan Sherbondy avatar Ethan Sherbondy committed 4386743

box shadow magic.

Comments (0)

Files changed (4)

         </div>
 
         <div id="contact" class="left">
-            <h2 class="left">Get in touch</h2>
+            <h2 class="left box_shadow">Get in touch</h2>
             {% if status %}
                 {% if status.location %}
                     <p id="location"><strong>Current Location:</strong> {{ status.location }}</p>
         </div>
 
         <div id="lastfm" class="right">
-            <h2 class="right">
+            <h2 class="right box_shadow">
                 Listening on <a href="http://www.last.fm/user/sherbondy">last.fm</a>
             </h2>
 
         </div>
 
         <div id="flickr">
-            <h2 class="left">
+            <h2 class="left box_shadow">
                 Photos from <a href="http://www.flickr.com/photos/esherbondy">flick<em>r</em></a>
             </h2>
 
     }
 
 });
+
+// handle the left/right and forward/back tilt.
+// values range from -1.0 to 1.0
+handleTilt = function(lr, fb){
+  var shadow_amount = (lr*32)+'px '+(fb*32)+'px 16px rgba(0,0,0,0.75)';
+  $('.box_shadow').each(function(i){
+    $(this).css('box-shadow', shadow_amount);
+  });
+}
+
+
+if (window.DeviceOrientationEvent){
+  window.addEventListener('deviceorientation', function(e){
+    var tiltLR = e.gamma/90;
+    var tiltFB = e.beta/90;
+
+    handleTilt(tiltLR, tiltFB);
+  });
+} else if (window.OrientationEvent){
+  window.addEventListener('MozOrientation', function(e){
+    var tiltLR = e.x;
+    var tiltFB = e.y;
+
+    handleTilt(tiltLR, tiltFB);
+  });
+}
 .left{float:left}
 .right{float:right}
 .hidden{display:none}
-.box_shadow,h2{box-shadow:0 0 16px rgba(0,0,0,0.50)}
+.box_shadow{box-shadow:0 0 16px rgba(0,0,0,0.75)}
 .round_btn{color:#000;text-shadow:0 1px 1px #fff;padding:16px;font-weight:bold;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;-webkit-transition:background .5s linear}
 .top:hover,.top:focus,#images li a:hover,#images li a:focus{-webkit-transform:rotate(0) !important;-moz-transform:rotate(0) !important;-o-transform:rotate(0) !important;transform:rotate(0) !important}
 #description{width:448px;min-height:368px;margin-bottom:32px}

static/style.styl

 .hidden
   display: none
 
-.box_shadow, h2
-  box-shadow: 0px 0px 16px rgba(0,0,0, 0.5)
+.box_shadow
+  box-shadow: 0px 0px 16px rgba(0,0,0, 0.75)
 
 .round_btn
   color: rgb(0,0,0)
   top: 2px
 
 .linky:active img
-  box-shadow: 0px 0px 32px rgb(0,0,0)
+  box-shadow: 0px 0px 32px rgb(0,0,0, 0.75)
 
 #picture img
   float: right
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.