Commit a451dc28 authored by gijs's avatar gijs
Browse files

Prototypes for layout with pagedjs and css regions

parent 6f11351d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
counter-reset: gridItems 0;
}
body {
font-family: "Px Grotesk Regular";
}
.grid--container {
display: grid;
/* width: 210mm; */
outline: 1px dotted cyan;
/* margin: 20mm; */
grid-template-columns: [left] 1fr 1fr [middle] 1fr 1fr [right];
grid-template-rows: [top] min-content min-content min-content [bottom];
column-gap: 2.5mm;
row-gap: 2.5mm;
grid-auto-flow: row;
}
.grid--container > * {
position: relative;
counter-increment: gridItems 1;
}
.grid--container:hover > *:after {
font-size: 14px;
position: absolute;
bottom: 2mm;
right: 2mm;
content: counter(gridItems);
font-family: monospace;
text-shadow: 0px 0px .5px white;
}
.grid--container img {
max-width: 100%;
}
.control--container {
position: absolute;
top: 2mm;
left: 2mm;
font-size: 10px;
display: none;
background-color: lightgray;
padding: 1mm;
}
.grid--container > :hover .control--container {
display: inline-block;
}
input {
font-size: inherit;
}
input[type="number"] {
width: 3em;
margin-left: 1mm;
}
label {
/*! display: block; */
margin-right: 4mm;
}
.grid--container > *:hover {
outline: 1px dotted red;
}
h1.rotated {
writing-mode: vertical-lr;
writing-mode: tb;
transform: rotate(180deg);
}
.text {
grid-column: middle / right;
grid-row: top / bottom;
}
</style>
<style>
@media print {
@page {
size: A4;
}
}
.pagedjs_page_content > div {
display: grid;
grid-template-columns: [left] 1fr 1fr [middle] 1fr 1fr [right];
grid-template-rows: [top] 300px 300px 300px [bottom];
}
</style>
</head>
<body>
<section class="text">
<div>
<p>
Le projet consiste en l’aménagement complet
du Centre d’Interprétation de la Maison Losseau,
considéré comme un préambule privilégié de l’ensemble d’un site composé d’une maison Art Nouveau, d’un jardin et d’un Centre de Littérature. Le
projet comprend notamment la scénographie et la
muséographie d’une exposition permanente des
collections personnelles de Léon Losseau, l’aménagement d’un espace d’exposition temporaire, d’un
atelier créatif et d’un foyer.
Le dispositif spatial existant du Centre d’Interprétation était caractéristique de la typologie résidentielle du siècle dernier. Afin de panacher cette
composante domestique avec un environnement
public, un travail de clarification, privilégiant des
axes forts, a d’abord été mené. Ainsi, le plan s’apparente d’avantage à une grille  de petites pièces
inter-connectées offrant des perspectives permettant d’apprécier les plus grandes dimensions du
Centre d’Interprétation.  Pour incarner ces intentions,  l’aménagement intérieur pérenne se limite
à « épaissir » les murs existants en y intégrant les
éléments techniques et scénographiques.
Un soin tout particulier a ensuite été apporté au
détail et à la décomposition de chaque élément
de langage architectural : sur les murs, une plinthe
et un bandeau décoratif en chêne  traversent les
espaces  ; au sol, un terrazo avec de agrégats de
marbre blanc défini la zone d’intervention ; au plafond, un quadrillage de luminaires et laiton donne
une mesure aux espaces. Dans l’espace d’exposition permanente, le dispositif scénographique
principal est un élément « bibliothèque » qui s’apparente au cabinet de curiosité et qui constitue
le fond de scène de chacune des pièces, fabrique
les portes, rythme le parcours. Dans les salles aux
fonctions plus spécifiques, la bibliothèque se décline en mobilier usuel et devient tour à tour « bar »
dans le foyer, espace de stockage et de rangement
dans l’atelier créatif et présentoir du bookshop
dans l’espace d’accueil. Le mur « habillé » tend ainsi à devenir une reconstitution d’un certain type d’
« intérieur » renvoyant à des représentations architecturales collectives. L’objectif étant ici d’arriver
à recréer une certaine « atmosphère » parallèle à
la maison Art Nouveau classée en identifiant des
points d’attention essentiels à la fabrication de ce
« décor ».
De nombreuses collaborations ont été menées avec
divers experts, artisans, entreprises et fournisseurs mais également conservateurs, graphistes,
cinéastes, écrivains,... Cette nébuleuse ainsi créée
a profité d’un engagement jeune et enthousiaste,
lequel a été rendu possible par une maitrise globale
du projet, du budget et une autonomie dans le choix
des nombreux partenaires. Ainsi mené, le marché
public devient une réelle opportunité d’investissement et de création au service de la communauté.
</p>
</div>
<div>
<h1 class="rotated">Maison Losseau</h1>
</div>
<div>
<p>
Aménagement intérieur, scénographie,
muséographie du Centre d’Interprétation
de la Maison Losseau
</p>
<dl>
<dt>Adresse</dt> <dd>39-41 Rue de Nimy, Mons (BE)</dd>
<dt>Auteur</dt> <dd>Nord (collab. label architecture)</dd>
<dt>Client</dt> <dd>Province du Hainaut</dd>
<dt>Superficie</dt> <dd>364 m2</dd>
<dt>Budget</dt> <dd>592 087,75 € HTVA</dd>
<dt>Budget global final</dt> <dd>592 087,75 € HTVA</dd>
<dt>Début d’étude</dt> <dd>octobre 2014</dd>
<dt>Fin chantier</dt> <dd>septembre 2015</dd>
</dl>
</div>
</section>
<div><img src="../../losseau/photos/Losseau-000.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-001.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-002.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-003.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-004.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-005.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-006.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-007.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-008.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-009.jpg" /></div>
<script src="paged.polyfill.js"></script>
<!-- <script src="grid.js"></script>
<script>
initGrid('.grid--container');
</script> -->
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
/**
* 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/>.
*/
/**
* Computation
*/
:root {
/* the geometry of the page */
--page-width: 148.5mm;
--page-height: 210mm;
}
/**
* 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 .page class and
* remove any margins.
*/
@page {
/*
* 1. we would have liked to use
* `size: var(--page-width) var(--page-height);`
* but the page it does not work with css variables it seems.
* 2. the 1pt addition is to fix a rounding bug that makes the content
* overflow
*/
--page-width: 148.5mm;
--page-height: 222mm;
margin: 0;
/* size: 148.5mm calc(210mm + 1pt); [> [1] [2] <] */
size: var(--page-width) var (--page-height);
}
/**
* CANVAS
*/
@media all {
/* 1. 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 */
/* 2. defines the page size */
body { margin: 0; }
.page {
position: relative; /* [1] */
width: var(--page-width); /* [2] */
height: var(--page-height); /* [2] */
}
}
@media screen {
/* 1. defines the background color of the workspace */
/* 2. makes the page centered on screen */
body { background-color: #f0f0f0; }
#pages {
width: var(--page-width); /* [1] */
height: var(--page-height); /* [1] */
margin-right: auto; /* [2] */
margin-left: auto; /* [2] */
}
.page {
margin-top: 1em;
margin-bottom: 1em;
background-color: white;
}
}
@media print {
/* 1. allows for background colors printing */
html { width: var(--page-width); }
body {
background-color: transparent; /* [1] */
-webkit-print-color-adjust: exact; /* [1] */
print-color-adjust: exact; /* [1] */
}
}
<!DOCTYPE HTML>
<html lang="fr" class="normal">
<head>
<meta charset="utf-8">
<title>Sample document</title>
<!-- <script src="../../vendors/modernizr-custom.js"></script> -->
<!-- <script src="autopages.js"></script> -->
<!-- <link rel="stylesheet" href="../../css/html2print.css"> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- PAGES -->
<div id="pages">
<div class="sheet">
<div class="page">
<div class="main">
<div class="pictures"></div>
<div class="text"></div>
</div>
</div>
<div class="page">
<div class="main">
<div class="pictures"></div>
<div class="text"></div>
</div>
</div>
</div>
</div>
<div id="stories">
<article id="flow-main">
<section class="text">
<div>
<p>
Le projet consiste en l’aménagement complet
du Centre d’Interprétation de la Maison Losseau,
considéré comme un préambule privilégié de l’ensemble d’un site composé d’une maison Art
Nouveau, d’un jardin et d’un Centre de Littérature. Le
projet comprend notamment la scénographie et la
muséographie d’une exposition permanente des
collections personnelles de Léon Losseau, l’aménagement d’un espace d’exposition temporaire,
d’un
atelier créatif et d’un foyer.
Le dispositif spatial existant du Centre d’Interprétation était caractéristique de la typologie
résidentielle du siècle dernier. Afin de panacher cette
composante domestique avec un environnement
public, un travail de clarification, privilégiant des
axes forts, a d’abord été mené. Ainsi, le plan s’apparente d’avantage à une grille  de petites
pièces
inter-connectées offrant des perspectives permettant d’apprécier les plus grandes dimensions du
Centre d’Interprétation.  Pour incarner ces intentions,  l’aménagement intérieur pérenne se
limite
à « épaissir » les murs existants en y intégrant les
éléments techniques et scénographiques.
Un soin tout particulier a ensuite été apporté au
détail et à la décomposition de chaque élément
de langage architectural : sur les murs, une plinthe
et un bandeau décoratif en chêne  traversent les
espaces  ; au sol, un terrazo avec de agrégats de
marbre blanc défini la zone d’intervention ; au plafond, un quadrillage de luminaires et laiton
donne
une mesure aux espaces. Dans l’espace d’exposition permanente, le dispositif scénographique
principal est un élément « bibliothèque » qui s’apparente au cabinet de curiosité et qui
constitue
le fond de scène de chacune des pièces, fabrique
les portes, rythme le parcours. Dans les salles aux
fonctions plus spécifiques, la bibliothèque se décline en mobilier usuel et devient tour à tour
« bar »
dans le foyer, espace de stockage et de rangement
dans l’atelier créatif et présentoir du bookshop
dans l’espace d’accueil. Le mur « habillé » tend ainsi à devenir une reconstitution d’un certain
type d’
« intérieur » renvoyant à des représentations architecturales collectives. L’objectif étant ici
d’arriver
à recréer une certaine « atmosphère » parallèle à
la maison Art Nouveau classée en identifiant des
points d’attention essentiels à la fabrication de ce
« décor ».
De nombreuses collaborations ont été menées avec
divers experts, artisans, entreprises et fournisseurs mais également conservateurs, graphistes,
cinéastes, écrivains,... Cette nébuleuse ainsi créée
a profité d’un engagement jeune et enthousiaste,
lequel a été rendu possible par une maitrise globale
du projet, du budget et une autonomie dans le choix
des nombreux partenaires. Ainsi mené, le marché
public devient une réelle opportunité d’investissement et de création au service de la
communauté.
</p>
</div>
<div>
<h1 class="rotated">Maison Losseau</h1>
</div>
<div>
<p>
Aménagement intérieur, scénographie,
muséographie du Centre d’Interprétation
de la Maison Losseau
</p>
<dl>
<dt>Adresse</dt>
<dd>39-41 Rue de Nimy, Mons (BE)</dd>
<dt>Auteur</dt>
<dd>Nord (collab. label architecture)</dd>
<dt>Client</dt>
<dd>Province du Hainaut</dd>
<dt>Superficie</dt>
<dd>364 m2</dd>
<dt>Budget</dt>
<dd>592 087,75 € HTVA</dd>
<dt>Budget global final</dt>
<dd>592 087,75 € HTVA</dd>
<dt>Début d’étude</dt>
<dd>octobre 2014</dd>
<dt>Fin chantier</dt>
<dd>septembre 2015</dd>
</dl>
</div>
</section>
<div><img src="photos/Losseau-000.jpg" /></div>
<div><img src="photos/Losseau-001.jpg" /></div>
<div><img src="photos/Losseau-002.jpg" /></div>
<div><img src="photos/Losseau-003.jpg" /></div>
<div><img src="photos/Losseau-004.jpg" /></div>
<div><img src="photos/Losseau-005.jpg" /></div>
<div><img src="photos/Losseau-006.jpg" /></div>
<div><img src="photos/Losseau-007.jpg" /></div>
<div><img src="photos/Losseau-008.jpg" /></div>
<div><img src="photos/Losseau-009.jpg" /></div>
</article>
</div>
<!-- JAVASCRIPT -->
<script src="css-regions-polyfill.min.js"></script>
<!-- <script src="../../js/stories.js"></script> -->
<!-- <script>
function flow() {
function exec() {
var container = document.querySelector("#pages");
var template = document.querySelector(".sheet");
container.removeChild(template);
window.fitFlow("flow-main", template, container);
}
if (document.readyState !== 'complete') {
window.addEventListener("load", exec, false);
} else {
exec();
}
}
</script> -->
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
counter-reset: gridItems 0;
}
body {
font-family: "Px Grotesk Regular";
}
.grid--container {
display: grid;
/* width: 210mm; */
outline: 1px dotted cyan;
/* margin: 20mm; */
grid-template-columns: [left] 1fr 1fr [middle] 1fr 1fr [right];
grid-template-rows: [top] min-content min-content min-content [bottom];
column-gap: 2.5mm;
row-gap: 2.5mm;
grid-auto-flow: row;
}
.grid--container > * {
position: relative;
counter-increment: gridItems 1;
}
.grid--container:hover > *:after {
font-size: 14px;
position: absolute;
bottom: 2mm;
right: 2mm;
content: counter(gridItems);
font-family: monospace;
text-shadow: 0px 0px .5px white;
}
.grid--container img {
max-width: 100%;
}
.control--container {
position: absolute;
top: 2mm;
left: 2mm;
font-size: 10px;
display: none;
background-color: lightgray;
padding: 1mm;
}
.grid--container > :hover .control--container {
display: inline-block;
}
input {
font-size: inherit;
}
input[type="number"] {
width: 3em;
margin-left: 1mm;
}
label {
/*! display: block; */
margin-right: 4mm;
}
.grid--container > *:hover {
outline: 1px dotted red;
}
h1.rotated {
writing-mode: vertical-lr;
writing-mode: tb;
transform: rotate(180deg);
}
.text {
grid-column: middle / right;
grid-row: top / bottom;
}
</style>
<style>
@media print {
@page {
size: A4;
}
}
.pagedjs_page_content > div {
display: grid;
grid-template-columns: [left] 1fr 1fr [middle] 1fr 1fr [right];
grid-template-rows: [top] 300px 300px 300px [bottom];
}
</style>
</head>
<body>
<section class="text">
<div>
<p>
Le projet consiste en l’aménagement complet
du Centre d’Interprétation de la Maison Losseau,
considéré comme un préambule privilégié de l’ensemble d’un site composé d’une maison Art Nouveau, d’un jardin et d’un Centre de Littérature. Le
projet comprend notamment la scénographie et la
muséographie d’une exposition permanente des
collections personnelles de Léon Losseau, l’aménagement d’un espace d’exposition temporaire, d’un
atelier créatif et d’un foyer.
Le dispositif spatial existant du Centre d’Interprétation était caractéristique de la typologie résidentielle du siècle dernier. Afin de panacher cette
composante domestique avec un environnement
public, un travail de clarification, privilégiant des
axes forts, a d’abord été mené. Ainsi, le plan s’apparente d’avantage à une grille  de petites pièces
inter-connectées offrant des perspectives permettant d’apprécier les plus grandes dimensions du
Centre d’Interprétation.  Pour incarner ces intentions,  l’aménagement intérieur pérenne se limite
à « épaissir » les murs existants en y intégrant les
éléments techniques et scénographiques.
Un soin tout particulier a ensuite été apporté au
détail et à la décomposition de chaque élément
de langage architectural : sur les murs, une plinthe
et un bandeau décoratif en chêne  traversent les
espaces  ; au sol, un terrazo avec de agrégats de
marbre blanc défini la zone d’intervention ; au plafond, un quadrillage de luminaires et laiton donne
une mesure aux espaces. Dans l’espace d’exposition permanente, le dispositif scénographique
principal est un élément « bibliothèque » qui s’apparente au cabinet de curiosité et qui constitue
le fond de scène de chacune des pièces, fabrique
les portes, rythme le parcours. Dans les salles aux
fonctions plus spécifiques, la bibliothèque se décline en mobilier usuel et devient tour à tour « bar »
dans le foyer, espace de stockage et de rangement
dans l’atelier créatif et présentoir du bookshop
dans l’espace d’accueil. Le mur « habillé » tend ainsi à devenir une reconstitution d’un certain type d’
« intérieur » renvoyant à des représentations architecturales collectives. L’objectif étant ici d’arriver
à recréer une certaine « atmosphère » parallèle à
la maison Art Nouveau classée en identifiant des
points d’attention essentiels à la fabrication de ce
« décor ».
De nombreuses collaborations ont été menées avec
divers experts, artisans, entreprises et fournisseurs mais également conservateurs, graphistes,
cinéastes, écrivains,... Cette nébuleuse ainsi créée
a profité d’un engagement jeune et enthousiaste,
lequel a été rendu possible par une maitrise globale
du projet, du budget et une autonomie dans le choix
des nombreux partenaires. Ainsi mené, le marché
public devient une réelle opportunité d’investissement et de création au service de la communauté.
</p>
</div>
<div>
<h1 class="rotated">Maison Losseau</h1>
</div>
<div>
<p>
Aménagement intérieur, scénographie,
muséographie du Centre d’Interprétation
de la Maison Losseau
</p>
<dl>
<dt>Adresse</dt> <dd>39-41 Rue de Nimy, Mons (BE)</dd>
<dt>Auteur</dt> <dd>Nord (collab. label architecture)</dd>
<dt>Client</dt> <dd>Province du Hainaut</dd>
<dt>Superficie</dt> <dd>364 m2</dd>
<dt>Budget</dt> <dd>592 087,75 € HTVA</dd>
<dt>Budget global final</dt> <dd>592 087,75 € HTVA</dd>
<dt>Début d’étude</dt> <dd>octobre 2014</dd>
<dt>Fin chantier</dt> <dd>septembre 2015</dd>
</dl>
</div>
</section>
<div><img src="../../losseau/photos/Losseau-000.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-001.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-002.jpg" /></div>
<div><img src="../../losseau/photos/Losseau-003.jpg" /></div>