Commit 082e8b5f authored by sarah's avatar sarah

implement changes on the landing page

parent 5b8f95b6
This diff is collapsed.
......@@ -11,10 +11,7 @@
display: inline;
} */
body {
margin: 10px;
/* width: 200px;
height: 15px; */
overflow-x: hidden;
position: relative;
}
......@@ -22,29 +19,32 @@
</head>
<body>
<!-- <div class="corner" style="height:20px"> <img src="corner.svg"> </div>
<div class="corner" style=" "> <img src="corner.svg"> </div>
<div class="corner" style="height:60px"> <img src="corner.svg"> </div> -->
<nav id="menu">
<ul>
<li><a><img src="logo.png"/></a></li>
<li><a>Programme</a></li>
<li><a>Venue</a></li>
<li><a>Contributors</a></li>
<li><a>About</a></li>
</ul>
</nav>
<main>
<aside class="timeline">
<figure class="logo">
<aside id="left">
<nav id="menu">
<div class="logo">
<a><img src="contour9-logo.png"/></a>
</div>
<ul>
<li><a>Programme</a></li>
<li><a>Venue</a></li>
<li><a>Contributors</a></li>
<li><a>About</a></li>
</ul>
</nav>
<div id="timeline">
<figure class="">
<object id="timeline" data="timeline/timeline.svg" type="image/svg+xml" style=""></object>
</figure>
</div>
</aside>
</aside>
<main>
<div id="container">
</div>
<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 class="cycle content" id="full-moon">
<section class="content-day">
......@@ -82,7 +82,7 @@
</span>
</div>
<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="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>
......@@ -116,6 +116,7 @@
<p class="date">Saturday 18 May</p>
</div>
<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="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>
......@@ -187,6 +188,7 @@
</span>
</div>
<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="hour">20:30</p><p class="venue">Nona - old theater</p>
<p class="type">Film screening</p><p class="contributor">Daniela Ortiz</p>
......@@ -236,6 +238,9 @@
</span>
</div>
</article>
<div class="last-crescent"><a href="">Last <br/>crescent&nbsp;</a></div>
<div class="accordeon"><a href="">&nbsp;</a></div>
</section>
<section class="content-continious">
<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 @@
font-style: normal;
}
@font-face {
/* @font-face {
font-family: Syne;
src: url("fonts/Syne-Bold.ttf");
src: url("fonts/webfonts/Syne-Regular.woff");
font-weight: regular;
font-style: normal;
}
} */
@font-face {
font-family: Syne;
src: url("fonts/Syne-Extra.ttf");
src: url("fonts/webfonts/Syne-Extra.woff");
font-weight: bold;
font-style: normal;
}
......@@ -71,9 +71,11 @@
}
:root {
--rose: #f037af;
--vert: #008e00;
--orange: #d45500;
--blue-moon: #445fff;
--goldy: #ca9c73;
--green-moon: #8ec0b8;
--yellow-moon: #fff30e;
--pink: #f66758;
}
body {
......@@ -81,12 +83,9 @@ body {
font-size: 1.2em;
line-height: 1.3em;
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;
/* overflow: hidden; */
overflow: hidden;
margin: 0px;
}
/* width */
......@@ -96,7 +95,7 @@ body {
/* Track */
::-webkit-scrollbar-track {
background: #d6d6d6;;
background: #d6d6d6;
}
/* Handle */
......@@ -115,57 +114,62 @@ p{
display: inline;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
figure {
margin: 0;
padding: 0;
}
a:hover{
text-decoration: underline;
}
#left {
width: 33%;
}
#menu {
background-color: #fff200;
margin:0 !important;
margin: 0 !important;
height: auto;
position: fixed;
left: 0;
top: 0pt;
width: 100%;
z-index:1000;
border-bottom: 3px solid black;
padding: 5px 5px 0px 0px;
width: 34%;
z-index: 1000;
padding: 20px;
}
#menu .logo {
display: inline-block;
vertical-align: top;
width: 54%;
}
#menu img {
/*height: 10%;*/
width: 180px;
width: 86%;
margin: 0;
padding: 0;
}
#menu ul {
display: flex;
list-style-type: none;
display: inline-block;
}
#menu li {
flex: 0 0 auto;
padding-left: 20px;
padding-right: 20px;
}
#menu li:last-child {
/*margin-left: auto;*/
}
#menu a{
text-decoration: none;
/*color: black;*/
font-family: 'Syne';
/*text-transform: uppercase;*/
font-weight: bold;
font-size: 0.9em;
letter-spacing: 0.03em;
}
#menu a:hover{
text-decoration: underline;
}
#intro {
max-width: 800px;
margin: 4em 4em;
......@@ -178,10 +182,6 @@ p{
.date {
font-family: 'Syne';
font-weight: bold;
/*text-transform: uppercase;*/
/* color: #d45500; */
}
.event p.date {
display: none;
......@@ -192,10 +192,6 @@ p{
font-weight: bold;
}
.type {
/* font-family: 'Yaldevi-jaffna';
font-size: 1em;
text-transform: uppercase; */
font-family: 'LM';
font-style: italic;
font-size: 1.2em;
......@@ -204,16 +200,8 @@ font-size: 1.2em;
.venue {
font-family: 'Lack';
/* font-family: 'Tulpen One'; */
/* text-transform: uppercase; */
/* font-size: .8em; */
/* color:#008e00; */
}
/* .type {
font-family: 'Lack';
} */
.contributor {
font-family: 'Lack';
/* color:#f037af; */
......@@ -234,45 +222,41 @@ section {
display: block;
}
/* section::after {
display: inline-flex;
width: 10px;
height: 1em;
content: ' ';
font-family: 'Dauphine';
} */
section.content-day {
flex: 1 0 66%;
display: flex;
flex-direction: row;
padding-top: 40px;
display: flex;
flex-direction: row;
padding-top: 30px;
top: 0;
background-image: linear-gradient(to right, white, var(--blue-moon));
border-left: 2px solid black;
}
section.content-continious {
flex: 1 0 66%;
position: sticky;
top: 50px;
position: absolute;
top: 80px;
display: flex;
flex-direction: row;
bottom: 17px;
background-image: linear-gradient(to right, var(--orange), white);
background-image: linear-gradient(to right, white 40%, var(--blue-moon));
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 {
position: absolute;
width: 66%;
display: flex;
flex-direction: column-reverse;
float: left;
padding-top: 30px;
padding-top: 30px;
width: 68%;
background: white;
top: 0;
}
#full-moon {
left: 547px;
}
#last-crescent {
z-index: -1000;
/* background-color: green; */
......@@ -283,52 +267,67 @@ aside.content {
left:320px;
}
aside.timeline {
.timeline {
width: 33%;
/* position: fixed; */
left: 0;
top: 0pt;
}
aside.time-travel {
/*background-image: linear-gradient(to right, 0% silver , 60% white, 100% silver);*/
width: 33%;
width: 30%;
height: 900px;
/*margin-left: 96%;*/
position: absolute;
margin-top: 170px;
position: absolute;
}
aside.time-travel p {
aside.time-travel span {
margin: auto;
vertical-align: middle;
position: absolute;
text-align: center;
width: 100%;
bottom: 0;
bottom: 213px;
}
aside.time-travel p::before {
content: "← ";
.full-moon {
text-align: left;
top: 0;
}
aside.time-travel p::after {
content: " →";
.first-crescent {
text-align: left;
}
.last-crescent {
text-align: right;
right: 0;
}
aside.time-travel p::after:hover {
color: var(--orange);
span.full-moon::before {
content: "↓ ";
}
aside.time-travel p::before {
span.first-crescent::before {
content: "← ";
}
aside.time-travel p::before:hover {
color: var(--orange);
span.last-crescent::after {
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 {
position: absolute;
right: 180px;
top: 306px;
height: 40vh;
right: 94px;
top: 173px;
height: 42vh;
}
.cycle {
flex: 2 0 10%;
display: flex;
width: 33%;
left: 33%
}
.timeline img {
width: 94%;
......@@ -342,12 +341,12 @@ aside.time-travel p::before:hover {
}*/
article.day {
width: 19%;
flex: 3 0 25%;
flex: 3 0 23%;
padding-right: 30px;
padding-left: 10px;
padding-left: 30px;
overflow-y: scroll;
max-height: 830px;
margin-right: 22px;
max-height: 1170px;
/* margin-right: 22px; */
}
section.many-days {
height: 100%;
......@@ -372,39 +371,13 @@ section.many-days {
margin: 0 0px;
padding: 10px 10px;
flex: 1 0 33%;
border: 5px dashed;
margin-right: 10px;
max-width: 400px;
}
.day div.event:hover {
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 {
......@@ -461,11 +434,13 @@ width: 100%;
/* margin-top: 20px; */
margin-top: 10pt;
}
figure.preview img {
width: 100%;
}
.event.active span.detail figure.cover {
width: 100%;
margin: 0pt;
}
.event.active span.detail figure.cover img {
width: 100%;
}
......@@ -524,7 +499,7 @@ p.comment::before {
margin-top: 50px;
}
#zennegat-flotation-school {
height: 200px;
height: 360px;
}
#nona-Presentation-picha {
margin-top: 10px;
......@@ -532,7 +507,7 @@ p.comment::before {
}
#nona-lecture-workshop-léopold-lambert {
margin-top: 200px;
height: 200px;
height: 283px;
}
#nona-lunch-welcome-in-mechelen {
height: 100px;
......@@ -545,7 +520,7 @@ p.comment::before {
height: 100px;
}
#nona-film-screening-daniela-ortiz {
height: 100px;
height: 271px;
margin-top: 50px;
}
#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