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

changed some structural info for better legibility in current content.

master
Stephanie Vilayphiou 6 years ago
parent
fd5e581308
commit
814d6fc01b
6 changed files with 272 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      css/Avara-Black.otf
  2. BIN
      css/Avara-Bold.otf
  3. BIN
      css/Avara-BoldItalic.otf
  4. 112
      css/stylesheet.css
  5. 61
      css/warped.css
  6. 179
      index.html

BIN
css/Avara-Black.otf
View File

Binary file not shown.

BIN
css/Avara-Bold.otf
View File

Binary file not shown.

BIN
css/Avara-BoldItalic.otf
View File

Binary file not shown.

112
css/stylesheet.css
View File

@ -1,3 +1,22 @@
@font-face {
font-family: 'AvaraBold';
src: url('Avara-Bold.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AvaraBold';
src: url('Avara-BoldItalic.otf');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'AvaraBold';
src: url('Avara-Black.otf');
font-weight: bold;
font-style: normal;
}
body{ body{
position: relative; position: relative;
margin:0; margin:0;
@ -6,6 +25,7 @@ body{
line-height: 1.4; line-height: 1.4;
color:purple; color:purple;
background-color:#ff4d4d33; background-color:#ff4d4d33;
font-family: 'AvaraBold';
} }
hr{ hr{
border:0; border:0;
@ -16,27 +36,112 @@ h1{
z-index: 10; z-index: 10;
} }
h3 {
font-size: 1em;
margin: 0;
}
dl {
column-count: 2;
}
dt {
/*text-decoration: underline;*/
}
sup {
line-height: 0;
}
select {
font-size: 1em;
}
/* --- slider --- */ /* --- slider --- */
div#sliders{ div#sliders{
position: fixed; position: fixed;
width: 500px; width: 500px;
height: 400px;
top:60px; top:60px;
right:100px; right:100px;
bottom: 0;
} }
div#slider{ div#slider{
float: left; float: left;
margin:0.5em 1em 1em 0.5em; margin:0.5em 1em 1em 0.5em;
z-index: 1; z-index: 1;
position: absolute;
top:0;
left:0;
width : 100%;
height : 400px;
background: transparent;
}
#slider2 {
position: absolute;
top:0;
left:0;
width : 100%;
height : 400px;
background: transparent;
}
#warped {
position: absolute;
top: 220px;
left: -40px;
}
div#relearn-infos {
position: absolute;
bottom: 0;
right: 0;
}
div#relearn-infos ul {
margin: 0;
} }
/* --- control points ---*/ /* --- control points ---*/
#curve {
width: 55%;
padding : 0 1em;
height: 100vh;
overflow: auto;
}
#curve::-webkit-scrollbar {
width: 6px;
border-radius: 5px;
}
#curve::-webkit-scrollbar-track {
background-color: black;
}
#curve::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
background-color: lightgray;
border-radius: 5px;
}
div.controlpoint{ div.controlpoint{
max-width: 800px; max-width: 800px;
float: left; float: left;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
div.controlpoint ul {
column-count: 2;
}
.practical {
column-count: 2;
margin-top: 1em;
}
.practical p {
display: inline-block;
margin: 0;
} }
#rotterdam{ #rotterdam{
@ -46,11 +151,6 @@ div.controlpoint{
list-style: none; list-style: none;
} }
#curve {
padding : 0 1em;
height: 100vh;
overflow: auto;
}
/*--- MOBILE ---*/ /*--- MOBILE ---*/
@media only screen @media only screen

61
css/warped.css
View File

