diff --git a/css/Avara-Black.otf b/css/Avara-Black.otf new file mode 100644 index 0000000..5037bf6 Binary files /dev/null and b/css/Avara-Black.otf differ diff --git a/css/Avara-Bold.otf b/css/Avara-Bold.otf new file mode 100644 index 0000000..7a7e7c5 Binary files /dev/null and b/css/Avara-Bold.otf differ diff --git a/css/Avara-BoldItalic.otf b/css/Avara-BoldItalic.otf new file mode 100644 index 0000000..e5351d5 Binary files /dev/null and b/css/Avara-BoldItalic.otf differ diff --git a/css/stylesheet.css b/css/stylesheet.css index a1dd738..0a4dec3 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -1,19 +1,91 @@ +@font-face { + font-family: 'AvaraBold'; + src: url('Avara-Bold.otf'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'AvaraBold'; + src: url('Avara-BoldItalic.otf'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'AvaraBold'; + src: url('Avara-Black.otf'); + font-weight: bold; + 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'; } hr{ border:0; border-bottom:1px dotted; + margin-top: 1em; + margin-bottom: 1em; } h1{ - z-index: 10; + line-height: 1.1em; +} + +h3 { + font-size: 1em; + margin-top: 0; + margin-bottom: 0; +} + +dl { + column-count: 2; +} + +dt { + text-decoration: underline; +} +dl { + text-indent: 0; +} +dd { + margin-left: 0; + display: inline-block; +} + +p { + margin: 0; +} + +p + p { + margin-top: 1em; +} + +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 --- */ @@ -22,49 +94,228 @@ h1{ div#sliders{ position: fixed; width: 500px; - height: 400px; top:60px; - right:100px; + left: 61%; + bottom: 1em; } div#slider{ float: left; margin:0.5em 1em 1em 0.5em; z-index: 1; + position: absolute; + top:0; + left:0; + width : 100%; + height : 400px; + background: transparent; +} +#slider2 { + position: absolute; + top:0; + left:0; + width : 100%; + height : 400px; + background: transparent; +} + +#warped { + font-weight: bold; + position: absolute; + top: 220px; + left: -40px; + height: 220px; +} + +div#relearn-infos { + position: fixed; + bottom: 2em; + left: 65%; + margin-top: 2em; +} +div#relearn-infos ul { + margin: 0; } /* --- control points ---*/ +#curve { + width: 55%; + padding : 1em 2em; + height: 100vh; + overflow: auto; + padding-bottom: 4em; +} +#curve::-webkit-scrollbar { + width: 6px; + border-radius: 5px; +} +#curve::-webkit-scrollbar-track { + background-color: black; +} +#curve::-webkit-scrollbar-thumb { + -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); + background-color: lightgray; + border-radius: 5px; +} + +.details { + display: none; + margin-top: 1em; +} + div.controlpoint{ max-width: 800px; - float: left; + margin: 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; +} + +dl:not(.summary) dt, +dl:not(.summary) dd { + display: inline; +} + +dl:not(.summary) dd:before { + content: " "; +} + +dl:not(.summary) dd + dt:before { + content: ''; + display: block; +} + +.practical-infos { + display: flex; + flex-wrap: wrap; + margin-top: 1em; +} + +.programme { + margin-bottom: 1em; + width: 100%; +} + +.programme div.flex { + float: left; + width: 50%; +} + +.programme p { + width: 50%; + float: left; + box-sizing: border-box; +} +.programme p { + padding-right: 0.5em; +} +.programme p + p { + padding-right: 0em; + padding-left: 0.5em; +} +.programme div.flex p { + width: 100%; + float: none; +} + +div.controlpoint .programme ul { + column-count: 1; + padding: 0 1em; +} + +.participation, +.hosting { + flex-basis: 50%; + box-sizing: border-box; +} +.participation { + padding-right: 0.5em; +} + +.hosting { + padding-left: 0.5em; +} + + +/*--- ROTTERDAM ---*/ #rotterdam{ color:#0054ff; } #rotterdam li{ list-style: none; + text-indent: -23px; + margin-left: 2em; } -#curve { - padding : 0 1em; - height: 100vh; - overflow: auto; +/*--- BRUSSELS ---*/ +#brussels { + color: teal; } + /*--- 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/css/warped.css b/css/warped.css new file mode 100644 index 0000000..913ff93 --- /dev/null +++ b/css/warped.css @@ -0,0 +1,61 @@ + #warped {position: relative; display: block; width:817.9999694824219px; + height:655.0034713745117px;} + + #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute; + -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50% + 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; } + + #warped span{font-family:'AvaraBold';font-size:46px;font-weight:regular;font-style:normal; + line-height:0.95; white-space:pre; overflow:visible; padding:0px;} + + #warped .w0 {-moz-transform: rotate(-6.29rad);-webkit-transform: rotate(-6.29rad);-o-transform: + rotate(-6.29rad);-ms-transform: rotate(-6.29rad); transform: rotate(-6.29rad); + width: 31px; height: 43px; left: 129.24px; top: 58.02px;} + + #warped .w1 {-moz-transform: rotate(-6.23rad);-webkit-transform: rotate(-6.23rad);-o-transform: + rotate(-6.23rad);-ms-transform: rotate(-6.23rad); transform: rotate(-6.23rad); + width: 20px; height: 43px; left: 178.6px; top: 59.06px;} + + #warped .w2 {-moz-transform: rotate(-6.01rad);-webkit-transform: rotate(-6.01rad);-o-transform: + rotate(-6.01rad);-ms-transform: rotate(-6.01rad); transform: rotate(-6.01rad); + width: 13px; height: 43px; left: 217.28px; top: 64.23px;} + + #warped .w3 {-moz-transform: rotate(-5.53rad);-webkit-transform: rotate(-5.53rad);-o-transform: + rotate(-5.53rad);-ms-transform: rotate(-5.53rad); transform: rotate(-5.53rad); + width: 20px; height: 43px; left: 243.79px; top: 82.1px;} + + #warped .w4 {-moz-transform: rotate(-5.48rad);-webkit-transform: rotate(-5.48rad);-o-transform: + rotate(-5.48rad);-ms-transform: rotate(-5.48rad); transform: rotate(-5.48rad); + width: 20px; height: 43px; left: 270.77px; top: 110.44px;} + + #warped .w5 {-moz-transform: rotate(-5.56rad);-webkit-transform: rotate(-5.56rad);-o-transform: + rotate(-5.56rad);-ms-transform: rotate(-5.56rad); transform: rotate(-5.56rad); + width: 16px; height: 43px; left: 299.48px; top: 136.24px;} + + #warped .w6 {-moz-transform: rotate(-5.94rad);-webkit-transform: rotate(-5.94rad);-o-transform: + rotate(-5.94rad);-ms-transform: rotate(-5.94rad); transform: rotate(-5.94rad); + width: 23px; height: 43px; left: 328.82px; top: 158.28px;} + + #warped .w7 {-moz-transform: rotate(-6.18rad);-webkit-transform: rotate(-6.18rad);-o-transform: + rotate(-6.18rad);-ms-transform: rotate(-6.18rad); transform: rotate(-6.18rad); + width: 11px; height: 43px; left: 369.77px; top: 165.89px;} + + #warped .w8 {-moz-transform: rotate(-6.34rad);-webkit-transform: rotate(-6.34rad);-o-transform: + rotate(-6.34rad);-ms-transform: rotate(-6.34rad); transform: rotate(-6.34rad); + width: 11px; height: 43px; left: 399.6px; top: 166.65px;} + + #warped .w9 {-moz-transform: rotate(-6.54rad);-webkit-transform: rotate(-6.54rad);-o-transform: + rotate(-6.54rad);-ms-transform: rotate(-6.54rad); transform: rotate(-6.54rad); + width: 23px; height: 43px; left: 429.17px; top: 161.36px;} + + #warped .w10 {-moz-transform: rotate(-6.8rad);-webkit-transform: rotate(-6.8rad);-o-transform: + rotate(-6.8rad);-ms-transform: rotate(-6.8rad); transform: rotate(-6.8rad); + width: 23px; height: 43px; left: 468.58px; top: 145.76px;} + + #warped .w11 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform: + rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad); + width: 23px; height: 43px; left: 501.17px; top: 120.42px;} + + #warped .w12 {-moz-transform: rotate(-7.39rad);-webkit-transform: rotate(-7.39rad);-o-transform: + rotate(-7.39rad);-ms-transform: rotate(-7.39rad); transform: rotate(-7.39rad); + width: 23px; height: 43px; left: 525.54px; top: 85.72px;} diff --git a/index.html b/index.html index a802da0..5b7e9a3 100644 --- a/index.html +++ b/index.html @@ -2,70 +2,23 @@
+ - + + ++ Relearn is a collective learning experiment with as many teachers as it has participants. It is motivated by the possibility to displace parameters of/for research, studying and learning. Read more about Relearn. +
++ Relearn is a summerschool which welcomes persons, artists, students, teachers from all backgrounds and disciplines. Participants will gather to learn from and teach to each other, beyond the traditional paradigms of education. + Relearn researches convivial, experimental and deviant methods and means in the fields of design, computing and education, challenging the normal roles and separations in them (teacher/student, developer/user, art/life…). +
++ Free, Libre and Open Source Software plays a fundamental role at Relearn, as it facilitates a different approach to the tools we commonly use in our practices and lives. For instance, it can allow us to understand the influence that tools themselves exert on the way they are used, or the different social relations and economies that are formed between who creates and uses them. Such a questioning approach to technology feels urgent, in a time in which more and more social, political and personal issues are addressed by solely technological means. +
++This summer, Relearn is back in the form of a curve, transversing multiple times and spaces. Curl yourselves this summer from, to and between Rotterdam, Brussels and Paris ! Read more about the curve. +
+Relearn 2019 is a curve, transversing multiple times and spaces.
++ These would be independently organized sessions based on the urgencies + and affordances of each of the participating spaces. However, there + would still be a common thread throughout the series, perhaps in the + form of a transversal “reroam” but also in the form of a roaming server + that is passed on to each subsequent event. + + It is possible to attend all sessions but not required, nor the goal, it + is really the intention to have self-standing events which do not depend + people joining a succession of events but still share commonalities. +
+Relearn 2019 is a curve, transversing multiple times and spaces.
-(a few more words about the curve will follow)
7th, 8th & 9th of June 2019
- Varia, Rotterdam
For the Rotterdam control point on the Relearn curve, we propose to together attend to a subject zone (*) where different digital network practices intersect. This subject zone can morph into multiple directions throughout the session. Our specific interest is in how publishing formats (**) operate with/on/through this zone.
@@ -123,28 +114,172 @@Many sub-trajectories can emerge from here during the days, without the need of taking the same path or agreeing about vocabularies or geometries altogether.
+The session will take place in Rotterdam and starts on Friday evening (the 7th) in a public setting, followed by two full days of relearning together.
-Friday 7th June 20:00 - 22:00
(ongoing, no fixed starting time)
- Relearn public evening program: embed yourself into Relearn
Saturday/Sunday 8-9th June 10:00 - 18:00
- Relearn sub-zone-trajectories
If you would like to join this Relearn session, please send an email to info@varia.zone with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the 26th of May.
-Our capacities allow us to have a group of 30 relearners. Our preference goes out to people that can join the whole session (Friday evening, Saturday and Sunday). 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.
-If you would like to join us only on the Friday evening, there is no need to subscribe, just come over! :)
+ +Friday 7th June
+ 20:00–22:00
+ Relearn public evening program: embed yourself into Relearn
Saturday–Sunday, 8–9th June
+ 10:00–18:00
+ Relearn sub-zone-trajectories
If you would like to join this Relearn session, please send an email to info@varia.zone with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the 26th of May.
+Our capacities allow us to have a group of 30 relearners. Our preference goes out to people that can join the whole session (Friday evening, Saturday and Sunday). +
+If you would like to join us only on the Friday evening, there is no need to subscribe, just come over ! :)
++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.
+Practical info
- Date: 7th-9th June 2019
- Location: Varia - Gouwstraat 3, Rotterdam, The Netherlands
- Website: https://varia.zone/
Resources & contact
- → email: info@varia.zone
- → subscribe to the Relearn mailinglist
- → Relearn’s gitlab repository
- → IRC channel: #relearn on Freenode
- → Photographs of previous Relearn editions can be found in Constant’s gallery
+ Exploring computed layout tools. +
++ Since 2013, several initiatives have been experimenting with making printed publications using HTML/CSS/Javascript with the help of CSS regions. This feature is necessary to produce multi-paged publications and since its removal from Blink (2014) and in WebKit (2017), users are trapped with old versions of WebKit. Sticking to older version is still viable today but for how long? +
++ This urgency leads us to a quite pragmatic but necessary worksession which will therefore focus on exploring other tools for making printed publications, especially computed layout tools (making layout with code). We already spotted three tools we would like to explore, but anyone is welcome to propose and experiment with other tools: +
+Friday 21st June
+ 10:00–18:00
+
Saturday 22nd June
+ 10:00–18:00
Participation is free of charge. 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). +
++ On Friday, there's a vegetarian canteen in the working space or many eating choices outside (the location is in the heart of Brussels). On Saturday we will take care of a 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. +
+