Commit 3356c2bb authored by Doriane's avatar Doriane 💬
Browse files

affiche stand by & abri

parent b435faa2
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.
......@@ -12,12 +12,7 @@
<defs
id="defs9644">
<radialGradient id="radial" gradientTransform="translate(-0.5,-0.5) scale(2)">
<stop offset="30%" stop-color="white"/>
<stop offset="75%" stop-color="pink"/>
</radialGradient>
<linearGradient id="degrade">
<linearGradient id="degrade-{{affiche.titre|slug}}" gradientTransform="rotate({{ affiche.svg_border_rotate }}, 0.5, 0.5)">
<stop
offset="0%"
style="stop-color:#FFEE25"
......@@ -72,62 +67,5 @@
id="stop1936" />
</linearGradient>
<linearGradient id="degrade-animation">
<animateTransform attributeName="gradientTransform" attributeType="XML" type="rotate" values="0, 0.5, 0.5; 360, 0.5, 0.5" repeatCount="indefinite" dur="1.2s" />
<stop
offset="0%"
style="stop-color:#FFEE25"
id="stop1912" />
<stop
offset="3%"
style="stop-color:#F7EB29"
id="stop1914" />
<stop
offset="4%"
style="stop-color:#CDDB3E"
id="stop1916" />
<stop
offset="7%"
style="stop-color:#ABCF4F"
id="stop1918" />
<stop
offset="11%"
style="stop-color:#90C55C"
id="stop1920" />
<stop
offset="15%"
style="stop-color:#7DBE66"
id="stop1922" />
<stop
offset="18%"
style="stop-color:#72B96B"
id="stop1924" />
<stop
offset="22%"
style="stop-color:#6EB86D"
id="stop1926" />
<stop
offset="44%"
style="stop-color:#F08F34"
id="stop1928" />
<stop
offset="65%"
style="stop-color:#E96732"
id="stop1930" />
<stop
offset="77%"
style="stop-color:#6C80BF"
id="stop1932" />
<stop
offset="88%"
style="stop-color:#E86031"
id="stop1934" />
<stop
offset="96%"
style="stop-color:#6AC3CB"
id="stop1936" />
</linearGradient>
</defs>
</svg>
......@@ -15,7 +15,7 @@
date_end: "26.02"
shape: "heaume.svg"
image: "todoscaeran-smallcorr.jpg"
image: "todoscaeran-smallcorr-bitsmaller.jpg"
orientation:
totem: "up"
vertical: "up"
......
---
titre: "Stand by"
auteurice: "Thi-Mai Nguyen <br/>et Mehdi Baki"
post_auteurice: "Dans le cadre de <br/>Brussels, dance! <br/>Focus on contemporary dance"
type: "Création danse"
accroche: "Une plongée dans l’intimité de deux corps <br/>et de leur rapport au monde."
credits:
- Avec : "Thi-Mai Nguyen et Medhi Baki"
credit_photo: "Thi-Mai Nguyen"
date_start: "08.03"
date_end: "12.03"
shape: "slip.svg"
svg_border_rotate: 25
image: "standby-big.png"
orientation:
totem: "down"
degrade:
totem: "up"
theme: "dark"
theme_footer: "black"
logos:
- "fede_wall_bru"
- "culture_be"
- "cocof"
- "WBI"
- "WBTD"
- "RAB"
- "art_27"
- "arsene_50"
- "brussels_dance"
---
titre: "Abri ou les casanier·e·s de l'apocalypse"
auteurice: "Silvio Palomo <br/>et le comité des fêtes"
type: "Création théâtre"
accroche: "Tou·te·s aux abris !"
credits:
- Avec: "Léonard Cornevin,<br/> Aurélien Dubreuil-Lachaud,<br/> Manon Joannotéguy,<br/> Jean-Baptiste Polge,<br/> Nicole Stankiewicz et Noémie Zurletti"
credit_photo: "Silvio Palomo"
date_start: "20.04"
date_end: "29.04"
shape: "cabane.svg"
svg_border_rotate: 150
image: "abri-big.png"
orientation:
totem: "right"
degrade:
totem: "down"
theme: "light"
theme_footer: "light"
logos:
- "fede_wall_bru"
- "culture_be"
- "cocof"
- "WBI"
- "WBTD"
- "RAB"
- "art_27"
- "arsene_50"
- "la_coop"
- "shelter_prod"
- "taxshelter_be"
- "ING"
......@@ -426,19 +426,12 @@ h1 span{
/* TODOS CAERAN
========================================================================== */
#todos-caeran.totem h1{
#todos-caeran:is(.totem, .vertical) h1{
/* width: 50%; */
font-size: 4.2em;
padding-top: 0.17em;
margin-left: -0.04em;
}
#todos-caeran.totem .titre > h4{
/* width: 46cm; */
/* width: 40cm;
position: absolute;
top: 238px;
left: 1400px; */
}
#todos-caeran.totem .picture{
background-color: black;
......@@ -450,19 +443,107 @@ h1 span{
/* background-size: 168%;
background-position: 70% -3%; */
}
#todos-caeran.totem .shape-wrapper{
#todos-caeran.vertical .picture{
background-color: black;
background-size: 98%;
background-position: 25% 140%;
}
#todos-caeran:is(.totem, .vertical) .shape-wrapper{
max-width: 75cm;
position: relative;
top: 1cm;
}
#todos-caeran.vertical .credits span:nth-of-type(3){
display: block;
}
#todos-caeran.vertical .credits span:nth-of-type(3) dt{
display: block;
}
#todos-caeran.totem .credits span:nth-of-type(3){
display: block;
}
#todos-caeran.totem .credits span:nth-of-type(3) dt{
display: block;
}
#todos-caeran.totem .auteurice{
#todos-caeran:is(.totem, .vertical) .auteurice{
position: static;
/* margin-top: 5cm;
width: 38%; */
}
/* STAND-BY
========================================================================== */
#stand-by.totem .picture{
/* classique */
background-size: auto 110%;
background-position: 26% -3%;
/* zoom */
/* background-size: auto 128%;
background-position: 34% 87%; */
/* zoom 2 */
/* background-size: auto 150%;
background-position: 40% 85%; */
}
#stand-by.totem .shape-wrapper{
max-width: 38cm;
top: -1cm;
}
#stand-by.totem .credits{
width: 19%;
margin-bottom: 27cm;
display: none;
}
#stand-by.totem .credits dt{
display: block;
}
#stand-by.totem .logos{
padding-left: 14cm;
}
/* ABRI
========================================================================== */
#abri-ou-les-casanieres-de-lapocalypse.totem :is(.titre, .auteurice, .dates){
color: black;
}
#abri-ou-les-casanieres-de-lapocalypse h1 span{
font-size: 2rem;
width: 8em;
letter-spacing: -0.04em;
word-spacing: -0.2em;
}
#abri-ou-les-casanieres-de-lapocalypse.totem .picture{
/* full */
/* background-size: 213% auto;
background-position: 58% 53%; */
/* right */
background-size: 280%;
/* right w/ blured back 1. */
background-size: auto 108%;
background-position: 53% 40%;
/* right w/ blured back 2. */
background-size: auto 107% !important;
background-position: 29% 0% !important;
/* right w/ white back */
background-size: auto 106% !important;
background-position: 32.5% -25% !important;
}
#abri-ou-les-casanieres-de-lapocalypse.totem .shape-wrapper{
max-height: 32cm;
position: relative;
top: 3cm;
max-height: 35cm;
position: relative;
top: 4cm;
}
......@@ -2,7 +2,8 @@
/* ___ TOTEM ___ */
:root{
--bleed-overprint: -4mm;
--bleed-overprint-v: -4mm;
--bleed-overprint-h: -4mm;
--visible-width: 110cm;
--visible-height: 152cm;
}
......
......@@ -3,7 +3,8 @@
/* ___ JC Decaux - mobilerVertical ___ */
:root{
--bleed-overprint: -4mm;
--bleed-overprint-v: -6.25mm;
--bleed-overprint-h: -4.75mm;
--visible-width: 110cm;
--visible-height: 161cm;
}
......@@ -15,11 +16,20 @@
Voir site/pdf JCDecaux: Mobilier Urbain (Street Furniture)
Format papier : 118.5cm x 175cm
Format impression : 117.45cm x 174.25cm -> 10.5mm x 7.5mm -> 5.25mm x 3.75mm
--> minimum print margins of: 5.25mm x 3.75mm
to which we add the actual bleeds: (let's say 4.5mm x 2.5mm -> 2.25mm x 1.25mm)
so we ends up with a format of: 117cm x 174cm
for bleed margins of: 5.25mm+2.25mm=7.5mm x 3.75mm+1.25mm=5mm
Format visible minimum : 110cm x 161cm (centré dans le format)
actually size pagedjs attribute is the size inside the bleeds
if we put bleed margins (print+overprint) of 1cmx1cm (-2cm on the format)
and the printing margins are of 5.25mmx3.75mm (w h)
it leads to overprint margins of 4.75mmx6.25mm (w h)
*/
size: 118.5cm 175cm;
bleed: 5.25mm 3.75mm;
size: 116.5cm 173cm;
bleed: 10mm 10mm;
marks: crop;
margin: 0cm 0cm;
}
......
......@@ -250,8 +250,8 @@ section.image::after {
.left section.image::after,
.right section.image::after {
top: var(--bleed-overprint);
bottom: var(--bleed-overprint);
top: var(--bleed-overprint-v);
bottom: var(--bleed-overprint-v);
width: 0.5cm;
background: var(--gradient-V);
}
......@@ -270,8 +270,8 @@ section.image::after {
.up section.image::after,
.down section.image::after {
left: var(--bleed-overprint);
right: var(--bleed-overprint);
left: var(--bleed-overprint-h);
right: var(--bleed-overprint-h);
height: 0.5cm;
background: var(--gradient-H);
}
......@@ -328,7 +328,7 @@ section.image::after {
.affiche.metro.up .pad.forme {
padding-top: 0cm;
}
.affiche:is(.totem, .vertical) .pad {
.affiche.totem .pad {
padding: 3.5cm 5cm 4cm;
}
.affiche:is(.totem, .vertical).down .pad.forme {
......@@ -338,6 +338,16 @@ section.image::after {
padding-top: 0;
}
.affiche.vertical .pad {
padding: 4cm 4.5cm 6cm;
}
.affiche.vertical .global.pad {
padding-bottom: 3.5cm;
}
.affiche.vertical.up .forme.pad {
padding-bottom: 3.5cm;
}
/* TEXT CONTENT
========================================================================== */
/* 1. titre */
......@@ -450,12 +460,18 @@ footer .balsa .logo svg {
}
/* editeurice responsable*/
:is(.totem, .vertical) .edit-resp {
.totem .edit-resp {
position: absolute;
left: 0;
bottom: -0.5cm;
width: 100%;
}
.vertical .edit-resp {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.metro .edit-resp {
padding-top: 0.5em;
}
......@@ -679,7 +695,8 @@ section.forme>.wrapper {
.affiche.totem .shape-wrapper svg path,
.affiche.totem .other-shapes svg path{
stroke: url("/totem.html#degrade");
/* stroke: url("/totem.html#degrade"); */
stroke: var(--stroke_url);
}
.affiche.vertical .shape-wrapper svg path,
.affiche.vertical .other-shapes svg path{
......@@ -729,35 +746,32 @@ section.forme>.wrapper {
/* totem */
:is(.totem, .vertical) footer{
top: -2mm;
}
.affiche:is(.totem, .vertical):is(.up, .down) .image > .picture,
.affiche:is(.totem, .vertical):is(.up, .down) .forme > .fond,
:is(.totem, .vertical) footer > .fond{
left: var(--bleed-overprint);
right: var(--bleed-overprint);
left: var(--bleed-overprint-h);
right: var(--bleed-overprint-h);
}
:is(.totem, .vertical).up .image > .picture{
top: var(--bleed-overprint);
top: var(--bleed-overprint-v);
}
:is(.totem, .vertical).down .forme > .fond{
top: var(--bleed-overprint);
top: var(--bleed-overprint-v);
}
:is(.totem, .vertical) footer > .fond{
bottom: calc(var(--bleed-overprint) - 2mm);
top: -2mm;
bottom: var(--bleed-overprint-v);
}
:is(.totem, .vertical).right .image > .picture,
:is(.totem, .vertical).left .forme > .fond{
top: var(--bleed-overprint);
right: var(--bleed-overprint);
top: var(--bleed-overprint-v);
right: var(--bleed-overprint-v);
}
:is(.totem, .vertical).left .image > .picture,
:is(.totem, .vertical).right .forme > .fond{
top: var(--bleed-overprint);
left: var(--bleed-overprint);
top: var(--bleed-overprint-v);
left: var(--bleed-overprint-v);
}
......
......@@ -130,12 +130,12 @@ div.pagedjs_page_content{
/* bleed classes */
.bleed-full{
position: absolute;
inset: var(--bleed-overprint);
inset: var(--bleed-overprint-v) var(--bleed-overprint-h);
}
.bleed-top{ top: var(--bleed-overprint); }
.bleed-left{ left: var(--bleed-overprint); }
.bleed-right{ right: var(--bleed-overprint); }
.bleed-bottom{ bottom: var(--bleed-overprint); }
.bleed-top{ top: var(--bleed-overprint-v); }
.bleed-left{ left: var(--bleed-overprint-h); }
.bleed-right{ right: var(--bleed-overprint-h); }
.bleed-bottom{ bottom: var(--bleed-overprint-v); }
/* ___ MICRO-TYPO ___ */
......
......@@ -27,17 +27,11 @@
$('#interieur .accroche .ref').appendTo('#interieur .credits');
replace('h1', 'AUDREY', 'AUDREY <br/>');
// replace("h1", "de Billy", "de <span>Billy</span>");
// replace("h1", "Le paradoxe", "Le <br/>paradoxe <br/>");
// replace("#xx-time .dates > span", "", "&rarr;");
// $("#xx-time .credits").prepend($("<div>").addClass("other-shapes"));
// for (var i = 0; i < 6; i++) {
// $("#xx-time .shape-wrapper svg").clone().first().prependTo("#xx-time .other-shapes");
// }
spanify("#xx-time h1","XX");
spanify("#abri-ou-les-casanieres-de-lapocalypse h1","ou les casanier·e·s de l'apocalypse");
}
};
</script>
......@@ -102,7 +96,7 @@
<div class="wrapper">
<div class="shape-wrapper">
<div class="shape-wrapper" style="--stroke_url: url('#degrade-interieur')">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
......@@ -332,12 +326,7 @@
<defs
id="defs9644">
<radialGradient id="radial" gradientTransform="translate(-0.5,-0.5) scale(2)">
<stop offset="30%" stop-color="white"/>
<stop offset="75%" stop-color="pink"/>
</radialGradient>
<linearGradient id="degrade">
<linearGradient id="degrade-interieur" gradientTransform="rotate(, 0.5, 0.5)">
<stop
offset="0%"
style="stop-color:#FFEE25"
......@@ -392,63 +381,6 @@
id="stop1936" />
</linearGradient>
<linearGradient id="degrade-animation">
<animateTransform attributeName="gradientTransform" attributeType="XML" type="rotate" values="0, 0.5, 0.5; 360, 0.5, 0.5" repeatCount="indefinite" dur="1.2s" />
<stop
offset="0%"
style="stop-color:#FFEE25"
id="stop1912" />
<stop
offset="3%"
style="stop-color:#F7EB29"
id="stop1914" />
<stop
offset="4%"
style="stop-color:#CDDB3E"
id="stop1916" />
<stop
offset="7%"
style="stop-color:#ABCF4F"
id="stop1918" />
<stop
offset="11%"
style="stop-color:#90C55C"
id="stop1920" />
<stop
offset="15%"
style="stop-color:#7DBE66"
id="stop1922" />
<stop
offset="18%"
style="stop-color:#72B96B"
id="stop1924" />
<stop
offset="22%"
style="stop-color:#6EB86D"
id="stop1926" />
<stop
offset="44%"
style="stop-color:#F08F34"
id="stop1928" />
<stop
offset="65%"
style="stop-color:#E96732"
id="stop1930" />
<stop
offset="77%"
style="stop-color:#6C80BF"
id="stop1932" />
<stop
offset="88%"
style="stop-color:#E86031"
id="stop1934" />
<stop
offset="96%"
style="stop-color:#6AC3CB"
id="stop1936" />
</linearGradient>
</defs>
</svg>
</div>
......@@ -490,7 +422,7 @@
<div class="wrapper">