Skip to content

GitLab

Commit 79817c39 authored by ludi's avatar ludi
Browse files

Merge branch 'master' of gitlab.constantvzw.org:osp/work.balsamine.2021-2022

parents ac15933e 9af213e8
Expand all Hide whitespace changes
Inline Side-by-side
programme-print/assets/less/html2print.less
View file @ 79817c39
/**
* Computation
/* This file is part of HTML2print.
*
* HTML2print is free software: you can redistribute it and/or modify it under the
* terms of the GNU Affero General Public License as published by the Free
* Software Foundation, either version 3 of the License, or (at your option) any
* later version.
*
* HTML2print is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
* PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with HTML2print. If not, see <http://www.gnu.org/licenses/>.
*/
/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */
// TODO: find a more appropriate name
@crop: @crop-size + @bleed;
/* Computation
*/
/* GEOMETRY OF THE PAPER SHEET */
@paper-width: @page-width + ( @crop * 2 );
@paper-height: @page-height + ( @crop * 2 );
/* computes the edge size of the paper paper, which is the sum of the bleed and
* the crop sizes */
/* SIZE OF SPREAD */
@spread: @page-width * 2;
@edge: @crop-size + @bleed;
/* Computes the size of the paper paper */
@paper-width: @page-width + ( @edge * 2 );
@paper-height: @page-height + ( @edge * 2 );
/* DEFINITION OF THE PAPER paper
*/
/**
* DEFINITION OF THE PAPER SHEET
/* The @page CSS at-rule is used to define some properties of printed
* documents. We make it the size of the elements with the .paper class and
* remove any margins so they don't add up with margins specifed in elements
* with the .page class (or it's children, like .header, .main and .footer)
*
* We add 2pt to circumvent a rounding number bug in some browsers that make
* them include extra pages or shifts.
*/
@page {
size: @paper-width (@paper-height + 1);
size: @paper-width @paper-height + 2pt;
margin: 0;
}
/**
* CANVAS
/* CANVAS
*/
@media all {
body {
margin: 0;
/* Activate opentype features and kernings */
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
text-rendering: optimizeLegibility;
}
.paper {
width: @paper-width;
width: @paper-width;
height: @paper-height;
box-sizing: border-box;
/* defines a named counter and increments it every page, so we can use
* it to compute the page number */
counter-increment: page-counter;
// To make sure that one paper sheet is not splitted into different pages in the PDF
/* makes sure that pages aren't cut because of pootential unprecise unit
* conversion at printing time */
page-break-inside: avoid;
page-break-after: always;
/* clips the content if it goes out of the page, so it doesn't increase
* the format */
overflow: hidden;
/* Crop marks */
padding: @crop;
padding: @edge;
position: relative;
.crops {
width: @paper-width;
height: @paper-height;
position: absolute;
top: 0;
left: 0;
div {
border-style: solid;
border-color: black;
border-width: 0;
width: @crop;
height: @crop;
position: absolute;
box-sizing: border-box;
span {
width: @bleed;
height: @bleed;
background-color: white;
position: absolute;
}
}
.crop-top-left {
border-right-width: 1px;
border-bottom-width: 1px;
top: 0;
left: 0;
span { right: -1px; bottom: -1px;}
}
.crop-top-right {
border-left-width: 1px;
border-bottom-width: 1px;
top: 0;
right: 0;
span { left: -1px; bottom: -1px;}
}
.crop-bottom-right {
border-left-width: 1px;
border-top-width: 1px;
right: 0;
bottom: 0;
span { left: -1px; top: -1px;}
}
.crop-bottom-left {
border-right-width: 1px;
border-top-width: 1px;
left: 0;
bottom: 0;
span { right: -1px; top: -1px;}
}
}
/* Crop marks */
background-image:
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%),
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%),
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%),
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%)
;
background-size:
@crop-size 1px,
1px @crop-size,
@crop-size 1px,
1px @crop-size,
@crop-size 1px,
1px @crop-size,
@crop-size 1px,
1px @crop-size
;
background-position:
left @edge,
@edge top,
right @edge,
(@paper-width - @edge) top,
right (@paper-height - @edge),
(@paper-width - @edge) bottom,
left (@paper-height - @edge),
@edge bottom
;
background-repeat: no-repeat;
z-index: 1000;
}
.page {
/* defines the page size */
width: @page-width;
height: @page-height;
position: relative;
box-sizing: border-box;
overflow: hidden;
/* allows for absolutely positioned elements as settings the position
* property to relative as the side effect of making this elements
* top-left corner the reference point */
/*position: relative;*/
position: absolute; // FIXME: test it for printing issues
}
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
.spread {
.paper {
float: left;
}
.paper:nth-child(odd) {
margin-left: -@crop;
}
.paper:nth-child(even) {
margin-right: -@crop;
}
.paper:first-child {
margin-left: @page-width;
}
.spread .paper { float: left; }
.spread:not(.facing) .paper:nth-child(odd) { margin-left: -@edge; }
.spread:not(.facing) .paper:nth-child(even) { margin-right: -@edge; }
.spread:not(.facing) .paper:first-child { margin-left: @page-width; }
.spread.facing .paper:nth-child(even) { margin-right: initial; margin-left: -@edge; }
.spread.facing .paper:nth-child(odd) { margin-left: initial; margin-right: -@edge; }
.spread.facing .paper:first-child { margin-left: 0; }
/* CHECK IMAGE RESOLUTION */
.lo-res {
outline: 10px solid red;
}
.facing.spread {
.paper {
float: left;
}
.paper:nth-child(even) {
margin-left: -@crop;
}
.paper:nth-child(odd) {
margin-right: -@crop;
}
.paper:first-child {
margin-left: @page-width;
}
.too-big {
outline: 10px solid springgreen;
}
}
@media screen {
/* defines the background color of the workspace */
/* UI */
body { background-color: #F0F0F0; }
#pages {
width: @paper-width;
height: @paper-height;
margin-left: auto;
margin-right: auto;
}
/* FIXME: allows for printing spreads as well */
.spread #pages {
width: @paper-width * 2;
height: @paper-height * 2;
}
.paper {
/* centrer la page à l'écran */
/* UI */
background-color: white;
/* UI */
margin-top: 1em;
/* UI */
margin-bottom: 1em;
}
/* UI */
.normal .page { outline: 1px dotted lightsalmon; }
/* UI */
.preview .paper { background: transparent; }
/* UI */
.preview .page {
outline: 1px solid lightgray;
background-color: white;
overflow: hidden;
}
}
@media print {
html {
width: @paper-width;
background-color: transparent;
}
body {
/* Allows printing of background colors */
background-color: white;
/* Allows for background colors printing */
background-color: transparent;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
/* Activate opentype features and kernings */
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
text-rendering: optimizeLegibility;
}
}
/**
* Helpers
/* Helpers
*/
.region-break {
/* Apply this class to an element to put it on a new region.
* Hint:
* You can also use an empty <div class="page-break"></div>
* Hint:
* You can also use an empty <div class="page-break"></div>
* if you want to put manual page breaks without attaching it to an HTML element
*/
-webkit-region-break-before: always;
break-before: always;
}
programme-print/assets/less/html2print.less.bak 0 → 100644
View file @ 79817c39
/**
* Computation
*/
/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */
// TODO: find a more appropriate name
@crop: @crop-size + @bleed;
/* GEOMETRY OF THE PAPER SHEET */
@paper-width: @page-width + ( @crop * 2 );
@paper-height: @page-height + ( @crop * 2 );
/* SIZE OF SPREAD */
@spread: @page-width * 2;
/**
* DEFINITION OF THE PAPER SHEET
*/
@page {
size: @paper-width (@paper-height + 1);
margin: 0;
}
/**
* CANVAS
*/
@media all {
body {
margin: 0;
}
.paper {
width: @paper-width;
height: @paper-height;
box-sizing: border-box;
counter-increment: page-counter;
// To make sure that one paper sheet is not splitted into different pages in the PDF
page-break-inside: avoid;
page-break-after: always;
overflow: hidden;
/* Crop marks */
padding: @crop;
position: relative;
.crops {
width: @paper-width;
height: @paper-height;
position: absolute;
top: 0;
left: 0;
div {
border-style: solid;
border-color: black;
border-width: 0;
width: @crop;
height: @crop;
position: absolute;
box-sizing: border-box;
span {
width: @bleed;
height: @bleed;
background-color: white;
position: absolute;
}
}
.crop-top-left {
border-right-width: 1px;
border-bottom-width: 1px;
top: 0;
left: 0;
span { right: -1px; bottom: -1px;}
}
.crop-top-right {
border-left-width: 1px;
border-bottom-width: 1px;
top: 0;
right: 0;
span { left: -1px; bottom: -1px;}
}
.crop-bottom-right {
border-left-width: 1px;
border-top-width: 1px;
right: 0;
bottom: 0;
span { left: -1px; top: -1px;}
}
.crop-bottom-left {
border-right-width: 1px;
border-top-width: 1px;
left: 0;
bottom: 0;
span { right: -1px; top: -1px;}
}
}
}
.page {
width: @page-width;
height: @page-height;
position: relative;
box-sizing: border-box;
overflow: hidden;
}
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
.spread {
.paper {
float: left;
}
.paper:nth-child(odd) {
margin-left: -@crop;
}
.paper:nth-child(even) {
margin-right: -@crop;
}
.paper:first-child {
margin-left: @page-width;
}
}
.facing.spread {
.paper {
float: left;
}
.paper:nth-child(even) {
margin-left: -@crop;
}
.paper:nth-child(odd) {
margin-right: -@crop;
}
.paper:first-child {
margin-left: @page-width;
}
}
}
@media print {
html {
width: @paper-width;
}
body {
/* Allows printing of background colors */
background-color: white;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
/* Activate opentype features and kernings */
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
text-rendering: optimizeLegibility;
}
}
/**
* Helpers
*/
.region-break {
/* Apply this class to an element to put it on a new region.
* Hint:
* You can also use an empty <div class="page-break"></div>
* if you want to put manual page breaks without attaching it to an HTML element
*/
-webkit-region-break-before: always;
break-before: always;
}
programme-print/content/html/intro.html
View file @ 79817c39
......@@ -4,6 +4,9 @@
</blockquote>
<p>Durant la saison 21-22, nous célébrerons nos retrouvailles, la fin d’une crise, la réouverture du théâtre, le retour du public. Nous fêterons les artistes et le public qui nous ont cruellement manqué. Nous appliquerons un baume bienfaisant composé d’échanges et d’effusions. Nous soignerons les plaies des spectacles qui portent encore les traces d’une période trouble, de ceux qui ont vécu l’attente, l’arrêt brutal, les incertitudes, le manque de regard et d’égard. Entre œuvres reportées enfin montrées et créations de nouvelles, nous passerons le flambeau, nous accueillerons une nouvelle direction, nous expérimenterons la transition, nous ferons le deuil de l’ancienne direction pour en voir naître une autre. Nous nous retrouverons, nous retisserons nos liens. Nous ferons tout avec cœur. Tous en chœur. Pour cette ultime année involutive, nous ferons acte de douceur.</p>
<p class="signature">Monica Gomes <br/>Direction générale et artistique de la Balsamine</p>
<p class="signature" style="margin-top: 42mm;">Théâtre la Balsamine <br/>Création Théâtre . Danse . Perforance</p>
<!-- <section id="programme-en-paysage">
<h1 >Programme en paysage</h1>
<img src="https://balsamine.be/images/img-21-22/newsletter/fenetre-b.png">
......@@ -42,7 +45,7 @@
<div class="schedule__page-number"><p>p.10</p></div>
</section>
<section class="title-frame">
<h1 class="schedule__title">Schaerbeek fête la Commununauté française</h1>
<h1 class="schedule__title">Schaerbeek fête la Communauté française</h1>
<div class="schedule__additional-tags">
<h3 class="schedule__event-type">
Spectacles de cirque
......@@ -223,7 +226,7 @@
<div class="schedule__page-number"><p>p.46</p></div>
</section>
<section class="title-frame">
<h1 class="schedule__title">Todos Caerán</h1>
<h1 class="schedule__title">Todos caerán</h1>
<div class="schedule__additional-tags">
<h2 class="schedule__authors">
Le Colonel Astral
......@@ -349,6 +352,9 @@ Festival Noël au Théâtre
<h2 class="schedule__authors">
Kunstenfestivaldesarts
</h2>
<h2 class="schedule__authors">
ReForm asbl </h2>
</div>
</section>
<section class="dates-frame">
......@@ -429,7 +435,7 @@ Kunstenfestivaldesarts
</article>
<article class="schedule__item schedule__item__interface has-shape non-spectacle" data-url="saison-21-22/les-balsatoiles.html" id="les-balsatoiles">
<section class="page-number-frame">
<div class="schedule__page-number"><p>p.73</p></div>
<div class="schedule__page-number"><p>p.72</p></div>
</section>
<section class="title-frame">
<h1 class="schedule__title">Tarifs</h1>
......
programme-print/content/html/outro.html
View file @ 79817c39
......@@ -100,6 +100,7 @@ Chorale van de Trinette -->
<dd>Dominique Gilliot, Antoine Pesle et Juliette Chaigneau</dd>
<dt>France Anodine</dt>
<dt>À propos de…</dt>
<dd>Kajige Kagame</dd>
<dt>Sans Grace</dt>
......@@ -162,7 +163,7 @@ Règle
<h2 id="bar-et-restauration">Bar et restauration</h2>
<dl>
<dt>Le bar est ouvert</dt>
<dt id="bar">— à 19h pour les représentations débutants à 20h30</dt>
<dt id="bar">— à 19h pour les représentations débutant à 20h30</dt>
<dt>— 1h avant toutes les autres représentations</dt>
</dl>
<p>Une petite restauration délicieuse et faite sur place est proposée avant chaque spectacle.</p>
......@@ -177,7 +178,7 @@ Règle
<p>Être mécène, c’est participer à la pérennité des fondamentaux de la Balsamine que sont l’échange et le dialogue, la création et l’enjeu artistique et expérimental. C’est nous aider à soutenir la création artistique. C’est reconnaître et accompagner une politique qui soutient les jeunes artistes. C’est vous associer au pari de la jeunesse et de la rencontre des savoirs issus de différentes disciplines. C’est une opportunité singulière de nous permettre de poursuivre une politique tarifaire accessible à tous.</p>
<h2 id="tarif-plein">Plein → 15&#x202F;€</h2>
<h2 id="tarif-plein-prevente" class="prevente">Prévente → 12&#x202F;€</h2>
<h2 id="tarif-réduit">Réduit<span class="asterisque"><sup><img src="../../content/images/dessin/picto/picto_dodu.svg"></sup></span> → 10&#x202F;€</h2>
<h2 id="tarif-réduit">Réduit → 10&#x202F;€</h2>
<h2 id="tarif-réduit-prevente" class="prevente">Prévente 7&#x202F;€</h2>
<p><span class="asterisque"><sup><img src="../../content/images/dessin/picto/picto_dodu.svg"></sup></span>Étudiants, + de 60 ans, demandeurs d’emploi, professionnels du spectacle, schaerbeekois</p>
<h2 id="tarif-enfant">Enfant → 7&#x202F;€</h2>
......@@ -196,8 +197,8 @@ Règle
<p>Au sein du Label United Stages, la Balsamine réalise également une grande collecte de fonds à destination d’associations qui accompagnent au quotidien les plus fragilisés. Vous pouvez être solidaire de cette initiative à tout moment de la saison. Il vous suffit d’ajouter le montant que vous souhaitez verser à celui des places achetées.</p>
<h2 id="tarifs-de-groupe-à-partir-de-10-personnes">Groupes</h2>
<p>à partir de 10 personnes</p>
<h2 class="groupes">Adulte <br/>→ 10&#x202F;€ la place <br/>+ 1 place offerte à l’organisateur</h2>
<h2 class="groupes">Étudiant <br/>→ 7&#x202F;€ la place <br/>+ 1 place offerte à l’enseignant</h2>
<h2 class="groupes">Adultes <br/>→ 10&#x202F;€ la place <br/>+ 1 place offerte à l’organisateur</h2>
<h2 class="groupes">Étudiants <br/>→ 7&#x202F;€ la place <br/>+ 1 place offerte à l’enseignant</h2>
<p>Le paiement des réservations de groupe doit s’effectuer 10 jours avant la date de représentation choisie</p>
</section>
......@@ -213,7 +214,7 @@ Règle
<dt>Direction financière et administrative</dt>
<dd>Morgan Brunea</dd>
<dt><!-- Direction financière et administrative -->À partir de novembre 2021</dt>
<dd>GabrIel Nahoum</dd>
<dd>Gabriel Nahoum</dd>
<dt>Coordination générale, communication <br/>et accueil compagnies</dt>
<dd>Fanny Arvieu</dd>
<dt>Presse, promotion et relations publiques</dt>
......@@ -239,7 +240,7 @@ Règle
<dt>Designers graphique associés</dt>
<dd>Open Source Publishing</dd>
<dt>Le Conseil d’administration</dt>
<dd>Caroline de Poorter, Isabelle Dumont, <br/>André Jadoul, Estelle Marion, Francis Metzger, Emmanuelle Nizou et Christine Rygaert</dd>
<dd>Caroline de Poorter, Isabelle Dumont, André Jadoul, Estelle Marion, <br/>Francis Metzger, Emmanuelle Nizou et Christine Rygaert</dd>
<dl>
</section>
<section id="soutiens">
......
programme-print/layout/outro/styles.css
View file @ 79817c39
......@@ -157,7 +157,8 @@ font-size: 24pt;
letter-spacing: -0.03em;
margin: 0;
background: linear-gradient( pink 0%, white 75%);
padding-top: 4pt
padding-top: 4pt;
padding-left: 5pt;
}
#tarifs h2 +h2 {
margin-bottom: 8pt;
......
programme-print/layout/spectacles/index.html
View file @ 79817c39
......@@ -20,9 +20,8 @@
<div id="m-image" class="master-page paper image">
<div class="page ">
<div class=""></div>
<div class="footer"></div>
<div class="fond"></div>
<div class="footer"></div>
</div>
</div>