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

css for mobile

master
Stephanie Vilayphiou 6 years ago
parent
8f5d50cd6a
commit
e6669e996d
2 changed files with 136 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 102
      css/stylesheet.css
  2. 24
      index.html

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;
}
}

24
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>
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($){

Write Preview
Loading…
Cancel
Save