@ -0,0 +1,61 @@
#warped {position: relative; display: block; width:817.9999694824219px;
height:655.0034713745117px;}
#warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
-moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }
#warped span{font-family:'AvaraBold';font-size:46px;font-weight:regular;font-style:normal;
line-height:0.95; white-space:pre; overflow:visible; padding:0px;}
#warped .w0 {-moz-transform: rotate(-6.29rad);-webkit-transform: rotate(-6.29rad);-o-transform:
rotate(-6.29rad);-ms-transform: rotate(-6.29rad); transform: rotate(-6.29rad);
width: 31px; height: 43px; left: 129.24px; top: 58.02px;}
#warped .w1 {-moz-transform: rotate(-6.23rad);-webkit-transform: rotate(-6.23rad);-o-transform:
rotate(-6.23rad);-ms-transform: rotate(-6.23rad); transform: rotate(-6.23rad);
width: 20px; height: 43px; left: 178.6px; top: 59.06px;}
#warped .w2 {-moz-transform: rotate(-6.01rad);-webkit-transform: rotate(-6.01rad);-o-transform:
rotate(-6.01rad);-ms-transform: rotate(-6.01rad); transform: rotate(-6.01rad);
width: 13px; height: 43px; left: 217.28px; top: 64.23px;}
#warped .w3 {-moz-transform: rotate(-5.53rad);-webkit-transform: rotate(-5.53rad);-o-transform:
rotate(-5.53rad);-ms-transform: rotate(-5.53rad); transform: rotate(-5.53rad);
width: 20px; height: 43px; left: 243.79px; top: 82.1px;}
#warped .w4 {-moz-transform: rotate(-5.48rad);-webkit-transform: rotate(-5.48rad);-o-transform:
rotate(-5.48rad);-ms-transform: rotate(-5.48rad); transform: rotate(-5.48rad);
width: 20px; height: 43px; left: 270.77px; top: 110.44px;}
#warped .w5 {-moz-transform: rotate(-5.56rad);-webkit-transform: rotate(-5.56rad);-o-transform:
rotate(-5.56rad);-ms-transform: rotate(-5.56rad); transform: rotate(-5.56rad);
width: 16px; height: 43px; left: 299.48px; top: 136.24px;}
#warped .w6 {-moz-transform: rotate(-5.94rad);-webkit-transform: rotate(-5.94rad);-o-transform:
rotate(-5.94rad);-ms-transform: rotate(-5.94rad); transform: rotate(-5.94rad);
width: 23px; height: 43px; left: 328.82px; top: 158.28px;}
#warped .w7 {-moz-transform: rotate(-6.18rad);-webkit-transform: rotate(-6.18rad);-o-transform:
rotate(-6.18rad);-ms-transform: rotate(-6.18rad); transform: rotate(-6.18rad);
width: 11px; height: 43px; left: 369.77px; top: 165.89px;}
#warped .w8 {-moz-transform: rotate(-6.34rad);-webkit-transform: rotate(-6.34rad);-o-transform:
rotate(-6.34rad);-ms-transform: rotate(-6.34rad); transform: rotate(-6.34rad);
width: 11px; height: 43px; left: 399.6px; top: 166.65px;}
#warped .w9 {-moz-transform: rotate(-6.54rad);-webkit-transform: rotate(-6.54rad);-o-transform:
rotate(-6.54rad);-ms-transform: rotate(-6.54rad); transform: rotate(-6.54rad);
width: 23px; height: 43px; left: 429.17px; top: 161.36px;}
#warped .w10 {-moz-transform: rotate(-6.8rad);-webkit-transform: rotate(-6.8rad);-o-transform:
rotate(-6.8rad);-ms-transform: rotate(-6.8rad); transform: rotate(-6.8rad);
width: 23px; height: 43px; left: 468.58px; top: 145.76px;}
#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);
width: 23px; height: 43px; left: 501.17px; top: 120.42px;}
#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);
width: 23px; height: 43px; left: 525.54px; top: 85.72px;}

179
index.html
View File

