varia/relearn-curved-slider-webpage
14
0
Fork 3
Code Issues Pull Requests Releases Wiki Activity

master #4

Merged
mb merged 7 commits from svilayphiou/relearn-curved-slider-webpage:master into master 2019-05-30 11:05:22 +02:00
Conversation 0 Commits 7 Files Changed 6 +136 -56
2 changed files with 136 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e6669e996d - Show all commits

102
css/stylesheet.css
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;
left: 0;
right: 0;
width: initial;
height: 150px;
background-color: #ffdbdb;
}
div#slider {
top: -100px;
left: -40px;
transform: scale(0.5);
}
#warped {
top: -50px; top: -50px;
left: -50px; left: -225px;
transform: scale(0.5); 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;
} }
} }

28
index.html
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">
@ -205,11 +197,23 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<div class='hosting'> <div class='hosting'>
<h3>Hosting</h3> <h3>Hosting</h3>
<p> <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> 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.
</div> </p>
</div>
</div>
</div> <!-- END BRUSSELS CONTROL POINT -->
<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> <!-- END CURVE -->
<script> <script>
jQuery(function($){ jQuery(function($){