a start of brussels session

css/stylesheet.css

@@ -134,7 +134,7 @@ div#relearn-infos ul {
 div.controlpoint{
 	max-width: 800px;
     margin: 1em 0;
-	float: left;
+    padding: 1em 0;
 
     border-top: 1px solid black;
     border-bottom: 1px solid black;
@@ -150,10 +150,23 @@ div.controlpoint ul {
 	margin-top: 1em;
 }
 
+.programme div.flex {
+   float: left;
+   width: 50%;
+}
+
 .programme p {
     width: 50%;
     float: left;
 }
+.programme div.flex p {
+    width: 100%;
+    float: none;
+}
+
+div.controlpoint .programme ul {
+    column-count: 1;
+}
 
 .participation,
 .hosting {
@@ -169,11 +182,18 @@ div.controlpoint ul {
 }
 
 
+/*--- ROTTERDAM ---*/
 #rotterdam{
 	color:#0054ff;
 }
 #rotterdam li{
 	list-style: none;
+    text-indent: -34px;
+}
+
+/*--- BRUSSELS ---*/
+#brussels {
+    color: teal;
 }
 
 

index.html

@@ -147,6 +147,65 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
 
             </div>
 
+        </div> <!-- END OF ROTTERDAM CONTROL POINT -->
+
+
+        <div id="brussels" class="controlpoint">
+            <h2>·Brussels</h2>
+            
+
+            <dl>
+				<dt>Date</dt> <dd>21<sup>st</sup>–22<sup>nd</sup> June 2019</dd>
+				<dt>Location</dt> <dd>Hacktiris - Rue Paul Devauxstraat 5, Brussels, Belgium</dd>
+				<dt>Initiator</dt> <dd><a href="http://osp.kitchen/" target='_blank'>OSP</a></dd>
+				<dt>Contact</dt> <dd><a href="mailto:&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;">&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;</a></dd>
+			</dl>
+
+            <hr />
+
+            <p>
+            Exploring computed layout tools.
+            </p>
+
+            <hr />
+
+			<div class='practical-infos'>
+
+            <div class='programme'>
+                <h3>Programme</h3>
+
+                <div class='flex'>
+                <p><u>Friday 21<sup>st</sup> June</u><br>
+                    10:00–18:00
+                </p>
+                <ul>
+                    <li>Short introduction of tools to experiment with: <a href='https://xxyxyz.org/' target='_blank'>Flat</a>, <a href='http://sile-typesetter.org/' target='_blank'>Sile</a>, <a href='https://www.pagedmedia.org/paged-js/' target='_blank'>paged.js</a>…</li>
+                    <li>Choose your tool and have fun with it!</li>
+                </ul>
+                </div>
+
+                <div class='flex'>
+                <p><u>Saturday 22<sup>nd</sup> June</u><br>
+                    10:00–18:00</p>
+                <ul>
+                    <li>Continuation of the exploration</li>
+                    <li>Show/tell/criticize</li>
+                </ul>
+                </div>
+            </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:&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;">&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;</a> with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the <strong>10<sup>th</sup> of June</strong>.</p>
+            <p>Our <em>capacities</em> allow us to have a group of 12 relearners. Our preference goes out to people that can join the whole session (Friday, Saturday). 
+			</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>
 			</div>
 
     </div>
@@ -156,7 +215,7 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
     jQuery(function($){
         $("#slider").pathslider({
             points     : [250,50,-150,100,-50,-400,250,250],
-            value      : 49,
+            value      : 0,
             rotateGrip : true,
             tolerance  : 3,
             range      : 30,
@@ -176,12 +235,12 @@ 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').scrollTop(scrollPos);
           $('#curve').stop().animate({scrollTop: scrollPos}, 200);
       });
       $('#curve').scroll(function() {
-          offset = ($('#curve').scrollTop() / $(document).height()) * 33;
+          curve = document.querySelectorAll('#curve')[0]
-          console.log(offset);
+          offset = curve.scrollTop / (curve.scrollHeight - curve.clientHeight) * 100;
           $('#slider').getpathslider().setSlider(offset);
       });