diff --git a/relearn.2019.be/html/css/stylesheet.css b/relearn.2019.be/html/css/stylesheet.css
index 635504e..e622179 100644
--- a/relearn.2019.be/html/css/stylesheet.css
+++ b/relearn.2019.be/html/css/stylesheet.css
@@ -1,368 +1,363 @@
@font-face {
- font-family: 'AvaraBold';
- src: url('Avara-Bold.otf');
- font-weight: normal;
- font-style: normal;
+ 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-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;
+ font-family: "AvaraBold";
+ src: url("Avara-Black.otf");
+ font-weight: bold;
+ font-style: normal;
}
.fr {
- display: none;
+ display: none;
}
:root {
- font-size: 18px;
- line-height: 1.4em;
+ font-size: 18px;
+ line-height: 1.4em;
}
html,
#curve {
- scroll-behavior: smooth;
+ scroll-behavior: smooth;
}
-body{
- position: relative;
- margin:0;
- padding:0;
- color:purple;
- background-color:#ff4d4d33;
- font-family: 'AvaraBold';
- overflow: hidden;
+body {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ color: purple;
+ background-color: #ff4d4d33;
+ font-family: "AvaraBold";
+ overflow: hidden;
}
-hr{
- border:0;
- border-bottom:1px dotted;
- margin-top: 1em;
- margin-bottom: 1em;
+hr {
+ border: 0;
+ border-bottom: 1px dotted;
+ margin-top: 1em;
+ margin-bottom: 1em;
}
-h1{
- line-height: 1.1em;
+h1 {
+ line-height: 1.1em;
}
h3 {
- font-size: 1em;
- margin-top: 0;
- margin-bottom: 0;
+ font-size: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
}
dl {
- column-count: 2;
+ column-count: 2;
}
dt {
- text-decoration: underline;
+ text-decoration: underline;
}
dl {
- text-indent: 0;
+ text-indent: 0;
}
dd {
- margin-left: 0;
- display: inline-block;
+ margin-left: 0;
+ display: inline-block;
}
p {
- margin: 0;
+ margin: 0;
}
p + p {
- margin-top: 1em;
+ margin-top: 1em;
}
ul {
- padding-left: 0;
+ padding-left: 0;
}
select {
- font-size: 1em;
+ font-size: 1em;
}
a {
- text-decoration-style: wavy;
- text-decoration-skip-ink: none;
- text-decoration-color: white;
+ text-decoration-style: wavy;
+ text-decoration-skip-ink: none;
+ text-decoration-color: white;
}
sup {
- line-height: 0;
+ line-height: 0;
}
/* --- slider --- */
-
-div#sliders{
- position: fixed;
- width: 500px;
- top:60px;
- 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;
+div#sliders {
+ position: fixed;
+ width: 500px;
+ top: 60px;
+ 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;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 400px;
+ background: transparent;
}
#controlpoints li {
- position: absolute;
- z-index: 10000;
- list-style-type: none;
- width: 10em;
- line-height: 1.3em;
+ position: absolute;
+ z-index: 10000;
+ list-style-type: none;
+ width: 10em;
+ line-height: 1.3em;
}
#controlpoints li#cp-paris {
- top: 220px;
- left: 20px;
+ top: 220px;
+ left: 20px;
}
#controlpoints li#cp-brussels {
- top: 0px;
- left: 220px;
+ top: 0px;
+ left: 220px;
}
#controlpoints li#cp-rotterdam {
- top: 140px;
- right: 20px;
+ top: 140px;
+ right: 20px;
}
#warped {
- font-weight: bold;
- position: absolute;
- top: 220px;
- left: -40px;
- height: 220px;
+ font-weight: bold;
+ position: absolute;
+ top: 220px;
+ left: -40px;
+ height: 220px;
}
div#relearn-infos {
- position: fixed;
- bottom: 2em;
- left: 65%;
- margin-top: 2em;
+ position: fixed;
+ bottom: 2em;
+ left: 65%;
+ margin-top: 2em;
}
div#relearn-infos ul {
- margin: 0;
+ margin: 0;
}
/* --- control points ---*/
#curve {
- width: 55%;
- padding : 1em 2em;
- height: 87vh;
- overflow: auto;
- padding-bottom: 4em;
+ width: 55%;
+ padding: 1em 2em;
+ height: 87vh;
+ overflow: auto;
+ padding-bottom: 4em;
}
#curve::-webkit-scrollbar {
- width: 6px;
- border-radius: 5px;
+ width: 6px;
+ border-radius: 5px;
}
#curve::-webkit-scrollbar-track {
- background-color: black;
+ 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;
+ -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;
+ display: none;
+ margin-top: 1em;
}
+div.controlpoint {
+ max-width: 800px;
+ margin: 1em 0;
+ margin-top: 2em;
+ padding-bottom: 2em;
-div.controlpoint{
- max-width: 800px;
- margin: 1em 0;
- margin-top: 2em;
- padding-bottom: 2em;
-
- border-top: 1px solid black;
- border-bottom: 1px solid black;
+ border-top: 1px solid black;
+ border-bottom: 1px solid black;
}
div.controlpoint + div.controlpoint {
- border-top: 0;
+ border-top: 0;
}
div.controlpoint ul {
- column-count: 2;
+ column-count: 2;
}
dl:not(.summary) dt,
dl:not(.summary) dd {
- display: inline;
+ display: inline;
}
dl:not(.summary) dd:before {
- content: " ";
+ content: " ";
}
dl:not(.summary) dd + dt:before {
- content: '';
- display: block;
+ content: "";
+ display: block;
}
.practical-infos {
- display: flex;
- flex-wrap: wrap;
- margin-top: 1em;
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 1em;
}
.programme {
- margin-bottom: 1em;
- width: 100%;
+ margin-bottom: 1em;
+ width: 100%;
}
.programme div.flex {
- float: left;
- width: 50%;
+ float: left;
+ width: 50%;
}
.programme p {
- width: 50%;
- float: left;
- box-sizing: border-box;
+ width: 50%;
+ float: left;
+ box-sizing: border-box;
}
.programme p {
- padding-right: 0.5em;
+ padding-right: 0.5em;
}
.programme p + p {
- padding-right: 0em;
- padding-left: 0.5em;
+ padding-right: 0em;
+ padding-left: 0.5em;
}
.programme div.flex p {
- width: 100%;
- float: none;
+ width: 100%;
+ float: none;
}
div.controlpoint .programme ul {
- column-count: 1;
- padding: 0 1em;
+ column-count: 1;
+ padding: 0 1em;
}
.participation,
.hosting {
- flex-basis: 50%;
- box-sizing: border-box;
+ flex-basis: 50%;
+ box-sizing: border-box;
}
.participation {
- padding-right: 0.5em;
+ padding-right: 0.5em;
}
.hosting {
- padding-left: 0.5em;
+ padding-left: 0.5em;
}
-
/*--- ROTTERDAM ---*/
-#rotterdam{
- color:#0054ff;
+#rotterdam {
+ color: #0054ff;
}
-#rotterdam li{
- list-style: none;
- text-indent: -23px;
- margin-left: 2em;
+#rotterdam li {
+ list-style: none;
+ text-indent: -23px;
+ margin-left: 2em;
}
/*--- BRUSSELS ---*/
#brussels {
- color: teal;
+ color: teal;
}
/*--- PARIS ---*/
#paris {
- color: tomato;
+ color: tomato;
}
/*--- MOBILE ---*/
-@media only screen
-and (max-width : 1024px) {
- :root {
- font-size: 13px;
- line-height: 1.4em;
- }
-
- div#sliders {
- 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: 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;
- }
-
- #controlpoints li#cp-paris {
- top: 120px;
- left: 40px;
- }
- #controlpoints li#cp-brussels {
- top: 10px;
- left: 20px;
- }
- #controlpoints li#cp-rotterdam {
- top: 10px;
- right: -40px;
- }
+@media only screen and (max-width: 1024px) {
+ :root {
+ font-size: 13px;
+ line-height: 1.4em;
+ }
+
+ div#sliders {
+ 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: 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;
+ }
+
+ #controlpoints li#cp-paris {
+ top: 120px;
+ left: 40px;
+ }
+ #controlpoints li#cp-brussels {
+ top: 10px;
+ left: 20px;
+ }
+ #controlpoints li#cp-rotterdam {
+ top: 10px;
+ right: -40px;
+ }
}