Compare commits

...

10 Commits

  1. 40
      css/stylesheet.css
  2. 2
      css/warped.css
  3. 26
      index.html

40
css/stylesheet.css

@ -29,6 +29,7 @@ body{
color:purple; color:purple;
background-color:#ff4d4d33; background-color:#ff4d4d33;
font-family: 'AvaraBold'; font-family: 'AvaraBold';
overflow: hidden;
} }
hr{ hr{
border:0; border:0;
@ -118,6 +119,26 @@ div#slider{
background: transparent; background: transparent;
} }
#controlpoints li {
position: absolute;
z-index: 10000;
list-style-type: none;
width: 10em;
line-height: 1.3em;
}
#controlpoints li#cp-paris {
top: 220px;
left: 20px;
}
#controlpoints li#cp-brussels {
top: 0px;
left: 220px;
}
#controlpoints li#cp-rotterdam {
top: 140px;
right: 20px;
}
#warped { #warped {
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
@ -140,7 +161,7 @@ div#relearn-infos ul {
#curve { #curve {
width: 55%; width: 55%;
padding : 1em 2em; padding : 1em 2em;
height: 100vh; height: 87vh;
overflow: auto; overflow: auto;
padding-bottom: 4em; padding-bottom: 4em;
} }
@ -262,6 +283,10 @@ div.controlpoint .programme ul {
color: teal; color: teal;
} }
/*--- PARIS ---*/
#paris {
color: tomato;
}
/*--- MOBILE ---*/ /*--- MOBILE ---*/
@media only screen @media only screen
@ -318,4 +343,17 @@ and (max-width : 1024px) {
margin-top: 1em; margin-top: 1em;
} }
#controlpoints li#cp-paris {
top: 120px;
left: 40px;
}
#controlpoints li#cp-brussels {
top: 10px;
left: 20px;
}
#controlpoints li#cp-rotterdam {
top: 10px;
right: -40px;
}
} }

2
css/warped.css

@ -54,7 +54,7 @@
#warped .w11 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform: #warped .w11 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform:
rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad); rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad);
width: 23px; height: 43px; left: 501.17px; top: 120.42px;} width: 23px; height: 43px; left: 506.17px; top: 115.42px;}
#warped .w12 {-moz-transform: rotate(-7.39rad);-webkit-transform: rotate(-7.39rad);-o-transform: #warped .w12 {-moz-transform: rotate(-7.39rad);-webkit-transform: rotate(-7.39rad);-o-transform:
rotate(-7.39rad);-ms-transform: rotate(-7.39rad); transform: rotate(-7.39rad); rotate(-7.39rad);-ms-transform: rotate(-7.39rad); transform: rotate(-7.39rad);

26
index.html

@ -13,6 +13,11 @@
<body> <body>
<!-- The curved slider --> <!-- The curved slider -->
<div id="sliders"> <div id="sliders">
<ul id='controlpoints'>
<li id="cp-rotterdam">Rotterdam, 07→09/06</li>
<li id="cp-brussels">Brussels, 21→22/06</li>
<li id="cp-paris">Paris, 06→08/09</li>
</ul>
<div id='warped'> <div id='warped'>
<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> <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>
@ -158,9 +163,9 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<dl class='summary'> <dl class='summary'>
<dt>Date</dt> <dd>21<sup>st</sup>–22<sup>nd</sup> June 2019</dd> <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>Location</dt> <dd>Hacktiris - Rue Paul Devauxstraat 3, Brussels, Belgium</dd>
<dt>Initiator</dt> <dd><a href="http://osp.kitchen/" target='_blank'>OSP</a></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> <dt>Contact</dt> <dd><a href="mailto:&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;&subject=[BXL] ">&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;</a></dd>
</dl> </dl>
<hr /> <hr />
@ -210,7 +215,7 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<div class='participation'> <div class='participation'>
<h3>Participation</h3> <h3>Participation</h3>
<p>Participation is free of charge. 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>Participation is free of charge. 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>15<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>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> </p>
</div> </div>
@ -224,6 +229,18 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
</div> </div>
</div> <!-- END BRUSSELS CONTROL POINT --> </div> <!-- END BRUSSELS CONTROL POINT -->
<div id="paris" class="controlpoint">
<h2>·Paris</h2>
<dl class='summary'>
<dt>Date</dt> <dd>06–08 September 2019</dd>
<dt>Location</dt> <dd>La Générale - 14 Avenue Parmentier, 75011 Paris, France</dd>
<dt>Initiators</dt> <dd><a href="http://www.sakasama.net/" target='_blank'>Anne Laforet</a> and <a href="https://juhel-quentin.fr/" target='_blank'>Quentin Juhel</a></dd>
<dt>Contact</dt> <dd><a href="mailto:&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;&subject=[PARIS] ">&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;</a></dd>
</dl>
</div>
<div id="relearn-infos"> <div id="relearn-infos">
<h3>Resources &amp; contact</h3> <h3>Resources &amp; contact</h3>
<ul> <ul>
@ -239,7 +256,8 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<script> <script>
jQuery(function($){ jQuery(function($){
$("#slider").pathslider({ $("#slider").pathslider({
points : [250,50,-150,100,-50,-400,250,250], //points : [250,50,-150,100,-50,-400,250,250],
points : [350,100,-750,350,400,-500,150,200],
value : 0, value : 0,
rotateGrip : true, rotateGrip : true,
tolerance : 3, tolerance : 3,

Loading…
Cancel
Save