Commit 3754d1f7 authored by Doriane's avatar Doriane 💬
Browse files

affiche xx time & lianes totem

parent a651b89c
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
......@@ -2,11 +2,11 @@
titre: "Les lianes"
auteurice: "Françoise Berlanger"
type: "Création théâtre et musique"
post_auteurice: "En partenariat et co-présentation <br/>avec Ars Musica"
type: "Création théâtre <br/>et musique"
post_auteurice: "En partenariat <br/>et co-présentation <br/>avec Ars Musica"
accroche: "D'un corps à l'autre. Vie et métamorphoses."
credits:
- Avec: "Caroline Daish, Daya Hallé, Katia Lecomte Mirsky et Emilienne Tempels"
- Avec: "Caroline Daish, Daya Hallé, Katia Lecomte Mirsky <br/>et Emilienne Tempels"
- Piano: "Fabian Fiorini"
- "Musique électronique": "Mika Oki"
credit_photo: "Théodore Marković"
......@@ -15,13 +15,15 @@
date_end: "17.11"
shape: "serpent.svg"
image: "lianes.jpg"
image: "lianes-FULLHD.png"
orientation:
metro: "down"
totem: "down"
degrade:
metro: "left"
totem: "left"
theme: "light"
theme_footer: "light"
theme_footer: "dark"
logos:
- "fede_wall_bru"
......
......@@ -2,7 +2,7 @@
titre: "XX TIME"
spectacles:
- "Toujours&nbsp;de&nbsp;¾&nbsp;FACE!"
- "Toujours&nbsp;de&nbsp;¾&nbsp;FACE !"
- "Sans&nbsp;Grace"
- "In my big fireworks I play to you the&nbsp;final bouquet"
- "Forces"
......@@ -18,11 +18,13 @@
date_end: "02.12"
shape: "chromosome.svg"
image: "xx-time-FULLHD.jpg"
image: "xx-time-FULLHD-large.png"
orientation:
metro: "right"
totem: "up"
degrade:
metro: "down"
totem: "down"
theme: "light"
theme_footer: "light"
......
......@@ -143,7 +143,6 @@
background-position: 100% 55%;
}
#le-paradoxe-de-billy .shape-wrapper{
max-height: 37cm;
position: relative;
top: 1cm;
......@@ -160,8 +159,8 @@
padding-top: 0.175em;
}
#20-octobre-1968-mexico.totem .picture{
background-size: auto;
background-position: 68% 72%;
background-size: 100% auto;
/* background-position: 68% 72%; */
}
#20-octobre-1968-mexico.totem .shape-wrapper{
max-height: 36cm;
......@@ -185,121 +184,202 @@
/* lianes
========================================================================== */
/* shape */
#les-lianes .shape-wrapper{
position: relative;
top: 1cm;
max-height: 28cm !important;
/* left: 2cm; */
/* left: 8cm; */
}
#les-lianes.metro .shape-wrapper{
max-height: 28cm !important;
top: 1cm;
}
#les-lianes.totem .shape-wrapper{
max-height: 31cm;
position: relative;
top: 4cm;
}
/* picture */
#les-lianes.metro .picture{
background-position: 0% 45%;
background-size: 108% auto;
}
#les-lianes.totem .picture{
/* background-position: 40% 40%;
background-size: 180% auto; */
/* background-position: 20% 46%;
background-size: 105% auto; */
background-position: 40% 35.2%;
background-size: 190% auto;
}
/* others */
#les-lianes.metro .credits {
left: calc(50% + 4cm);
right: 4cm;
/* bottom: auto;
top: calc(50% + 8cm);
left: calc(50% + 12cm); */
}
#les-lianes.metro footer {
right: 50%;
left: 0;
}
#les-lianes.metro .auteurice{
margin-top: -2cm;
}
/* #les-lianes.metro .accroche{
bottom: 2.5cm;
} */
#les-lianes.metro .edit-resp {
padding-top: 1.25em;
}
#les-lianes.totem .credits {
bottom: -1.5cm;
}
/* XX Times
========================================================================== */
#xx-time .shape-wrapper{
position: relative;
top: 15cm;
z-index: 50000;
max-height: 46cm;
}
#xx-time .spectacles > span:nth-child(5),
#xx-time .spectacles > span:nth-child(6),
#xx-time .spectacles > span:nth-child(7){
#xx-time .spectacles > span{
white-space: nowrap;
}
/* .spectacles span:not(:last-child):after{
content: " / ";
} */
.spectacles span:before{
content: "";
width: 0.3em;
height: 0.3em;
margin-bottom: 0.2em;
display: inline-block;
background: black;
background: currentColor;
border-radius: 50%;
margin-right: 0.45em;
margin-left: 0.2em;
}
.spectacles span:nth-child(1):before{
/* background-color: var(--gc-yellow); */
display: none;
}
.spectacles span:nth-child(2):before{
/* background-color: var(--gc-green); */
}
.spectacles span:nth-child(2){
margin-right: 0em;
}
.spectacles span:nth-child(3):before{
/* background-color: var(--gc-orange); */
display: none;
}
.spectacles span:nth-child(4):before{
/* background-color: var(--gc-cyan); */
}
.spectacles span:nth-child(5):before{
/* background-color: var(--gc-indigo); */
.metro .spectacles span:nth-child(5):before{
display: none;
}
.spectacles span:nth-child(6):before{
/* background-color: var(--gc-green); */
.metro .spectacles span:nth-child(7):before{
display: none;
}
.spectacles span:nth-child(5){
/* margin-right: 1em; */
.totem .spectacles span:nth-child(5):before{
display: none;
}
.spectacles span:nth-child(7):before{
/* background-color: var(--gc-orange); */
/* test special */
/* .totem .spectacles span:nth-child(2):before{
display: none;
}
.totem .spectacles span:nth-child(2){
margin-left: 35cm
} */
#xx-time.totem .spectacles{
position: absolute;
color: black;
/* divided display */
/* top: calc(50% + 22cm);
left: 0;
right: 0;
columns: 2;
column-gap: 28cm; */
/* bottom display */
word-spacing: -0.13em;
left: 0; right: 0;
/* bottom: 9cm; */
top: calc(56% + 4cm);
}
#xx-time.totem .credits{
width: 77%;
/* picture 1 */
/* #xx-time.metro .picture{
background-position: 45% 50%;
/* up white */
/* color: white;
bottom: 49%;
width: 40%; */
}
/* one line each */
/* #xx-time.totem .spectacles span{
display: block;
}
#xx-time.totem .spectacles span{
margin-left: 0.5em;
text-indent: -0.5em;
} */
/* shape */
#xx-time.metro .shape-wrapper{
position: relative;
top: 15cm;
z-index: 50000;
max-height: 46cm;
}
#xx-time .shape-wrapper svg path{
transform: rotate(-10deg);
transform: rotate(90deg);
transform-box: fill-box;
transform-origin: center;
}
#xx-time.totem .shape-wrapper{
position: relative;
max-height: 38cm;
top: 7cm;
/* divided display */
/* top: -3cm; */
/* bottom display */
/* max-height: 35cm;
top: -8cm; */
/* picture 2 */
/* special display */
/* max-height: 38cm;
top: -3.5cm; */
}
/* picture */
#xx-time.metro .picture{
background-position: 68% 100%;
background-size: auto 122%;
/* background-position: 68% 100%;
background-size: auto 122%; */
}
#xx-time.totem .picture{
background-color: black;
/* p1 small */
/* background-size: 75% auto;
background-position: 50% 72%; */
background-size: 115% auto;
background-position: 50% 40%;
/* p1 big */
/*
background-size: 96% auto;
background-position: 50% 79%;
*/
}
/* title */
h1 span{
display: block;
/* font-size: 5em; */
}
/* other */
#xx-time.totem .credits{
/* up white */
color: white;
bottom: 62%;
width: 29%;
}
#xx-time.totem .shape-wrapper{
top: -6cm;
}
#xx-time.totem .spectacles{
bottom: 0cm;
top: auto;
}
......@@ -545,13 +545,15 @@ footer.black .logo svg path{
.logos>*{
flex-grow: 1;
flex-shrink: 0;
min-width: 0;
min-height: 0;
/* flex-basis: var(--flex-logos-size); */
flex-basis: 0;
max-width: calc(var(--flex-logos-size) * 1.25);
max-height: var(--flex-logos-size);
}
.metro .logos{
min-width: 0;
min-height: 0;
flex-basis: 0;
}
.logos>img:first-child {
max-width: calc(var(--flex-logos-size) * 1.6);
......
......@@ -34,6 +34,8 @@
// $("#xx-time .shape-wrapper svg").clone().first().prependTo("#xx-time .other-shapes");
// }
spanify("#xx-time h1","XX");
}
};
</script>
......@@ -472,9 +474,9 @@
<section class="image">
<div class="layer picture" style="background-image: url('/assets/images/lianes.jpg')">
<!-- <img src="assets/images/lianes.jpg"> -->
<!-- <div class="img" style="background-image: url('/assets/images/lianes.jpg')"></div> -->
<div class="layer picture" style="background-image: url('/assets/images/lianes-FULLHD.png')">
<!-- <img src="assets/images/lianes-FULLHD.png"> -->
<!-- <div class="img" style="background-image: url('/assets/images/lianes-FULLHD.png')"></div> -->
</div>
</section>
......@@ -531,10 +533,10 @@
<div class="auteurice">
<h2>
Françoise Berlanger<br />
Création théâtre et musique
Création théâtre <br/>et musique
</h2>
<h4>En partenariat et co-présentation <br/>avec Ars Musica</h4>
<h4>En partenariat <br/>et co-présentation <br/>avec Ars Musica</h4>
</div>
</header>
......@@ -552,7 +554,7 @@
<span>
<dt>Avec</dt>
<dd>Caroline Daish, Daya Hallé, Katia Lecomte Mirsky et Emilienne Tempels</dd>
<dd>Caroline Daish, Daya Hallé, Katia Lecomte Mirsky <br/>et Emilienne Tempels</dd>
</span>
......@@ -589,7 +591,7 @@
</main>
<footer class="pad light">
<footer class="pad dark">
<div class="layer fond">
</div>
......@@ -869,9 +871,9 @@
<section class="image">
<div class="layer picture" style="background-image: url('/assets/images/xx-time-FULLHD.jpg')">
<!-- <img src="assets/images/xx-time-FULLHD.jpg"> -->
<!-- <div class="img" style="background-image: url('/assets/images/xx-time-FULLHD.jpg')"></div> -->
<div class="layer picture" style="background-image: url('/assets/images/xx-time-FULLHD-large.png')">
<!-- <img src="assets/images/xx-time-FULLHD-large.png"> -->
<!-- <div class="img" style="background-image: url('/assets/images/xx-time-FULLHD-large.png')"></div> -->
</div>
</section>
......@@ -971,7 +973,7 @@
<h2 class="spectacles">
<span>Toujours&nbsp;de&nbsp;¾&nbsp;FACE!</span>
<span>Toujours&nbsp;de&nbsp;¾&nbsp;FACE !</span>
<span>Sans&nbsp;Grace</span>
......
......@@ -34,6 +34,8 @@
// $("#xx-time .shape-wrapper svg").clone().first().prependTo("#xx-time .other-shapes");
// }
spanify("#xx-time h1","XX");
}
};
</script>
......
This diff is collapsed.
Supports Markdown
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