Commit 36131da5 authored by Doriane's avatar Doriane 💬
Browse files

all 4 first poster of season done, with all the structure ready to make more :)))))))

parent 6a104faa
......@@ -22,3 +22,10 @@
margin: 0cm 0cm;
}
}
html{
font-size: 72pt;
}
.content{
padding: 4cm 12cm;
}
......@@ -15,3 +15,13 @@
margin: 0cm 0cm;
}
}
html{
font-size: 26pt;
}
.content{
padding: 2cm 4cm;
}
h1.douceur{
line-height: 1.3;
}
/* CSS for Paged.js interface – v0.2 */
/* Change the look */
:root {
--color-background: whitesmoke;
--color-pageSheet: #cfcfcf;
--color-pageBox: violet;
--color-paper: white;
--color-marginBox: transparent;
--pagedjs-crop-color: black;
--pagedjs-crop-shadow: white;
--pagedjs-crop-stroke: 1px;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
margin: 12px !important;
}
.pagedjs_pages {
display: flex;
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 1px var(--color-pageSheet);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
/* .pagedjs_first_page {
margin-left: var(--pagedjs-width);
} */
.pagedjs_page:last-of-type {
margin-bottom: 10mm;
}
.pagedjs_pagebox{
box-shadow: 0 0 0 1px var(--color-pageBox);
}
.pagedjs_left_page{
z-index: 20;
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
border-color: transparent;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: 0;
}
.pagedjs_right_page{
z-index: 10;
position: relative;
left: calc(var(--pagedjs-bleed-left)*-1);
}
/* show the margin-box */
.pagedjs_margin-top-left-corner-holder,
.pagedjs_margin-top,
.pagedjs_margin-top-left,
.pagedjs_margin-top-center,
.pagedjs_margin-top-right,
.pagedjs_margin-top-right-corner-holder,
.pagedjs_margin-bottom-left-corner-holder,
.pagedjs_margin-bottom,
.pagedjs_margin-bottom-left,
.pagedjs_margin-bottom-center,
.pagedjs_margin-bottom-right,
.pagedjs_margin-bottom-right-corner-holder,
.pagedjs_margin-right,
.pagedjs_margin-right-top,
.pagedjs_margin-right-middle,
.pagedjs_margin-right-bottom,
.pagedjs_margin-left,
.pagedjs_margin-left-top,
.pagedjs_margin-left-middle,
.pagedjs_margin-left-bottom {
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* uncomment this part for recto/verso book : ------------------------------------ */
/* .pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
.pagedjs_left_page{
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
border-color: var(--pagedjs-crop-color);
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: var(--pagedjs-cross-size)!important;
}
.pagedjs_right_page{
left: 0;
} */
/*--------------------------------------------------------------------------------------*/
/* uncomment this par to see the baseline : -------------------------------------------*/
/* .pagedjs_pagebox {
--pagedjs-baseline: 22px;
--pagedjs-baseline-position: 5px;
--pagedjs-baseline-color: cyan;
background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
background-size: 100% var(--pagedjs-baseline);
background-repeat: repeat-y;
background-position-y: var(--pagedjs-baseline-position);
} */
/*--------------------------------------------------------------------------------------*/
}
/* USEFUL CLASSES */
/* ___ FULLPAGE ___ */
/*
A div that as exactly the dimension of a page.
if there is too much content in it, it is not going to flow in the next one.
This can be used for cover, background, etc.
*/
.fullpage{
break-before: always;
box-sizing: border-box;
width: calc(var(--pagedjs-pagebox-width) - calc(var(--pagedjs-margin-left) + var(--pagedjs-margin-right)));
height: calc(var(--pagedjs-pagebox-height) - calc(var(--pagedjs-margin-top) + var(--pagedjs-margin-bottom)));
max-width: calc(var(--pagedjs-pagebox-width) - calc(var(--pagedjs-margin-left) + var(--pagedjs-margin-right)));
position: relative;
overflow: visible;
}
.layer{
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
}
/* ___ FOLDS ___ */
.v-folded{
display: flex;
flex-direction: row;
align-items: stretch;
}
.h-folded{
display: flex;
flex-direction: column;
align-items: stretch;
}
.v-folded > .fold,
.h-folded > .fold{
flex: 1 0 0%;
min-width: 0;
min-height: 0;
position: relative;
outline: 1px solid yellow;
}
/* ___ BLEEDS ___ */
/*
disable the in-page column that make the content
go to the next column (right side of the page)
when it reaches the bottom of the page.
this is necessary in order to use bleed
(because we make content go outside of bottom
*/
div.pagedjs_page_content{
column-width: inherit !important;
column-count: inherit !important;
}
/* bleed classes */
.bleed-full{
position: absolute;
inset: var(--bleed-overprint) !important;
}
.bleed-wrapper > .bleed-top{ top: var(--bleed-overprint); }
.bleed-wrapper > .bleed-left{ left: var(--bleed-overprint); }
.bleed-wrapper > .bleed-right{ right: var(--bleed-overprint); }
.bleed-wrapper > .bleed-bottom{ bottom: var(--bleed-overprint); }
/* ___ MICRO-TYPO ___ */
.keep{
white-space: nowrap;
}
/* ___ INTERFACE OBJECT ___ */
/* TODO: put rules here with data attribute on visible format ! */
#interface{
display: none;
background: red;
}
@media screen {
#interface{
display: flex;
gap: 1em;
}
.rules.hide{
display: none;
}
}
/* add to layout-tool */
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
/* VARIABLES
========================================================================== */
......@@ -43,8 +38,6 @@
#E86031,
#6AC3CB,
#FFEE25);
/* logos size */
--flex-logos-size: 2.25cm;
}
/* FONTS
......@@ -80,24 +73,14 @@
/* TYPOGRAPHY
========================================================================== */
/* h1.douceur{
line-height: 1.35;
text-align: center;
line-height: 1.1;
font-size: 500pt;
} */
html {
font-family: 'Ume P Gothic';
font-size: 72pt;
font-size: 18pt;
line-height: 1.4;
}
/* for spectacle title */
h1 {
font-family: 'Ume Mincho';
/* font-size: 6.2rem; */
font-size: 6rem;
letter-spacing: -0.04em;
word-spacing: -0.2em;
......@@ -141,29 +124,6 @@ h3, h4 {
line-height: 1.2;
}
/* crédit */
em {
font-family: 'Ume P Gothic vertical';
letter-spacing: 0.23em;
}
dt, dd {
display: inline;
}
dd {
font-family: 'Ume P Gothic';
font-size: 0.95em;
letter-spacing: 0.04em;
font-weight: bold;
}
/* links */
a {
text-decoration: underline;
text-decoration-thickness: 0.075em;
}
/* editeurice responsable */
.edit-resp {
text-transform: none;
......@@ -177,64 +137,84 @@ a {
position: relative;
}
.back{
background: linear-gradient(var(--very-light-grey) 25%, var(--pink));
background: linear-gradient(var(--very-light-grey) 30%, var(--pink));
}
.content{
padding: 4cm 12cm 7cm;
display: grid;
grid-template-rows: 50% 50%;
z-index: 5;
}
padding: 4cm 12cm 4cm;
grid-template-rows: 1fr 43%;
section{
position: relative;
}
/* TOP SECTION
===================================================== */
section{
position: relative;
h1.douceur{
font-size: 6.5rem;
line-height: 1.1;
text-align: center;
}
/* BOTTOM SECTION
===================================================== */
section#logo-balsa{
width: 100%;
position: relative;
#bottom{
display: flex;
justify-content: flex-end;
flex-direction: column;
margin-top: -7em;
}
section#logo-balsa > img{
/* logo */
.logo-balsa{
margin-bottom: 2em;
}
.logo-balsa > img{
display: block;
margin: 0 auto;
width: 100%;
}
/* infos text */
section#logo-balsa > h4:nth-of-type(1){
.logo-balsa > h4:nth-of-type(2){
position: absolute;
bottom: -0.2em;
left: 0;
width: 60%;
left: 50%;
bottom: 18.5%;
}
section#logo-balsa > h4:nth-of-type(2){
.logo-balsa > h4:nth-of-type(1){
position: absolute;
bottom: 18.5%;
width: 60%;
left: 0;
left: 50%;
bottom: -0.2em;
}
#edit-resp{
bottom: 0cm;
left: 0cm;
right: 0cm;
}
#flex-logos {
/* LOGOS
===================================================== */
.logos{
--flex-logos-size: 2rem;
z-index: 999;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: absolute;
bottom: 3cm;
left: 0cm;
right: 0cm;
align-items: center;
align-content: flex-end;
padding-bottom: 1em;
}
.logos > img:first-child{
width: calc(var(--flex-logos-size) * 1.25);
}
.logos .square{
height: calc(var(--flex-logos-size) / 2);
max-width: var(--flex-logos-size);
}
.logos .round{
height: calc(var(--flex-logos-size) * calc(5 / 6));
max-width: calc(var(--flex-logos-size) * calc(7 / 6));
}
.logos .line{
height: calc(var(--flex-logos-size) / 2);
max-width: calc(var(--flex-logos-size) * calc(5 / 3));
}
......@@ -27,6 +27,12 @@ This can be used for cover, 1 page document, etc.
top: 0; right: 0; left: 0; bottom: 0;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
/* ___ COLUMNS ___ */
.flowing{
......@@ -126,20 +132,15 @@ div.pagedjs_page_content{
column-count: inherit !important;
}
/* the wrapper */
.bleed-wrapper{
overflow: visible;
}
.bleed-wrapper > *{
/* bleed classes */
.bleed-full{
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
inset: var(--bleed-overprint);
}
/* bleed classes */
.bleed-wrapper > .bleed-top{ top: var(--bleed-overprint); }
.bleed-wrapper > .bleed-left{ left: var(--bleed-overprint); }
.bleed-wrapper > .bleed-right{ right: var(--bleed-overprint); }
.bleed-wrapper > .bleed-bottom{ bottom: var(--bleed-overprint); }
.bleed-top{ top: var(--bleed-overprint); }
.bleed-left{ left: var(--bleed-overprint); }
.bleed-right{ right: var(--bleed-overprint); }
.bleed-bottom{ bottom: var(--bleed-overprint); }
/* ___ MICRO-TYPO ___ */
......
......@@ -25,12 +25,7 @@
<!-- 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 -->
<!-- <link rel="stylesheet" type="text/css" href="css/formats/jcdecaux-metro.css" /> -->
......@@ -38,6 +33,10 @@
<link rel="stylesheet" type="text/css" href="css/formats/ecole-art.css" />
<link rel="stylesheet" type="text/css" href="css/formats/rules.css" />
<!-- tools -->
<link rel="stylesheet" type="text/css" href="css/tools/interface.css" />
<link rel="stylesheet" type="text/css" href="css/tools/layout-tools.css" />
<!-- DESIGN -->
<!-- <link rel="stylesheet" type="text/css" href="css/balsa-identity.css" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
......@@ -52,49 +51,51 @@
</div>
<div class="layer content">
<section id="top">
<h1 class="douceur">
En douceur<br />
2021<br />
&darr;<br />
2022
</h1>
<h1 class="douceur">En douceur<br>2021<br>&darr;<br>2022</h1>
</section>
<section id="logo-balsa">
<img src="assets/balsa/logo-21-22-alt-text.svg" />
<h4>
Avenue Félix Marchal 1, 1030 Bruxelles<br />
02 735 64 68 &mdash; reservation@balsamine.be
</h4>
<h4>Créations,
Théâtre, <br />
Danse,
Performance <br />
www.balsamine.be</h4>
<div id="flex-logos">
<img src="assets/logos/fede_wall_bru.svg">
<img class="square" src="assets/logos/culture_be.svg">
<img class="round" src="assets/logos/cocof.svg">
<img class="round" src="assets/logos/WBI.svg">
<img class="round" src="assets/logos/WBTD.svg">
<img class="round" src="assets/logos/RAB.svg">
<img class="round" src="assets/logos/art_27.svg">
<img class="square" src="assets/logos/arsene_50.svg">
<img class="round" src="assets/logos/schaerbeek.svg">
<img class="line" src="assets/logos/zinne.svg">
<img class="round" src="assets/logos/united-stages.svg">
<!-- <img class="round" src="assets/logos/loterie_nationale.svg"> -->
<!-- <img class="round" src="assets/logos/brussels_dance.svg"> -->
<!-- <img class="round" src="assets/logos/REM.svg"> -->
</div>
<div id="edit-resp">
Editrice responsable : Monica Gomes, avenue Félix Marchal,
1 &middot; 1030 Bruxelles - Design : osp.kitchen - Illustrations: Nina Cosco
</div>
<section id="bottom">
<section class="logo-balsa">
<img src="assets/balsa/logo-21-22-alt-text.svg" />
<h4>
Avenue Félix Marchal 1, 1030 Bruxelles<br />
02 735 64 68 &mdash; reservation@balsamine.be
</h4>
<h4>Créations,
Théâtre, <br />
Danse,
Performance <br />
www.balsamine.be</h4>
</section>
<footer>
<div class="logos">
<img src="assets/logos/fede_wall_bru.svg">
<img class="square" src="assets/logos/culture_be.svg">
<img class="round" src="assets/logos/cocof.svg">
<img class="round" src="assets/logos/WBI.svg">
<img class="round" src="assets/logos/WBTD.svg">
<img class="round" src="assets/logos/RAB.svg">
<img class="round" src="assets/logos/art_27.svg">
<img class="square" src="assets/logos/arsene_50.svg">
<img class="round" src="assets/logos/schaerbeek.svg">
<img class="line" src="assets/logos/zinne.svg">
<img class="round" src="assets/logos/united-stages.svg">
<!-- <img class="round" src="assets/logos/loterie_nationale.svg"> -->
<!-- <img class="round" src="assets/logos/brussels_dance.svg"> -->
<!-- <img class="round" src="assets/logos/REM.svg"> -->
</div>
<div class="edit-resp">
Editrice responsable : Monica Gomes, avenue Félix Marchal,
1 &middot; 1030 Bruxelles - Design : osp.kitchen - Illustrations: Nina Cosco
</div>