From 65b0654f6c387a45e558be9d160ad1ef7b66e114 Mon Sep 17 00:00:00 2001
From: Kload <kload@kload.fr>
Date: Wed, 25 Sep 2013 03:07:06 +0200
Subject: [PATCH] Use CSS transitions

---
 css/style.css |  2 +-
 js/app.js     | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 20d57075..27455321 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,7 +38,7 @@ body h5 {
     float:left;
     height: 100%;
     max-width: 750px;
-    width: 49%;
+    width: 50%;
     height: 100%;
     padding: 5px;
 }
diff --git a/js/app.js b/js/app.js
index 9609bff2..10090425 100644
--- a/js/app.js
+++ b/js/app.js
@@ -96,7 +96,7 @@ app = Sammy('#main', function (sam) {
                 });
             }
 
-            blockSize = $('#slider').innerWidth();
+            blockSize = $('#slider').innerWidth()-20;
 
             if (store.get('slide') == 'back') {
                 if ($('#slideBack').is(':visible')) $('#slideBack').hide();
@@ -111,7 +111,7 @@ app = Sammy('#main', function (sam) {
                 $('#slider-container').removeClass('move').css('margin-left', '0px');
                 $('#slideBack').show().html($('#main').html());
                 leSwap();
-                $('#slider-container').addClass('move').css('margin-left', '-'+ blockSize +'px');
+                $('#slider-container').addClass('move').css('margin-left', '-'+ ($('#slider').innerWidth()-10) +'px');
 
                 store.clear('slide');
             } else {
@@ -335,9 +335,10 @@ app = Sammy('#main', function (sam) {
  */
 $(document).ready(function () {
     app.run('#/');
-    $('#slider-container').width(2*$('#slider').innerWidth() +'px');
+        $('.block').width($('#slider').innerWidth()-20);
+    $('#slider-container').width(3*$('#slider').innerWidth() +'px');
     $(window).resize(function() {
-        $('#slideBack').css('margin-left', '-'+ $('#slider').innerWidth() +'px');
-        $('#slider-container').width(2*$('#slider').innerWidth() +'px');
+        $('.block').width($('#slider').innerWidth()-20);
+        $('#slider-container').width(3*$('#slider').innerWidth() +'px');
     });
 });