master #4

Merged
mb merged 7 commits from svilayphiou/relearn-curved-slider-webpage:master into master 2019-05-30 11:05:22 +02:00
2 changed files with 136 additions and 56 deletions
Showing only changes of commit e6669e996d - Show all commits

View File

@ -17,12 +17,15 @@
font-style: normal; font-style: normal;
} }
:root {
font-size: 18px;
line-height: 1.4em;
}
body{ body{
position: relative; position: relative;
margin:0; margin:0;
padding:0; padding:0;
font-size: 120%;
line-height: 1.4;
color:purple; color:purple;
background-color:#ff4d4d33; background-color:#ff4d4d33;
font-family: 'AvaraBold'; font-family: 'AvaraBold';
@ -30,6 +33,7 @@ body{
hr{ hr{
border:0; border:0;
border-bottom:1px dotted; border-bottom:1px dotted;
margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -39,6 +43,7 @@ h1{
h3 { h3 {
font-size: 1em; font-size: 1em;
margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
@ -47,7 +52,14 @@ dl {
} }
dt { dt {
/*text-decoration: underline;*/ text-decoration: underline;
}
dl {
text-indent: 0;
}
dd {
margin-left: 0;
display: inline-block;
} }
p { p {
@ -58,14 +70,24 @@ p + p {
margin-top: 1em; margin-top: 1em;
} }
sup { ul {
line-height: 0; padding-left: 0;
} }
select { select {
font-size: 1em; font-size: 1em;
} }
a {
text-decoration-style: wavy;
text-decoration-skip-ink: none;
text-decoration-color: white;
}
sup {
line-height: 0;
}
/* --- slider --- */ /* --- slider --- */
@ -97,15 +119,18 @@ div#slider{
} }
#warped { #warped {
font-weight: bold;
position: absolute; position: absolute;
top: 220px; top: 220px;
left: -40px; left: -40px;
height: 220px;
} }
div#relearn-infos { div#relearn-infos {
position: absolute; position: fixed;
bottom: 0; bottom: 2em;
left: 2em; left: 65%;
margin-top: 2em;
} }
div#relearn-infos ul { div#relearn-infos ul {
margin: 0; margin: 0;
@ -117,6 +142,7 @@ div#relearn-infos ul {
padding : 1em 2em; padding : 1em 2em;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
padding-bottom: 4em;
} }
#curve::-webkit-scrollbar { #curve::-webkit-scrollbar {
width: 6px; width: 6px;
@ -134,12 +160,17 @@ div#relearn-infos ul {
div.controlpoint{ div.controlpoint{
max-width: 800px; max-width: 800px;
margin: 1em 0; margin: 1em 0;
padding: 1em 0; margin-top: 2em;
padding-bottom: 2em;
border-top: 1px solid black; border-top: 1px solid black;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
div.controlpoint + div.controlpoint {
border-top: 0;
}
div.controlpoint ul { div.controlpoint ul {
column-count: 2; column-count: 2;
} }
@ -150,6 +181,10 @@ div.controlpoint ul {
margin-top: 1em; margin-top: 1em;
} }
.programme {
margin-bottom: 1em;
}
.programme div.flex { .programme div.flex {
float: left; float: left;
width: 50%; width: 50%;
@ -188,7 +223,8 @@ div.controlpoint .programme ul {
} }
#rotterdam li{ #rotterdam li{
list-style: none; list-style: none;
text-indent: -34px; text-indent: -23px;
margin-left: 2em;
} }
/*--- BRUSSELS ---*/ /*--- BRUSSELS ---*/
@ -200,16 +236,56 @@ div.controlpoint .programme ul {
/*--- MOBILE ---*/ /*--- MOBILE ---*/
@media only screen @media only screen
and (max-width : 1024px) { and (max-width : 1024px) {
:root {
font-size: 13px;
line-height: 1.4em;
}
div#sliders { div#sliders {
position: absolute; top: 0;
top: -50px; left: 0;
left: -50px; right: 0;
transform: scale(0.5); width: initial;
height: 150px;
background-color: #ffdbdb;
} }
div#slider {
top: -100px;
left: -40px;
transform: scale(0.5);
}
#warped {
top: -50px;
left: -225px;
transform: scale(0.5);
}
div#relearn-infos {
position: static;
}
#curve { #curve {
padding-top: 200px; padding-top: 150px;
width: 100%;
box-sizing: border-box;
} }
.programme div.flex,
.programme p {
width: 100%;
}
.programme ul {
margin-top: 0;
}
.participation,
.hosting {
flex-basis: 100%;
padding: 0;
}
.hosting {
margin-top: 1em;
}
} }

View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<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" media="screen" href="https://fontlibrary.org/face/avara" type="text/css"/> <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/avara" type="text/css"/>
@ -17,15 +18,6 @@
</div> </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://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>
</div> </div>
<div id="curve"> <div id="curve">
@ -171,45 +163,57 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<div class='practical-infos'> <div class='practical-infos'>
<div class='programme'> <div class='programme'>
<h3>Programme</h3> <h3>Programme</h3>
<div class='flex'> <div class='flex'>
<p><u>Friday 21<sup>st</sup> June</u><br> <p><u>Friday 21<sup>st</sup> June</u><br>
10:0018:00 10:0018:00
</p> </p>
<ul> <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>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> <li>Choose your tool and have fun with it!</li>
</ul> </ul>
</div>
<div class='flex'>
<p><u>Saturday 22<sup>nd</sup> June</u><br>
10:0018:00</p>
<ul>
<li>Continuation of the exploration</li>
<li>Show/tell/criticize</li>
</ul>
</div>
</div> </div>
<div class='flex'> <div class='participation'>
<p><u>Saturday 22<sup>nd</sup> June</u><br> <h3>Participation</h3>
10:0018:00</p>
<ul> <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>
<li>Continuation of the exploration</li> <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).
<li>Show/tell/criticize</li> </p>
</ul> </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>
</div> </div>
</div> <!-- END BRUSSELS CONTROL POINT -->
<div class='participation'> <div id="relearn-infos">
<h3>Participation</h3> <h3>Resources &amp; contact</h3>
<ul>
<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> <li><a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/relearn" target='_blank'>Subscribe to the Relearn mailinglist </a></li>
<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). <li><a href="https://webchat.freenode.net/" target='_blank'>IRC channel: #relearn on Freenode</a></li>
</p> <li><a href="https://gitlab.com/relearn" target='_blank'>Relearn gitlab repository </a></li>
</div> <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 class='hosting'> </div>
<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>
</div> <!-- END CURVE -->
<script> <script>
jQuery(function($){ jQuery(function($){