@ -4,68 +4,29 @@
<meta charset="utf-8"> <meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.pathslider.js"></script> <script type="text/javascript" src="js/jquery.pathslider.js"></script>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/avara" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/pathslider.css"> <link rel="stylesheet" type="text/css" href="css/pathslider.css">
<link rel="stylesheet" type="text/css" href="css/warped.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head> </head>
<body> <body>
<!-- The curved slider --> <!-- The curved slider -->
<div id="sliders"> <div id="sliders">
<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>
</div>
<div id="slider"></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://webchat.freenode.net/" target='_blank'>IRC channel: #relearn on Freenode</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>
</div> </div>
<style>
#slider {
position: absolute;
top:0;
left:0;
width : 100%;
height : 400px;
background: transparent;
}
#slider2 {
position: absolute;
top:0;
left:0;
width : 100%;
height : 400px;
background: transparent;
}
</style>
<script>
jQuery(function($){
$("#slider").pathslider({
points : [50,10,-150,0,150,200,300,100],
value : 49,
rotateGrip : true,
tolerance : 3,
range : 30,
curve : { width:4, color:"#333", cap:"round" }
});
$("#slider2").pathslider({
points : [490,300,-150,0,-200,-200,300,100],
value : 49,
rotateGrip : true,
tolerance : 3,
range : 30,
curve : { width:4, color:"#333", cap:"round" }
});
});
// scroll
$(document).ready(function() {
$('#slider').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').stop().animate({scrollTop: scrollPos}, 200);
});
$('#slider2').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').stop().animate({scrollTop: scrollPos}, 200);
});
});
</script>
<div id="curve"> <div id="curve">
<h1>Relearn <h1>Relearn
@ -78,15 +39,42 @@
<option value="http://relearn.be/2013/">2013</option> <option value="http://relearn.be/2013/">2013</option>
</select> </select>
curved</h1> curved</h1>
<p>
Relearn is a summerschool which welcomes persons, artists, students, teachers from all backgrounds and disciplines. Participants will gather to learn from and teach to each other, beyond the traditional paradigms of education.
Relearn researches convivial, experimental and deviant methods and means in the fields of design, computing and education, challenging the normal roles and separations in them (teacher/student, developer/user, art/life...).
</p>
<p>
Free, Libre and Open Source Software plays a fundamental role at Relearn, as it facilitates a different approach to the tools we commonly use in our practices and lives. For instance, it can allow us to understand the influence that tools themselves exert on the way they are used, or the different social relations and economies that are formed between who creates and uses them. Such a questioning approach to technology feels urgent, in a time in which more and more social, political and personal issues are addressed by solely technological means.
</p>
<p>
</p>
<p>Relearn 2019 is a curve, transversing multiple times and spaces.</p> <p>Relearn 2019 is a curve, transversing multiple times and spaces.</p>
<p>(a few more words about the curve will follow)</p> <p>
These would be independently organized sessions based on the urgencies
and affordances of each of the participating spaces. However, there
would still be a common thread throughout the series, perhaps in the
form of a transversal 'reroam' but also in the form of a roaming server
that is passed on to each subsequent event.
It is possible to attend all sessions but not required, nor the goal, it
is really the intention to have self-standing events which do not depend
people joining a succession of events but still share commonalities.
</p>
<div id="rotterdam" class="controlpoint"> <div id="rotterdam" class="controlpoint">
<h2>RELEARN 2019.Rotterdam</h2> <h2>·Rotterdam</h2>
<p>7th, 8th & 9th of June 2019<br> <dl>
Varia, Rotterdam</p><br> <dt>Date</dt> <dd>7<sup>th</sup>–9<sup>th</sup> June 2019</dd>
<dt>Location</dt> <dd>Varia - Gouwstraat 3, Rotterdam, The Netherlands</dd>
<dt>Initiator</dt> <dd><a href="https://varia.zone/en/" target='_blank'>Varia</a></dd>
<dt>Contact</dt> <dd><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></dd>
</dl>
<hr />
<p>For the Rotterdam control point on the Relearn curve, we propose to together attend to a <strong>subject zone</strong> (<strong>*</strong>) where different digital network practices intersect. This subject zone can morph into multiple directions throughout the session. Our specific interest is in how <strong>publishing formats</strong> (<strong>**</strong>) operate with/on/through this zone.</p> <p>For the Rotterdam control point on the Relearn curve, we propose to together attend to a <strong>subject zone</strong> (<strong>*</strong>) where different digital network practices intersect. This subject zone can morph into multiple directions throughout the session. Our specific interest is in how <strong>publishing formats</strong> (<strong>**</strong>) operate with/on/through this zone.</p>
@ -123,28 +111,71 @@
<li>▝ &nbsp;&nbsp;scores</li> <li>▝ &nbsp;&nbsp;scores</li>
<li>▖ &nbsp;&nbsp;…</li> <li>▖ &nbsp;&nbsp;…</li>
</ul> </ul>
<p>Many sub-trajectories can emerge from here during the days, without the need of taking the same path or agreeing about vocabularies or geometries altogether.</p> <p>Many sub-trajectories can emerge from here during the days, without the need of taking the same path or agreeing about vocabularies or geometries altogether.</p>
<hr /> <hr />
<p>The session will take place in Rotterdam and starts on Friday evening (the 7th) in a public setting, followed by two full days of relearning together.</p>
<p><strong>Friday 7th June 20:00 - 22:00</strong><br>(ongoing, no fixed starting time)<br> <div class='practical'>
<h3>Programme</h3>
<p><em>Friday 7<sup>th</sup> June, 20:00 – 22:00</em><br>(ongoing, no fixed starting time)<br>
Relearn public evening program: embed yourself into Relearn</p> Relearn public evening program: embed yourself into Relearn</p>
<p><strong>Saturday/Sunday 8-9th June 10:00 - 18:00</strong><br> <p><em>Saturday–Sunday, 8–9<sup>th</sup> June 10:00 – 18:00</em><br>
Relearn sub-zone-trajectories</p> Relearn sub-zone-trajectories</p>
<p>If you would like to join this Relearn session, please send an email to <a href="mailto:info@varia.zone">info@varia.zone</a> with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the <strong>26th 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). 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> <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>
<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> <p>If you would like to join us only on the Friday evening, there is no need to subscribe, just come over! :)</p>
<hr /> </div>
<p><u>Practical info</u><br>
Date: 7th-9th June 2019 <br>
Location: Varia - Gouwstraat 3, Rotterdam, The Netherlands<br>
Website: <a href="https://varia.zone/en/" class="uri">https://varia.zone/</a></p>
<p><u>Resources &amp; contact</u><br>
→ email: <a href="mailto:info@varia.zone"> info@varia.zone</a><br>
→ <a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/relearn" class="uri">subscribe to the Relearn mailinglist </a><br>
→ <a href="https://gitlab.com/relearn" class="uri">Relearn’s gitlab repository </a><br>
→ <a href="https://webchat.freenode.net/" class="uri">IRC channel: #relearn on Freenode</a><br>
→ <a href="https://gallery.constantvzw.org/index.php/search?album=1&amp;q=relearn" class="uri">Photographs of previous Relearn editions can be found in Constant’s gallery</a></p>
</div> </div>
</div> </div>
<script>
jQuery(function($){
$("#slider").pathslider({
points : [50,10,-150,0,150,200,300,100],
value : 49,
rotateGrip : true,
tolerance : 3,
range : 30,
curve : { width:4, color:"#333", cap:"round" }
});
$("#slider2").pathslider({
points : [490,300,-150,0,-200,-200,300,100],
value : 49,
rotateGrip : true,
tolerance : 3,
range : 30,
curve : { width:4, color:"#333", cap:"round" }
});
});
// scroll
$(document).ready(function() {
$('#slider').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').stop().animate({scrollTop: scrollPos}, 200);
});
$('#slider2').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').stop().animate({scrollTop: scrollPos}, 200);
});
});
</script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save