svilayphiou/relearn-curved-slider-webpage
1
0
Fork 0
forked from varia/relearn-curved-slider-webpage
Code Issues Pull Requests Releases Wiki Activity

a start of brussels session

Browse Source
This commit is contained in:
Stephanie Vilayphiou 2019-05-21 17:31:59 +02:00
parent d36fa5dcfd
commit 8f5d50cd6a
2 changed files with 86 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/stylesheet.css
View File

@ -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;
}

71
index.html
View File

@ -147,7 +147,66 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
</div>
</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').stop().animate({scrollTop: scrollPos}, 200);
//$('#curve').scrollTop(scrollPos);
$('#curve').stop().animate({scrollTop: scrollPos}, 200);
});
$('#curve').scroll(function() {
offset = ($('#curve').scrollTop() / $(document).height()) * 33;
console.log(offset);
curve = document.querySelectorAll('#curve')[0]
offset = curve.scrollTop / (curve.scrollHeight - curve.clientHeight) * 100;
$('#slider').getpathslider().setSlider(offset);
});