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

css for mobile

Browse Source
This commit is contained in:
Stephanie Vilayphiou 2019-05-22 16:32:31 +02:00
parent 8f5d50cd6a
commit e6669e996d
2 changed files with 136 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
css/stylesheet.css
View File

@ -17,12 +17,15 @@
font-style: normal;
}
:root {
font-size: 18px;
line-height: 1.4em;
}
body{
position: relative;
margin:0;
padding:0;
font-size: 120%;
line-height: 1.4;
color:purple;
background-color:#ff4d4d33;
font-family: 'AvaraBold';
@ -30,6 +33,7 @@ body{
hr{
border:0;
border-bottom:1px dotted;
margin-top: 1em;
margin-bottom: 1em;
}
@ -39,6 +43,7 @@ h1{
h3 {
font-size: 1em;
margin-top: 0;
margin-bottom: 0;
}
@ -47,7 +52,14 @@ dl {
}
dt {
/*text-decoration: underline;*/
text-decoration: underline;
}
dl {
text-indent: 0;
}
dd {
margin-left: 0;
display: inline-block;
}
p {
@ -58,14 +70,24 @@ p + p {
margin-top: 1em;
}
sup {
line-height: 0;
ul {
padding-left: 0;
}
select {
font-size: 1em;
}
a {
text-decoration-style: wavy;
text-decoration-skip-ink: none;
text-decoration-color: white;
}
sup {
line-height: 0;
}
/* --- slider --- */
@ -97,15 +119,18 @@ div#slider{
}
#warped {
font-weight: bold;
position: absolute;
top: 220px;
left: -40px;
height: 220px;
}
div#relearn-infos {
position: absolute;
bottom: 0;
left: 2em;
position: fixed;
bottom: 2em;
left: 65%;
margin-top: 2em;
}
div#relearn-infos ul {
margin: 0;
@ -117,6 +142,7 @@ div#relearn-infos ul {
padding : 1em 2em;
height: 100vh;
overflow: auto;
padding-bottom: 4em;
}
#curve::-webkit-scrollbar {
width: 6px;
@ -134,12 +160,17 @@ div#relearn-infos ul {
div.controlpoint{
max-width: 800px;
margin: 1em 0;
padding: 1em 0;
margin-top: 2em;
padding-bottom: 2em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
div.controlpoint + div.controlpoint {
border-top: 0;
}
div.controlpoint ul {
column-count: 2;
}
@ -150,6 +181,10 @@ div.controlpoint ul {
margin-top: 1em;
}
.programme {
margin-bottom: 1em;
}
.programme div.flex {
float: left;
width: 50%;
@ -188,7 +223,8 @@ div.controlpoint .programme ul {
}
#rotterdam li{
list-style: none;
text-indent: -34px;
text-indent: -23px;
margin-left: 2em;
}
/*--- BRUSSELS ---*/
@ -200,16 +236,56 @@ div.controlpoint .programme ul {
/*--- MOBILE ---*/
@media only screen
and (max-width : 1024px) {
:root {
font-size: 13px;
line-height: 1.4em;
}
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;
left: -50px;
left: -225px;
transform: scale(0.5);
}
div#relearn-infos {
position: static;
}
#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>
<head>
<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.pathslider.js"></script>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/avara" type="text/css"/>
@ -17,15 +18,6 @@
</div>
<div id="slider"></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 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'>
<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>
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 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> <!-- END CURVE -->
<script>
jQuery(function($){