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 5 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      css/stylesheet.css
  2. 86
      index.html

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

86
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">
@ -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:00–18:00 10:00–18: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:00–18: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:00–18:00</p>
<ul>
<li>Continuation of the exploration</li>
<li>Show/tell/criticize</li>
</ul>
</div>
</div>
<div class='participation'> <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>
<h3>Participation</h3> <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).
</p>
</div>
<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> <div class='hosting'>
<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). <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>
</div>
</div> </div>
</div> <!-- END BRUSSELS CONTROL POINT -->
<div class='hosting'> <div id="relearn-infos">
<h3>Hosting</h3> <h3>Resources &amp; contact</h3>
<p> <ul>
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> <li><a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/relearn" target='_blank'>Subscribe to the Relearn mailinglist </a></li>
</div> <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>
</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>
</div> <!-- END CURVE -->
<script> <script>
jQuery(function($){ jQuery(function($){

Write Preview
Loading…
Cancel
Save