Commit 082e8b5f authored by sarah's avatar sarah

implement changes on the landing page

parent 5b8f95b6
This diff is collapsed.
...@@ -11,10 +11,7 @@ ...@@ -11,10 +11,7 @@
display: inline; display: inline;
} */ } */
body { body {
margin: 10px;
/* width: 200px;
height: 15px; */
overflow-x: hidden;
position: relative; position: relative;
} }
...@@ -22,29 +19,32 @@ ...@@ -22,29 +19,32 @@
</head> </head>
<body> <body>
<!-- <div class="corner" style="height:20px"> <img src="corner.svg"> </div> <aside id="left">
<div class="corner" style=" "> <img src="corner.svg"> </div> <nav id="menu">
<div class="corner" style="height:60px"> <img src="corner.svg"> </div> --> <div class="logo">
<nav id="menu"> <a><img src="contour9-logo.png"/></a>
<ul> </div>
<li><a><img src="logo.png"/></a></li> <ul>
<li><a>Programme</a></li> <li><a>Programme</a></li>
<li><a>Venue</a></li> <li><a>Venue</a></li>
<li><a>Contributors</a></li> <li><a>Contributors</a></li>
<li><a>About</a></li> <li><a>About</a></li>
</ul> </ul>
</nav> </nav>
<main> <div id="timeline">
<aside class="timeline"> <figure class="">
<figure class="logo">
<object id="timeline" data="timeline/timeline.svg" type="image/svg+xml" style=""></object> <object id="timeline" data="timeline/timeline.svg" type="image/svg+xml" style=""></object>
</figure> </figure>
</div>
</aside> </aside>
<main>
<div id="container"> <div id="container">
</div> </div>
<aside class="time-travel" id="last-crescent"> <aside class="time-travel" id="last-crescent">
<p>Last crescent</p> <span class="full-moon"><a href="">Full moon</a></span>
<span class="first-crescent"><a href="">First crescent</a></span>
<span class="last-crescent"><a href="">Last crescent</a></span>
</aside> </aside>
<aside class="cycle content" id="full-moon"> <aside class="cycle content" id="full-moon">
<section class="content-day"> <section class="content-day">
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
</span> </span>
</div> </div>
<div id="zennegat-flotation-school" class="event"> <div id="zennegat-flotation-school" class="event">
<!-- <figure class="preview"><img src="http://www.mluciacruzcorreia.com/content/3-works/1-the-voice-of-natu/fotovoiceofnature2.jpg"></figure> --> <figure class="preview"><img src="img/cloud/Maria Lucia Cruz Correia/common-dreams.jpg"></figure>
<p class="date">Friday 17 May</p> <p class="date">Friday 17 May</p>
<p class="hour">18:00 - 20:00</p><p class="venue">Zennegat</p> <p class="hour">18:00 - 20:00</p><p class="venue">Zennegat</p>
<p class="type">Presentation from Flotation School</p><p class="contributor">Maria Lucia Cruz Correira</p> <p class="type">Presentation from Flotation School</p><p class="contributor">Maria Lucia Cruz Correira</p>
...@@ -116,6 +116,7 @@ ...@@ -116,6 +116,7 @@
<p class="date">Saturday 18 May</p> <p class="date">Saturday 18 May</p>
</div> </div>
<div id="nona-lecture-workshop-léopold-lambert" class="event"> <div id="nona-lecture-workshop-léopold-lambert" class="event">
<figure class="preview"><img src="img/cloud/Léopold Lambert/TheFunambulistToxicAtmospheres1.JPG"></figure>
<p class="date">Saturday 18 May</p> <p class="date">Saturday 18 May</p>
<p class="hour">11:00 - 13:00</p><p class="venue">Nona - old foyer/cafe</p> <p class="hour">11:00 - 13:00</p><p class="venue">Nona - old foyer/cafe</p>
<p class="type">Lecture workshop</p><p class="contributor">Léopold Lambert</p> <p class="type">Lecture workshop</p><p class="contributor">Léopold Lambert</p>
...@@ -187,6 +188,7 @@ ...@@ -187,6 +188,7 @@
</span> </span>
</div> </div>
<div id="nona-film-screening-daniela-ortiz" class="event"> <div id="nona-film-screening-daniela-ortiz" class="event">
<figure class="preview"><img src="img/cloud/Daniela Ortiz/Still_3.png"></figure>
<p class="date">Saturday 18 May</p> <p class="date">Saturday 18 May</p>
<p class="hour">20:30</p><p class="venue">Nona - old theater</p> <p class="hour">20:30</p><p class="venue">Nona - old theater</p>
<p class="type">Film screening</p><p class="contributor">Daniela Ortiz</p> <p class="type">Film screening</p><p class="contributor">Daniela Ortiz</p>
...@@ -236,6 +238,9 @@ ...@@ -236,6 +238,9 @@
</span> </span>
</div> </div>
</article> </article>
<div class="last-crescent"><a href="">Last <br/>crescent&nbsp;</a></div>
<div class="accordeon"><a href="">&nbsp;</a></div>
</section> </section>
<section class="content-continious"> <section class="content-continious">
<div id="thomas-more-installation-cadine-navarro" class="event"> <div id="thomas-more-installation-cadine-navarro" class="event">
......
/home/smagnan/Work/osp/osp.cloud/osp.work.contour/program-content/COMM CONTENT ONLINE PLATFORM
\ No newline at end of file
...@@ -5,16 +5,16 @@ ...@@ -5,16 +5,16 @@
font-style: normal; font-style: normal;
} }
@font-face { /* @font-face {
font-family: Syne; font-family: Syne;
src: url("fonts/Syne-Bold.ttf"); src: url("fonts/webfonts/Syne-Regular.woff");
font-weight: regular; font-weight: regular;
font-style: normal; font-style: normal;
} } */
@font-face { @font-face {
font-family: Syne; font-family: Syne;
src: url("fonts/Syne-Extra.ttf"); src: url("fonts/webfonts/Syne-Extra.woff");
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
...@@ -71,9 +71,11 @@ ...@@ -71,9 +71,11 @@
} }
:root { :root {
--rose: #f037af; --blue-moon: #445fff;
--vert: #008e00; --goldy: #ca9c73;
--orange: #d45500; --green-moon: #8ec0b8;
--yellow-moon: #fff30e;
--pink: #f66758;
} }
body { body {
...@@ -81,12 +83,9 @@ body { ...@@ -81,12 +83,9 @@ body {
font-size: 1.2em; font-size: 1.2em;
line-height: 1.3em; line-height: 1.3em;
color: black; color: black;
/* background-color: yellow; */
/* background-image:url("https://loeildelaphotographie.com/wp-content/uploads/2013/05/original_laura_2-jpg.jpg20140604-13248-1gys00n.jpg"); */
/* text-align: center; */
padding: 20px; padding: 20px;
/* overflow: hidden; */ overflow: hidden;
margin: 0px;
} }
/* width */ /* width */
...@@ -96,7 +95,7 @@ body { ...@@ -96,7 +95,7 @@ body {
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #d6d6d6;; background: #d6d6d6;
} }
/* Handle */ /* Handle */
...@@ -115,57 +114,62 @@ p{ ...@@ -115,57 +114,62 @@ p{
display: inline; display: inline;
margin: 0; margin: 0;
} }
a {
text-decoration: none;
color: inherit;
}
figure {
margin: 0;
padding: 0;
}
a:hover{
text-decoration: underline;
}
#left {
width: 33%;
}
#menu { #menu {
background-color: #fff200; margin: 0 !important;
margin:0 !important;
height: auto; height: auto;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0pt; top: 0pt;
width: 100%; width: 34%;
z-index:1000; z-index: 1000;
border-bottom: 3px solid black; padding: 20px;
padding: 5px 5px 0px 0px;
} }
#menu .logo {
display: inline-block;
vertical-align: top;
width: 54%;
}
#menu img { #menu img {
/*height: 10%;*/ /*height: 10%;*/
width: 180px; width: 86%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#menu ul { #menu ul {
display: flex;
list-style-type: none; list-style-type: none;
display: inline-block;
} }
#menu li { #menu li {
flex: 0 0 auto;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
#menu li:last-child {
/*margin-left: auto;*/
}
#menu a{ #menu a{
text-decoration: none;
/*color: black;*/ /*color: black;*/
font-family: 'Syne'; font-family: 'Syne';
/*text-transform: uppercase;*/ font-weight: bold;
font-size: 0.9em; font-size: 0.9em;
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
#menu a:hover{
text-decoration: underline;
}
#intro { #intro {
max-width: 800px; max-width: 800px;
margin: 4em 4em; margin: 4em 4em;
...@@ -178,10 +182,6 @@ p{ ...@@ -178,10 +182,6 @@ p{
.date { .date {
font-family: 'Syne'; font-family: 'Syne';
font-weight: bold; font-weight: bold;
/*text-transform: uppercase;*/
/* color: #d45500; */
} }
.event p.date { .event p.date {
display: none; display: none;
...@@ -192,10 +192,6 @@ p{ ...@@ -192,10 +192,6 @@ p{
font-weight: bold; font-weight: bold;
} }
.type { .type {
/* font-family: 'Yaldevi-jaffna';
font-size: 1em;
text-transform: uppercase; */
font-family: 'LM'; font-family: 'LM';
font-style: italic; font-style: italic;
font-size: 1.2em; font-size: 1.2em;
...@@ -204,16 +200,8 @@ font-size: 1.2em; ...@@ -204,16 +200,8 @@ font-size: 1.2em;
.venue { .venue {
font-family: 'Lack'; font-family: 'Lack';
/* font-family: 'Tulpen One'; */
/* text-transform: uppercase; */
/* font-size: .8em; */
/* color:#008e00; */
} }
/* .type {
font-family: 'Lack';
} */
.contributor { .contributor {
font-family: 'Lack'; font-family: 'Lack';
/* color:#f037af; */ /* color:#f037af; */
...@@ -234,45 +222,41 @@ section { ...@@ -234,45 +222,41 @@ section {
display: block; display: block;
} }
/* section::after {
display: inline-flex;
width: 10px;
height: 1em;
content: ' ';
font-family: 'Dauphine';
} */
section.content-day { section.content-day {
flex: 1 0 66%; display: flex;
display: flex; flex-direction: row;
flex-direction: row; padding-top: 30px;
padding-top: 40px; top: 0;
background-image: linear-gradient(to right, white, var(--blue-moon));
border-left: 2px solid black;
} }
section.content-continious { section.content-continious {
flex: 1 0 66%; flex: 1 0 66%;
position: sticky; position: absolute;
top: 50px; top: 80px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
bottom: 17px; background-image: linear-gradient(to right, white 40%, var(--blue-moon));
background-image: linear-gradient(to right, var(--orange), white); border-bottom: 2px solid black;
border-top: 2px solid black;
width: 100%;
margin-left: 22px;
} }
section.content-continious::before {
content: url("img/arrow.png");
position: absolute;
right: 70px;
bottom: -17px;
}
aside.content { aside.content {
position: absolute; position: absolute;
width: 66%; width: 68%;
display: flex;
flex-direction: column-reverse;
float: left;
padding-top: 30px;
padding-top: 30px;
background: white; background: white;
top: 0;
} }
#full-moon {
left: 547px;
}
#last-crescent { #last-crescent {
z-index: -1000; z-index: -1000;
/* background-color: green; */ /* background-color: green; */
...@@ -283,52 +267,67 @@ aside.content { ...@@ -283,52 +267,67 @@ aside.content {
left:320px; left:320px;
} }
aside.timeline { .timeline {
width: 33%; width: 33%;
/* position: fixed; */ /* position: fixed; */
left: 0; left: 0;
top: 0pt; top: 0pt;
} }
aside.time-travel { aside.time-travel {
/*background-image: linear-gradient(to right, 0% silver , 60% white, 100% silver);*/ width: 30%;
width: 33%;
height: 900px; height: 900px;
/*margin-left: 96%;*/ margin-top: 170px;
position: absolute; position: absolute;
} }
aside.time-travel p { aside.time-travel span {
margin: auto; margin: auto;
vertical-align: middle; vertical-align: middle;
position: absolute; position: absolute;
text-align: center; bottom: 213px;
width: 100%;
bottom: 0;
} }
aside.time-travel p::before { .full-moon {
content: "← "; text-align: left;
top: 0;
} }
aside.time-travel p::after { .first-crescent {
content: " →"; text-align: left;
}
.last-crescent {
text-align: right;
right: 0;
} }
aside.time-travel p::after:hover { span.full-moon::before {
color: var(--orange); content: "↓ ";
} }
aside.time-travel p::before { span.first-crescent::before {
content: "← "; content: "← ";
} }
aside.time-travel p::before:hover { span.last-crescent::after {
color: var(--orange); content: " →";
}
div.last-crescent {
text-align: left;
flex: 0 0 8%;
padding: 0 30px;
z-index: 1000;
}
.accordeon {
background-image: url(img/accordeon.png);
background-repeat-y: no-repeat;
background-size: 53%;
background-position: 0px 46px;
z-index: 1000;
flex: 0 0 15%;
} }
#timeline { #timeline {
position: absolute; position: absolute;
right: 180px; right: 94px;
top: 306px; top: 173px;
height: 40vh; height: 42vh;
} }
.cycle { .cycle {
flex: 2 0 10%; flex: 2 0 10%;
display: flex; left: 33%
width: 33%;
} }
.timeline img { .timeline img {
width: 94%; width: 94%;
...@@ -342,12 +341,12 @@ aside.time-travel p::before:hover { ...@@ -342,12 +341,12 @@ aside.time-travel p::before:hover {
}*/ }*/
article.day { article.day {
width: 19%; width: 19%;
flex: 3 0 25%; flex: 3 0 23%;
padding-right: 30px; padding-right: 30px;
padding-left: 10px; padding-left: 30px;
overflow-y: scroll; overflow-y: scroll;
max-height: 830px; max-height: 1170px;
margin-right: 22px; /* margin-right: 22px; */
} }
section.many-days { section.many-days {
height: 100%; height: 100%;
...@@ -372,39 +371,13 @@ section.many-days { ...@@ -372,39 +371,13 @@ section.many-days {
margin: 0 0px; margin: 0 0px;
padding: 10px 10px; padding: 10px 10px;
flex: 1 0 33%; flex: 1 0 33%;
border: 5px dashed;
margin-right: 10px; margin-right: 10px;
max-width: 400px;
} }
.day div.event:hover { .day div.event:hover {
color: var(--rose); color: var(--rose);
} }
/* .content-continious div:nth-of-type(2n) {
padding-left: 38%;
} */
/* .content-continious div:first-of-type,
.content-day div:first-of-type {
padding-left: 0px;
} */
/* div.event + div.event {
margin-top: 50px;
}
div.event + div.event + div.event {
margin-top: 100px;
}
div.event + div.event + div.event + div.event {
margin-top: 0px;
}
div.event + div.event + div.event + div.event + div.event {
margin-top: 50px;
}
div.event + div.event + div.event + div.event + div.event + div.event {
margin-top: 100px;
}
div.date, div.hour, div.venue, div.type, div.contributor, div.title, div.note {
/* display: inline; */
div.bloc-date { div.bloc-date {
...@@ -461,11 +434,13 @@ width: 100%; ...@@ -461,11 +434,13 @@ width: 100%;
/* margin-top: 20px; */ /* margin-top: 20px; */
margin-top: 10pt; margin-top: 10pt;
} }
figure.preview img {
width: 100%;
}
.event.active span.detail figure.cover { .event.active span.detail figure.cover {
width: 100%; width: 100%;
margin: 0pt; margin: 0pt;
} }
.event.active span.detail figure.cover img { .event.active span.detail figure.cover img {
width: 100%; width: 100%;
} }
...@@ -524,7 +499,7 @@ p.comment::before { ...@@ -524,7 +499,7 @@ p.comment::before {
margin-top: 50px; margin-top: 50px;
} }
#zennegat-flotation-school { #zennegat-flotation-school {
height: 200px; height: 360px;
} }
#nona-Presentation-picha { #nona-Presentation-picha {
margin-top: 10px; margin-top: 10px;
...@@ -532,7 +507,7 @@ p.comment::before { ...@@ -532,7 +507,7 @@ p.comment::before {
} }
#nona-lecture-workshop-léopold-lambert { #nona-lecture-workshop-léopold-lambert {
margin-top: 200px; margin-top: 200px;
height: 200px; height: 283px;
} }
#nona-lunch-welcome-in-mechelen { #nona-lunch-welcome-in-mechelen {
height: 100px; height: 100px;
...@@ -545,7 +520,7 @@ p.comment::before { ...@@ -545,7 +520,7 @@ p.comment::before {
height: 100px; height: 100px;
} }
#nona-film-screening-daniela-ortiz { #nona-film-screening-daniela-ortiz {
height: 100px; height: 271px;
margin-top: 50px; margin-top: 50px;
} }
#nona-concert-melvin-gibbs { #nona-concert-melvin-gibbs {
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment