From e6669e996d95180a44f37770d8ca1eccdadc960e Mon Sep 17 00:00:00 2001 From: Stephanie Vilayphiou Date: Wed, 22 May 2019 16:32:31 +0200 Subject: [PATCH] css for mobile --- css/stylesheet.css | 106 ++++++++++++++++++++++++++++++++++++++------- index.html | 86 ++++++++++++++++++------------------ 2 files changed, 136 insertions(+), 56 deletions(-) diff --git a/css/stylesheet.css b/css/stylesheet.css index ee068f6..c5466bb 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -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: -50px; - left: -50px; - transform: scale(0.5); + 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: -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; + } + } diff --git a/index.html b/index.html index 27702ca..db9edaa 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + @@ -17,15 +18,6 @@
-
-

Resources & contact

- -
@@ -171,45 +163,57 @@ We will take care of a daily vegetarian lunch (please let us know about
-
-

Programme

- -
-

Friday 21st June
- 10:00–18:00 -

-
    -
  • Short introduction of tools to experiment with: Flat, Sile, paged.js…
    • -
  • Choose your tool and have fun with it!
    • -
+
+

Programme

+ +
+

Friday 21st June
+ 10:00–18:00 +

+
    +
  • Short introduction of tools to experiment with: Flat, Sile, paged.js…
    • +
  • Choose your tool and have fun with it!
    • +
+
+ +
+

Saturday 22nd June
+ 10:00–18:00

+
    +
  • Continuation of the exploration
    • +
  • Show/tell/criticize
    • +
+
-
-

Saturday 22nd June
- 10:00–18:00

-
    -
  • Continuation of the exploration
    • -
  • Show/tell/criticize
    • -
-
-
+
+

Participation

-
-

Participation

+

If you would like to join this Relearn session, please send an email to miam@osp.kitchen with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the 10th of June.

+

Our capacities allow us to have a group of 12 relearners. Our preference goes out to people that can join the whole session (Friday, Saturday). +

+
-

If you would like to join this Relearn session, please send an email to miam@osp.kitchen with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the 10th of June.

-

Our capacities allow us to have a group of 12 relearners. Our preference goes out to people that can join the whole session (Friday, Saturday). -

+
+

Hosting

+

+ We will take care of a daily vegetarian lunch (please let us know about allergies or other dietary preferences). Following a tradition from previous years, we will arrange a hosting network 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. +

+
+
-
-

Hosting

-

-We will take care of a daily vegetarian lunch (please let us know about allergies or other dietary preferences). Following a tradition from previous years, we will arrange a hosting network 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.

-
- -
+ +