Download raw (6.7 KB)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>affiches {{type}}</title>
<!-- scripts -->
<script src="js/jquery-3.6.0.js"></script>
<script src="js/interface.js"></script>
<script src="js/main.js"></script>
<script>
window.PagedConfig = {
// so the added interface isn't taken in the document flow
after: function() {
initInterface();
replace(".metro .edit-resp", "•", "<br/>");
insertLogosRatio(".logos");
replace(".dates time", /\./, "<span>.</span>");
$('#interieur .accroche .ref').appendTo('#interieur .credits');
replace('h1', 'AUDREY', 'AUDREY <br/>');
spanify("#xx-time h1","XX");
spanify("#abri-ou-les-casanieres-de-lapocalypse h1","ou les casanier·e·s de l'apocalypse");
}
};
</script>
<!-- pagedjs -->
<script src="js/paged.polyfill.js"></script>
<!-- tools -->
<link rel="stylesheet" type="text/css" href="css/tools/reset.css" />
<link rel="stylesheet" type="text/css" href="css/tools/interface.css" />
<link rel="stylesheet" type="text/css" href="css/tools/layout-tools.css" />
<!-- your document -->
<!-- FORMATS -->
{% if type == "metro" %}
<link rel="stylesheet" type="text/css" href="css/formats/jcdecaux-metro.css" />
{% elif type == "totem" %}
<link rel="stylesheet" type="text/css" href="css/formats/clearchannel-totem.css" />
{% elif type == "vertical" %}
<link rel="stylesheet" type="text/css" href="css/formats/jcdecaux-mobilervertical.css" />
{% endif %}
<link rel="stylesheet" type="text/css" href="css/formats/rules.css" />
<!-- DESIGN -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/ajustements.css" />
</head>
<body>
{% for affiche in affiches %}
{% if type=='metro'%}
{% set orientation = affiche.orientation.metro %}
{% elif type=='totem'%}
{% set orientation = affiche.orientation.totem %}
{% elif type=='vertical'%}
{% set orientation = affiche.orientation.vertical %}
{% endif %}
{% if type=='metro'%}
{% set degrade = affiche.degrade.metro %}
{% elif type=='totem'%}
{% set degrade = affiche.degrade.totem %}
{% elif type=='vertical'%}
{% set degrade = affiche.degrade.vertical %}
{% endif %}
{% if (affiche.theme_footer == 'inverse')
or (affiche.theme_footer == 'black')
or (type=="metro")%}
{% set logos_color = 'white' %}
{% else %}
{% set logos_color = 'black' %}
{% endif %}
<section id="{{affiche.titre|slug}}" class="affiche fullpage {{type}} {{orientation}} degrade-{{degrade}} {{affiche.theme}}">
<main>
<section class="layer divided">
<section class="image">
<div class="layer picture" style="background-image: url('/assets/images/{{affiche.image}}')">
<!-- <img src="assets/images/{{affiche.image}}"> -->
<!-- <div class="img" style="background-image: url('/assets/images/{{affiche.image}}')"></div> -->
</div>
</section>
<section class="forme pad">
<div class="layer fond">
</div>
<div class="wrapper">
<div class="shape-wrapper" style="--stroke_url: url('#degrade-{{affiche.titre|slug}}')">
{% include 'assets/shapes/' + affiche.shape %}
{% if orientation=="left" or orientation=="right"%}
<h2 class="accroche">{{affiche.accroche}}</h2>
{% endif %}
</div>
{% if orientation=="up" or orientation=="down" %}
<h2 class="accroche">{{affiche.accroche}}</h2>
{% endif %}
</div>
</section>
</section>
<section class="layer global pad">
<div class="wrapper">
<header>
<div class="titre">
<h1>{{affiche.titre}}</h1>
{% if affiche.post_titre %}
<h4>{{affiche.post_titre}}</h4>
{% endif %}
{% if affiche.spectacles %}
<h2 class="spectacles">
{% for spectacle in affiche.spectacles %}
<span>{{spectacle}}</span>
{% endfor %}
</h2>
{% endif %}
</div>
<div class="auteurice">
<h2>
{{affiche.auteurice}}<br />
{{affiche.type}}
</h2>
{% if affiche.post_auteurice %}
<h4>{{affiche.post_auteurice}}</h4>
{% endif %}
</div>
</header>
<div class="dates">
<time class="start-date">{{affiche.date_start}}</time>
<span>↓</span>
<time class="end-date">{{affiche.date_end}}</time>
{% if "heure" in affiche %}
<h2 class="hour">à {{affiche.heure}}</h2>
{% endif %}
</div>
<h4 class="credits">
{% for credit in affiche.credits %}
{% if credit is mapping %}
{% for key, value in credit.items() %}
<span>
<dt>{{key}}</dt>
<dd>{{value}}</dd>
</span>
{% endfor %}
{% else %}
<p>{{credit}}</p>
{% endif %}
{% endfor %}
{% if (type == "metro")%}
<div class="edit-resp">
Éditeur responsable : Mathias Varenne, avenue Félix Marchal, 1 - 1030 Bruxelles •
Photographie : {{affiche.credit_photo}} - Design : osp.kitchen avec Nina Cosco
</div>
{% endif %}
</h4>
</div>
</section>
</main>
<footer class="pad {{affiche.theme_footer}}">
<div class="layer fond">
</div>
<div class="wrapper">
<div class="balsa">
<div class="logo">
{% include 'assets/balsa/logo-21-22.svg' %}
</div>
<div>
<h4>
Théâtre la Balsamine <br />
Avenue Félix Marchal 1,
1030 Bruxelles <br />
www.balsamine.be
</h4>
</div>
</div>
<div class="logos">
{% for logo in affiche.logos %}
<img src="assets/logos/{{logos_color}}/{{logo}}.svg">
{% endfor %}
</div>
{% if (type != "metro")%}
<div class="edit-resp">
Éditeur responsable : Mathias Varenne, avenue Félix Marchal, 1 - 1030 Bruxelles •
Photographie : {{affiche.credit_photo}} - Design : osp.kitchen avec Nina Cosco
</div>
{% endif %}
</div>
</footer>
<!-- the stroke gradient -->
<div class="gradient-stroke">
{% include 'assets/shapes/gradient.svg' %}
</div>
</section>
{% endfor %}
</body>
</html>