From 47e12e108099d9c4ab61e98a5145869985adc53f Mon Sep 17 00:00:00 2001
From: lowrussia <s@silviolorusso.com>
Date: Mon, 13 May 2019 21:09:25 +0200
Subject: [PATCH] slwr: smooth slider scroll, mobile style

---
 css/stylesheet.css             | 17 +++++++++++++++++
 index2.html => d3-example.html |  0
 index.html                     |  6 +++---
 3 files changed, 20 insertions(+), 3 deletions(-)
 rename index2.html => d3-example.html (100%)

diff --git a/css/stylesheet.css b/css/stylesheet.css
index 7417ddd..a1dd738 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -51,3 +51,20 @@ div.controlpoint{
 	height: 100vh;
 	overflow: auto;
 }
+
+/*--- MOBILE ---*/
+@media only screen
+and (max-width : 1024px)  {
+
+	div#sliders {
+		position: absolute;
+		top: -50px;
+		left: -50px;
+		transform: scale(0.5);
+	}
+
+	#curve {
+		padding-top: 200px;
+	}
+
+}
diff --git a/index2.html b/d3-example.html
similarity index 100%
rename from index2.html
rename to d3-example.html
diff --git a/index.html b/index.html
index c4ff47f..c71a7b5 100644
--- a/index.html
+++ b/index.html
@@ -55,12 +55,12 @@
     $(document).ready(function() {
       $('#slider').bind('slide.pathslider', function(event, slider){
         var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
-        $('#curve').scrollTop(scrollPos);
+        $('#curve').stop().animate({scrollTop: scrollPos}, 200);
       });
 
       $('#slider2').bind('slide.pathslider', function(event, slider){
         var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
-        $('#curve').scrollTop(scrollPos);
+        $('#curve').stop().animate({scrollTop: scrollPos}, 200);
       });
 
     });
@@ -89,7 +89,7 @@
             Varia, Rotterdam</p><br>
 
             <p>For the Rotterdam control point on the Relearn curve, we propose to together attend to a <strong>subject zone</strong> (<strong>*</strong>) where different digital network practices intersect. This subject zone can morph into multiple directions throughout the session. Our specific interest is in how <strong>publishing formats</strong> (<strong>**</strong>) operate with/on/through this zone.</p>
-            
+
             <p><strong>*</strong> There are many questions in the air when we start to speak about digital infrastructures, hosters, servers, services, networks and their technical realities. Instead of picking one and diving deeper, we thought it would be more interesting to present a range and explore different vocabularies, protocols, technologies, infrastructures. We invite you to join Relearn to stretch this zone, starting from or moving towards:</p>
 
             <ul>