subtle changes in the layout of the text + attempt at making a loop with just one path + syncing the bézier when we scroll the text in a more traditional way

css/stylesheet.css

@@ -30,6 +30,7 @@ body{
 hr{
 	border:0;
 	border-bottom:1px dotted;
+    margin-bottom: 1em;
 }
 
 h1{
@@ -38,7 +39,7 @@ h1{
 
 h3 {
 	font-size: 1em;
-	margin: 0;
+	margin-bottom: 0;
 }
 
 dl {
@@ -49,6 +50,14 @@ dt {
     /*text-decoration: underline;*/
 }
 
+p {
+    margin: 0;
+}
+
+p + p {
+    margin-top: 1em;
+}
+
 sup {
 	line-height: 0;
 }
@@ -64,8 +73,8 @@ div#sliders{
 	position: fixed;
 	width: 500px;
 	top:60px;
-	right:100px;
+	left: 61%;
-    bottom: 0;
+    bottom: 1em;
 }
 div#slider{
 	float: left;
@@ -96,7 +105,7 @@ div#slider{
 div#relearn-infos {
     position: absolute;
     bottom: 0;
-    right: 0;
+    left: 2em;
 }
 div#relearn-infos ul {
 	margin: 0;
@@ -105,7 +114,7 @@ div#relearn-infos ul {
 /* --- control points ---*/
 #curve {
     width: 55%;
-	padding : 0 1em;
+	padding : 1em 2em;
 	height: 100vh;
 	overflow: auto;
 }
@@ -124,6 +133,7 @@ div#relearn-infos ul {
 
 div.controlpoint{
 	max-width: 800px;
+    margin: 1em 0;
 	float: left;
 
     border-top: 1px solid black;
@@ -134,16 +144,31 @@ div.controlpoint ul {
 	column-count: 2;
 }
 
-.practical {
+.practical-infos {
-	column-count: 2;
+    display: flex;
+    flex-wrap: wrap;
 	margin-top: 1em;
 }
 
-.practical p {
+.programme p {
-	display: inline-block;
+    width: 50%;
-	margin: 0;
+    float: left;
 }
 
+.participation,
+.hosting {
+    flex-basis: 50%;
+    box-sizing: border-box;
+}
+.participation {
+    padding-right: 0.5em;
+}
+
+.hosting {
+    padding-left: 0.5em;
+}
+
+
 #rotterdam{
 	color:#0054ff;
 }

index.html

@@ -16,13 +16,13 @@
                      <span class='w0'>R</span><span class='w1'>e</span><span class='w2'>l</span><span class='w3'>e</span><span class='w4'>a</span><span class='w5'>r</span><span class='w6'>n</span><span class='w7'> </span><span class='w8'> </span><span class='w9'>2</span><span class='w10'>0</span><span class='w11'>1</span><span class='w12'>9</span>
               </div>
         <div id="slider"></div>
-        <div id="slider2"></div>
+        <!--<div id="slider2"></div>-->
 		<div id="relearn-infos">
             <h3>Resources &amp; contact</h3>
 			<ul>
-				<li><a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/relearn" target='_blank'>subscribe to the Relearn mailinglist </a></li>
+				<li><a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/relearn" target='_blank'>Subscribe to the Relearn mailinglist </a></li>
-				<li><a href="https://gitlab.com/relearn" target='_blank'>Relearn’s gitlab repository </a></li>
 				<li><a href="https://webchat.freenode.net/" target='_blank'>IRC channel: #relearn on Freenode</a></li>
+				<li><a href="https://gitlab.com/relearn" target='_blank'>Relearn gitlab repository </a></li>
 				<li><a href="https://gallery.constantvzw.org/index.php/search?album=1&amp;q=relearn" target='_blank'>Photographs of previous Relearn editions</a></li>
 			</ul>
 		</div>
@@ -49,6 +49,7 @@ Free, Libre and Open Source Software plays a fundamental role at Relearn, as it
 		<p>
 		</p>
 
+        <hr>
 
         <p>Relearn 2019 is a curve, transversing multiple times and spaces.</p>
         <p>
@@ -116,25 +117,34 @@ people joining a succession of events but still share commonalities.
 
             <hr />
 
-			<div class='practical'>
+			<div class='practical-infos'>
 
+            <div class='programme'>
                 <h3>Programme</h3>
 
-            <p><em>Friday 7<sup>th</sup> June, 20:00 – 22:00</em><br>(ongoing, no fixed starting time)<br>
+                <p><u>Friday 7<sup>th</sup> June</u><br>
+                    20:00–22:00 (ongoing, no fixed starting time)<br>
                 Relearn public evening program: embed yourself into Relearn</p>
-            <p><em>Saturday–Sunday, 8–9<sup>th</sup> June 10:00 – 18:00</em><br>
+                <p><u>Saturday–Sunday, 8–9<sup>th</sup> June</u><br>
+                    10:00–18:00<br>
                 Relearn sub-zone-trajectories</p>
+            </div>
 
+            <div class='participation'>
 			<h3>Participation</h3>
 
             <p>If you would like to join this Relearn session, please send an email to <a href="mailto:&#105;&#110;&#102;&#111;&#064;&#118;&#097;&#114;&#105;&#097;&#046;&#122;&#111;&#110;&#101;">&#105;&#110;&#102;&#111;&#064;&#118;&#097;&#114;&#105;&#097;&#046;&#122;&#111;&#110;&#101;</a> with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the <strong>26<sup>th</sup> of May</strong>.</p>
             <p>Our <em>capacities</em> allow us to have a group of 30 relearners. Our preference goes out to people that can join the whole session (Friday evening, Saturday and Sunday). 
 			</p>
+            <p>If you would like to join us only on the Friday evening, there is no need to subscribe, just come over ! :)</p>
+            </div>
 
+            <div class='hosting'>
 			<h3>Hosting</h3>
 			<p>
 We will take care of a <em>daily vegetarian lunch</em> (please let us know about allergies or other dietary preferences). Following a tradition from previous years, we will arrange a <em>hosting network</em> in the city and find a place to stay for everyone. Please mention in the email if you need to be hosted or could host one or more relearners in your house.</p>
-            <p>If you would like to join us only on the Friday evening, there is no need to subscribe, just come over! :)</p>
+			</div>
+
             </div>
 
         </div>
@@ -145,7 +155,7 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
     <script>
     jQuery(function($){
         $("#slider").pathslider({
-            points     : [50,10,-150,0,150,200,300,100],
+            points     : [250,50,-150,100,-50,-400,250,250],
             value      : 49,
             rotateGrip : true,
             tolerance  : 3,
@@ -166,8 +176,14 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
     $(document).ready(function() {
       $('#slider').bind('slide.pathslider', function(event, slider){
         var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
+          console.log(scrollPos);
         $('#curve').stop().animate({scrollTop: scrollPos}, 200);
       });
+      $('#curve').scroll(function() {
+          offset = ($('#curve').scrollTop() / $(document).height()) * 33;
+          console.log(offset);
+          $('#slider').getpathslider().setSlider(offset);
+      });
 
       $('#slider2').bind('slide.pathslider', function(event, slider){
         var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100