Commit 1deb496f authored by sarah's avatar sarah
Browse files

Merge branch 'master' of gitlab.constantvzw.org:osp/work.nord

parents 88a9f089 f47980bc
This diff is collapsed.
(function () {
var templates = [
];
function generateGridRowsDeclaration (rows, pages) {
var declaration = '';
for (var p = 1; p <= pages; p++) {
if (p == 1) {
declaration = '[page-1-sheet-start page-1-padding-top start] var(--padding-top)\n';
}
for (var r = 1; r <= rows; r++) {
var rowLineName = 'page-' + p + '-' + r;
if (r == 1) {
rowLineName += ' page-' + p + '-start'
}
declaration += '[' + rowLineName + '] var(--row-height)\n';
}
declaration += '[page-' + p + '-end page-' + p + '-padding-bottom] var(--padding-bottom)\n';
if (p == pages) {
// Last page. Add 'final' line
declaration += '[page-' + p + '-sheet-end end]'
} else {
// Add line for end of current page and start of the next one
declaration += '[page-' + p + '-sheet-end page-' + (p + 1) + '-sheet-start page-' + (p + 1) + '-padding-top] var(--padding-top)\n';
}
}
return declaration;
}
function setPages () {
var pageCount = 3,
container = document.querySelector('.grid--container'),
rowsDeclaration = generateGridRowsDeclaration(8, pageCount),
pageSeparators = document.querySelectorAll('.page-separator'),
textBlocks = document.querySelectorAll('.textblock');
for (var s = (pageSeparators.length - 1); s > -1 ; s--) {
pageSeparators[s].remove();
}
for (var t = (textBlocks.length - 1); t > -1; t--) {
textBlocks[t].remove();
}
container.style.gridTemplateRows = rowsDeclaration;
for (var p = 1; p <= pageCount; p++) {
var textBlock = document.createElement('section');
textBlock.classList.add('textblock');
textBlock.dataset.flowFrom = 'text-flow-1';
textBlock.style.gridRow = 'page-' + p + '-start / page-' + p + '-end';
textBlock.style.gridColumn = 'span 2 / right';
container.appendChild(textBlock);
var separatorStart = document.createElement('div');
separatorStart.classList.add('page-separator');
separatorStart.style.gridRow = 'page-' + p + '-sheet-start'
container.appendChild(separatorStart);
var separatorStart = document.createElement('div');
separatorStart.classList.add('page-separator');
separatorStart.style.gridRow = 'span 1 / page-' + p + '-sheet-end'
container.appendChild(separatorStart);
}
}
window.setPages = setPages;
})();
\ No newline at end of file
(function () {
function initGrid (selector) {
// set cols
var setOrder = (element) => (value) => {
element.style.order = parseInt(value);
}
var setCols = (element) => (value) => {
element.style.gridColumnEnd = 'span ' + parseInt(value).toString();
}
// set rows
var setRows = (element) => (value) => {
element.style.gridRowEnd = 'span ' + parseInt(value).toString();
}
function makeControl(label, onChange, defaultValue) {
var controlInput = document.createElement('input'),
controlLabel = document.createElement('label');
controlLabel.appendChild(document.createTextNode(label));
controlInput.type = 'number';
controlInput.value = parseInt(defaultValue);
controlInput.addEventListener('change', function () { onChange(this.value) });
controlLabel.appendChild(controlInput);
return controlLabel;
}
// construct a control to set height and width
// optionally positioning by setting grid row and col
function addGridControls(element) {
var rowControl = makeControl('Height', setRows(element), 1),
colControl = makeControl('Width', setCols(element), 1),
orderControl = makeControl('Order', setOrder(element), 0),
container = document.createElement('section');
container.classList.add('control--container');
container.appendChild(rowControl);
container.appendChild(colControl);
container.appendChild(orderControl);
element.appendChild(container);
}
document.querySelectorAll(selector).forEach((gridContainer) => {
var gridItems = gridContainer.children;
for (let i = 0; i < gridItems.length; i++) {
addGridControls(gridItems[i]);
}
})
}
window.initGrid = initGrid;
})();
\ 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>
<link rel="style" href="reset.css" media="all">
<style>
:root {
counter-reset: gridItems 0;
}
:root {
--sheet-height: 297mm;
--sheet-width: 210mm;
--padding-left: 20mm;
--padding-right: 20mm;
--padding-top: 15mm;
--padding-bottom: 15mm;
--columns: 4;
--rows: 8;
--row-height: calc((var(--sheet-height) - var(--padding-top) - var(--padding-bottom)) / var(--rows));
}
.grid--container {
padding: 0;
border: 1px dotted red;
display: grid;
width: var(--sheet-width);
grid-template-rows: [page-1-sheet-start page-1-padding-top start] var(--padding-top)
[page-1-start page-1-1] var(--row-height)
[page-1-2] var(--row-height)
[page-1-3] var(--row-height)
[page-1-4] var(--row-height)
[page-1-end page-1-padding-bottom] var(--padding-bottom)
[page-1-sheet-end page-2-sheet-start page-2-padding-top] var(--padding-top)
[page-2-start page-2-1] var(--row-height)
[page-2-2] var(--row-height)
[page-2-3] var(--row-height)
[page-2-4] var(--row-height)
[page-2-end page-2-padding-bottom] var(--padding-bottom)
[page-2-sheet-end page-3-sheet-start page-3-padding-top] var(--padding-top)
[page-3-start page-3-1] var(--row-height)
[page-3-2] var(--row-height)
[page-3-3] var(--row-height)
[page-3-4] var(--row-height)
[page-3-end page-3-padding-bottom] var(--padding-bottom)
[page-3-sheet-end page-4-sheet-start page-4-padding-top] var(--padding-top)
[page-4-start page-4-1] var(--row-height)
[page-4-2] var(--row-height)
[page-4-3] var(--row-height)
[page-4-4] var(--row-height)
[page-4-end page-4-padding-bottom] var(--padding-bottom)
[page-4-sheet-end end];
grid-template-columns: [sheet-left padding-left] var(--padding-left) [left] repeat(var(--columns), 1fr) [right padding-right] var(--padding-right) [sheet-right];
grid-auto-flow: row dense;
column-gap: 2.5mm;
row-gap: 2.5mm;
grid-auto-flow: row;
outline: 1px dotted cyan;
}
.page-separator {
grid-column: sheet-left / sheet-right;
background: linear-gradient(to bottom, transparent calc(var(--padding-bottom) - .5px), red calc(var(--padding-bottom) - .5px), red calc(var(--padding-bottom) + 0.5px), transparent calc(var(--padding-bottom) + 0.5px));
}
#page-separator-0 {
grid-row: page-1-padding-top;
}
#page-separator-1 {
grid-row: page-1-end / page-2-start;
}
#page-separator-2 {
grid-row: page-2-end / page-3-start;
}
#page-separator-3 {
grid-row: page-3-end / page-4-start;
}
.vertical-separator {
grid-row: start / end;
}
#vertical-separator-left {
grid-column: padding-left;
}
#vertical-separator-right {
grid-column: padding-right;
}
body {
font-family: "Px Grotesk Regular";
}
.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;
}
figure {
margin: 0;
}
.grid--container figure,
.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 !important;
}
input {
font-size: inherit;
}
input[type="number"] {
width: 3em;
margin-left: 1mm;
}
label {
display: inline-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;
}
[data-flow-into="text-flow-1"] * {
-webkit-flow-into: text-flow-1;
flow-into: text-flow-1;
}
[data-flow-from="text-flow-1"] {
-webkit-flow-from: text-flow-1;
flow-from: text-flow-1;
}
cssregion * {
block-size: initial !important;
inline-size: initial !important;
}
figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<section class="grid--container">
<figure><img src="../../losseau/photos/Losseau-000.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-001.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-002.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-003.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-004.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-005.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-006.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-007.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-008.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-009.jpg" /></figure>
<div class="vertical-separator" id="vertical-separator-left"></div>
<div class="vertical-separator" id="vertical-separator-right"></div>
<div class="page-separator" id="page-separator-0"></div>
<div class="page-separator" id="page-separator-1"></div>
<div class="page-separator" id="page-separator-2"></div>
<div class="page-separator" id="page-separator-3"></div>
<section class="textblock" data-flow-from="text-flow-1" style="grid-row: page-1-start / page-1-end; grid-column: span 2 / right"></section>
<section class="textblock" data-flow-from="text-flow-1" style="grid-row: page-2-start / span 2; grid-column: 3 / 5"></section>
<section class="textblock" data-flow-from="text-flow-1" style="grid-row: page-2-3 / span 2; grid-column: 5"></section>
</section>
<section class="text-source" data-flow-into="text-flow-1">
<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>
<!-- <script src="paged.polyfill.js"></script> -->
<!-- <script src="grid.js"></script>
<script>
initGrid('.grid--container');
</script> -->
<script src="generateCSS.js"></script>
<script>
setPages();
</script>
<script src="css-regions-polyfill.min.js"></script>
<script src="grid.js"></script>
<script>
initGrid('.grid--container');
</script>
</body>
</html>
\ No newline at end of file
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
\ No newline at end of file
[ ] A flow source for the text
[ ] Flow destinations for text. Position them on the grid.
[ ] Make sure there is one grid for all images and text containers. Insert page breaks.
[ ] Generate rows
[ ] Generate columns
[ ] Generate textboxes (depends on templates)
[ ] Allow for templates, define textboxes on those templates (dimensions, positions)
\ No newline at end of file
......@@ -47,6 +47,7 @@
.main .text {
flex: 1 0;
padding: 0 2mm;
}
.main .pictures {
......@@ -73,11 +74,7 @@ h1:nth-of-type(n+2) {
`page` works in native, doesn't work in the polyfill
`region` works on native, causes an infinite loop in polyfill
*/
-webkit-region-break-before: always;
region-break-before: always;
break-before: region;
}
-webkit-region-break-before: always;grid/regions/style.css
.pictures *,
.text * {
block-size: initial !important;
......@@ -92,10 +89,10 @@ h1:nth-of-type(n+2) {
.pictures div {
display: inline-block;
max-width: 45%;
width: 50%;
max-width: calc(50% - 4mm);
width: calc(50% - 4mm);
vertical-align: top;
padding: 5px;
margin: 2mm;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment