decentral1se
4 years ago
1 changed files with 210 additions and 215 deletions
@ -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; |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue