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

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

master
Stephanie Vilayphiou 6 years ago
parent
814d6fc01b
commit
d36fa5dcfd
2 changed files with 62 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      css/stylesheet.css
  2. 32
      index.html

45
css/stylesheet.css
View File

@ -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;
bottom: 0;
left: 61%;
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,15 +144,30 @@ div.controlpoint ul {
column-count: 2;
}
.practical {
column-count: 2;
.practical-infos {
display: flex;
flex-wrap: wrap;
margin-top: 1em;
}
.practical p {
display: inline-block;
margin: 0;
.programme p {
width: 50%;
float: left;
}
.participation,
.hosting {
flex-basis: 50%;
box-sizing: border-box;
}
.participation {
padding-right: 0.5em;
}
.hosting {
padding-left: 0.5em;
}
#rotterdam{
color:#0054ff;

32
index.html
View File

@ -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://gitlab.com/relearn" target='_blank'>Relearn’s gitlab repository </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://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

Write Preview
Loading…
Cancel
Save