Commit c776bf39 authored by sarah's avatar sarah
Browse files

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

parents 03c91947 99787c15
(function () {
var templates = [
];
function generateGridRowsDeclaration (rows, pages) {
var declaration = '';
class GridEditor {
constructor (root, pageCount) {
this.root = root;
this.gridRowCount = parseInt(getComputedStyle(this.root).getPropertyValue('--rows'));
this.gridColumnCount = parseInt(getComputedStyle(this.root).getPropertyValue('--columns'));
this.pageCount = pageCount;
this.draw();
}
for (var p = 1; p <= pages; p++) {
if (p == 1) {
declaration = '[page-1-sheet-start page-1-padding-top start] var(--padding-top)\n';
templates = [
function (page) {
var textBlock = document.createElement('section');
textBlock.classList.add('textblock');
textBlock.dataset.flowFrom = 'text-flow-1';
textBlock.style.gridRow = 'page-' + page + '-start / page-' + page + '-end';
textBlock.style.gridColumn = 'span 2 / right';
return [ textBlock ];
}
for (var r = 1; r <= rows; r++) {
var rowLineName = 'page-' + p + '-' + r;
]
addElement (element) {
this.root.appendChild(element);
}
generateGridRowsDeclaration () {
var declaration = '';
for (let p = 1; p <= this.pageCount; p++) {
if (p == 1) {
declaration = '[page-1-sheet-start page-1-padding-top start] var(--padding-top)\n';
}
if (r == 1) {
rowLineName += ' page-' + p + '-start'
for (let r = 1; r <= this.gridRowCount; r++) {
let rowLineName = 'page-' + p + '-' + r;
if (r == 1) {
rowLineName += ' page-' + p + '-start'
}
declaration += '[' + rowLineName + '] calc((var(--sheet-height) - var(--padding-top) - var(--padding-bottom)) / var(--rows))\n';
}
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';
declaration += '[page-' + p + '-end page-' + p + '-padding-bottom] var(--padding-bottom)\n';
if (p == this.pageCount) {
// 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;
}
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');
setGridRowCount (rowCount) {
this.gridRowCount = rowCount;
this.root.style.setProperty('--rows', rowCount)
}
for (var s = (pageSeparators.length - 1); s > -1 ; s--) {
pageSeparators[s].remove();
setGridColumnCount (columnCount) {
this.gridColumnCount = columnCount;
this.root.style.setProperty('--columns', columnCount);
}
for (var t = (textBlocks.length - 1); t > -1; t--) {
textBlocks[t].remove();
setPageCount (pageCount) {
this.pageCount = pageCount;
}
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);
draw () {
let rowsDeclaration = this.generateGridRowsDeclaration(),
pageSeparators = this.root.querySelectorAll('.page-separator'),
textBlocks = this.root.querySelectorAll('.textblock');
for (let s = (pageSeparators.length - 1); s > -1 ; s--) {
pageSeparators[s].remove();
}
for (let t = (textBlocks.length - 1); t > -1; t--) {
textBlocks[t].remove();
}
this.root.style.gridTemplateRows = rowsDeclaration;
for (let p = 1; p <= this.pageCount; p++) {
const pageElements = this.templates[0](p);
pageElements.forEach((e) => { this.addElement(e) });
const separatorStart = document.createElement('div');
separatorStart.classList.add('page-separator');
separatorStart.style.gridRow = 'page-' + p + '-sheet-start'
this.addElement(separatorStart);
const separatorEnd = document.createElement('div');
separatorEnd.classList.add('page-separator');
separatorEnd.style.gridRow = 'span 1 / page-' + p + '-sheet-end'
this.addElement(separatorEnd);
}
}
}
window.setPages = setPages;
window.GridEditor = GridEditor
})();
\ No newline at end of file
......@@ -188,6 +188,10 @@
</style>
</head>
<body>
<label>Pages: <input type="number" id="input--page-count" min="1" /></label>
<label>Columns: <input type="number" id="input--column-count" min="1" /></label>
<label>Rows: <input type="number" id="input--row-count" min="1" /></label>
<section class="grid--container">
<figure><img src="../../losseau/photos/Losseau-000.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-001.jpg" /></figure>
......@@ -284,7 +288,29 @@
</script> -->
<script src="generateCSS.js"></script>
<script>
setPages();
// setPages(8, 3);
editor = new GridEditor(document.querySelector('.grid--container'), 3);
inputColumnCount = document.getElementById('input--column-count');
inputColumnCount.value = editor.gridColumnCount;
inputColumnCount.addEventListener('change', function () {
editor.setGridColumnCount(this.value);
editor.draw();
});
inputRowCount = document.getElementById('input--row-count');
inputRowCount.value = editor.gridRowCount;
inputRowCount.addEventListener('change', function () {
editor.setGridRowCount(this.value);
editor.draw();
});
inputPageCount = document.getElementById('input--page-count');
inputPageCount.value = editor.pageCount;
inputPageCount.addEventListener('change', function () {
editor.setPageCount(this.value);
editor.draw();
});
</script>
<script src="css-regions-polyfill.min.js"></script>
<script src="grid.js"></script>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="project-styles.css">
<!-- <link rel="stylesheet" type="text/css" href="reset.css"> -->
<title>Nord</title>
</head>
<body>
<main>
<!-- level 1 -->
<section id="project-intro">
<h1>Caberdouche</h1>
<p class="short-description">Transformation de deux cafés bar en un bar brasserie.
</p>
<dl class="intro-data">
<dt>Auteur</dt>
<dd>Nord</dd>
<dt>Rôle</dt>
<dd>Architecte, mission complète</dd>
<dt>Adresse</dt>
<dd>Place de la Liberté, 7&8 Bruxelles (BE)</dd>
<dt>Dates</dt>
<dd>2016-2018</dd>
<dt>Categorie</dt>
<dd>(type)</dd>
<dt>Award</dt>
<dd>Equerre d'Argent 2026</dd>
</dl>
<figure>
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_2_04.jpg" />
</figure>
<figure>
<img src="../layouts/print/pict/01_plans/02_caberdouche_160615_2REZ.jpg" />
</figure>
</section>
<!-- level 2 -->
<section id="project-description">
<p>
Le bar le Carberdouche est situé sur la Place la Liberté, dans un quartier résidentiel à Bruxelles jouissant d’un cadre exceptionnel. Au calme et à l’abri de la circulation, la place est cependant bien connectée, et est à proximité directe du centre de le ville et du Parc Royal, ainsi que de la « petite cein- ture ». Cadrée par une série de bâtiments néo-clas- siques, agréablement verdurisée par de majestueux arbres, la place voyaient trois bars distincts s’ou- vrir sur une zone pavée et piétonne. Ceux-ci étaient contigus et logés au rez-de-chaussée d’un im- meuble de style éclectique teinté de Renaissance. Avec les années, la façade largement vitrée et ho- mogène s’était cependant vu considérablement altérée et traduisait le partionnage des 3 entités Horeca ainsi qu’un rapport beaucoup plus confiden- tiel entre intérieur et extérieur, les vitrines ayant été réduites dans leur hauteur et chargées d’éléments de décorations et de signalisation hétérogènes. La commande concernait la fusion des établisse- ments central et de droite en un seul bar/brasserie convivial. L’enjeu parallèle étant de redonner une cohérence extérieure à l’ensemble de l’immeuble. Indépendamment d’un travail relatif à la création d’une certaine « atmoshphère » intérieure, ainsi que la volonté de rencontrer une réelle ergonomie.
</p>
<figure>
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_2_06bis.jpg" />
</figure>
<p>
Raisons la présentation de cette référence dans le cadre de cette candidature :
Le projet pour le bar Le Caberdouche est un marché privé qui a été confié à Nord suite à une entente mutuelle avec une équipe de jeunes entrepreneurs bruxellois à l’initiative de plusieurs hauts lieux de la vie sociale bruxelloise (La Maison du Peuple et La Biche à Saint Gilles). Une collaboration singulièrea été menée au moment de la conception, les retours sur expériences des clients ayant pleinement contribué à l’orientation finale du projet. L’ « ambiance » d’un bar, ce qui en faisait son essence a été longuement débattu. De nombreux lieux ont été visités, analysés, critiqués, afin d’une part, de trouver une façon de se singulariser et, d’autre part, com-prendre les éléments générant les qualités (un bar en angle par exemple, est ainsi apparemment un atout indéniable). La conception du pôle bar-comptoir-cuisine a fait l’objet d’une attention toute particulière. Une recherche d’expression autant que d’ergonomie a été réalisée, acceptant notamment les adaptations in situ durant le chantier et est par ailleurs issu d’un relevé précis de plusieurs hauteurs de comptoirs à travers la capitale.
</p>
<figure>
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_11BIS.jpg" />
</figure>
<figure>
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_10.jpg" />
</figure>
</section>
<section id="project-collaboration-data">
<h2>Équipe</h2>
<dl>
<dt>Architecture</dt>
<dd>Central, AHA, V+<dd>
<dt>Espace public<dt>
<dd>Saison Menu<dd>
<dt>Client</dt>
<dd>Privé</dd>
<dt>Paysage</dt>
<dd>Atelier Altern</dd>
<dt>Superficie</dt>
<dd>335 m<sup>2</sup></dd>
<dt>Budget</dt>
<dd>320.000 € HTVA</dd>
<dt>Graphic design</dt>
<dd>OSP</dd>
</dl>
<h2>Sous-traitants</h2>
<dl>
<dt>Collaboration artistique</dt>
<dd>Denicolai & Provoost<dd>
<dt>Structure Ir<dt>
<dd>Util<dd>
</dl>
</section>
<!-- level 3 -->
<section id="project-status-data">
<dl>
<dt>Status</dt>
<dd>Study start<dd>
<dd>Expeted delivery date<dd>
<dd>Delivery date<dd>
<dt>Client</dt>
<dd>Privé</dd>
<dt>Procedure</dt>
<dd>Concours</dd>
<dt>Superficie</dt>
<dd>335 m<sup>2</sup></dd>
<dt>Budget</dt>
<dd>320.000 € HTVA</dd>
</dl>
</section>
<!-- level 4 -->
<section id="project-details">
</section>
<!-- level 5 -->
<section id="project-free-lines">
</section>
</body>
</html>
/* ==========================================================================
Custom medias definitions
========================================================================== */
@custom-media --mobile only screen and (max-width: 767px);
@custom-media --desktop only screen and (min-width: 1300px);
/* ==========================================================================
Variables
========================================================================== */
:root {
--orange: #ff9955;
}
/* ==========================================================================
Fonts
========================================================================== */
@font-face {
font-family: 'Sprat';
font-weight: normal;
font-style: normal;
src: url('fonts/sprat-condensedbold-webfont.woff') format('woff');
}
@font-face {
font-family: 'Spectral';
font-weight: bold;
font-style: normal;
src: url('fonts/Spectral-Bold.ttf') format('woff');
}
@font-face {
font-family: 'Spectral';
font-weight: normal;
font-style: normal;
src: url('fonts/Spectral-Regular.ttf') format('woff');
}
@font-face {
font-family:'PxGrotesk';
font-weight: normal;
font-style: normal;
src: url('fonts/PxGroteskRegular.ttf') format('woff');
}
@font-face {
font-family:'PxGrotesk-Screen';
font-weight: 500;
font-style: normal;
src: url('fonts/PxGrotesk-Screen.ttf') format('woff');
}
/* Reset
========================================================================== */
a {
text-decoration: none;
}
//* Project page
========================================================================== */
body {
}
p{
font-family:'PxGrotesk';
font-size: 1.2em;
font-weight: normal;
}
main {
padding: 20px;
}
figure {
position: relative;
}
img {
width: 100%;
}
h1 {
font-family: 'Spectral';
font-weight: bold;
font-size: 3em;
line-height: 1.05em;
}
h2 {
font-family: 'Spectral';
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
}
.short-description{
font-family: 'Spectral';
font-size: 2em;
line-height: 0.8em;
}
figcaption{
position: absolute;
bottom: 0;
padding: 5px 10px 7px 10px;
}
dt {
font-family:'PxGrotesk-Screen';
font-weight: 500;
font-size: 1.2em;
font-weight: normal;
}
dd {
position: relative;
float: left;
font-family:'PxGrotesk';
font-size: 1.2em;
font-weight: normal;
}
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