Commit e76917cc authored by gijs's avatar gijs
Browse files

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

parents 2a81fa5f 90b8819b
......@@ -2,8 +2,11 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<title>Nord</title>
</head>
......@@ -29,15 +32,15 @@
<figure class="live-pict ref">
<img src="pict/Screenshot_20200330_092828.png" />
<figcaption><p>Extrait de <span class="extract-title">Pirou-Plage</span>, Agnès Varda</p><span class="date">— 02.03.2020, posted from Pauline's phone</span></figcaption>
<figcaption><p>Extrait de <span class="extract-title">Pirou-Plage</span>, Agnès Varda</p></figcaption>
<span class="date">— 02.03.2020, posted from Pauline's phone</span>
</figure>
<div class="project">
<h2>Caberdouche</h2>
<figure class="projects-pict">
<img src="pict/caberdouche/Caberdouche_10.jpg" />
<div class="project-cover"></div>
<figcaption><p>Aménagement intérieur, scénographie, muséographie du Centre d’Interprétation de la Maison Losseau</p></figcaption>
</figure>
<div class="projects-pict" style="background-image: url('pict/caberdouche/Caberdouche_10.jpg');"> </div>
</div>
<figure class="live-quotes">
......@@ -55,7 +58,7 @@
<figure class="live-pict projects-pict">
<img src="pict/002_caberdoucche_photo_170524-1.jpg" />
<figcaption><p>~ <a>Caberdouche</a></p></figcaption>
<figcaption><p>~ <a>Caberdouche</a><span class="date">— 02.03.2020, posted from Pauline's phone</span></p></figcaption>
</figure>
<!--
<figure class="live-pict projects-pict">
......@@ -64,24 +67,23 @@
</figure> -->
<div class="project">
<h2>Losseau</h2>
<figure class="projects-pict">
<img src="pict/losseau/Losseau-001.jpg" />
<figcaption><p>Aménagement intérieur, scénographie, muséographie du Centre d’Interprétation de la Maison Losseau</p></figcaption>
</figure>
<div class="project-cover"></div>
<figcaption><p>Aménagement intérieur, scénographie, muséographie du Centre d’Interprétation de la Maison Losseau</p></figcaption>
<div class="projects-pict" style="background-image: url('pict/losseau/Losseau-001.jpg');"> </div>
</div>
<figure class="live-pict projects-pict">
<img src="pict/IMG_2054.JPG" />
<figcaption><p>~ <a>Caberdouche</a></p></figcaption>
<figcaption><p>~ <a>Caberdouche</a><span class="date">— 02.03.2020, posted from Pauline's phone</span></p></figcaption>
</figure>
<figure class="live-quotes"><p>«&nbsp;Les compétences des deux associées sont complémentaires. Valentin prends davantage en charge les questions techniques et constructives, et Pauline les questions relatives à la communication et l’administration. Nous restons cependant attentifs à ne pas nous enfermer dans des attributions “confortables” ou caricaturales vis à vis de nos compétences et restons très attachés à la figure de l'“architecte généraliste”.&nbsp;»</p><figcaption><p>Valentin Bollaert</p> <span class="date">— 02.03.2020, posted from Pauline's phone</span></figcaption></figure>
<figure class="live-pict text-ref"><p>«&nbsp;Les compétences des deux associées sont complémentaires. Valentin prends davantage en charge les questions techniques et constructives, et Pauline les questions relatives à la communication et l’administration. Nous restons cependant attentifs à ne pas nous enfermer dans des attributions “confortables” ou caricaturales vis à vis de nos compétences et restons très attachés à la figure de l'“architecte généraliste”.&nbsp;»</p><figcaption><p>Valentin Bollaert</p> <span class="date">— 02.03.2020, posted from Pauline's phone</span></figcaption></figure>
<figure class="live-pict projects-pict">
<img src="pict/IMG_20170612_093324.jpg" />
<figcaption><p>Chantier ~ <a>Caberdouche</a></p></figcaption>
<figcaption><p>Chantier ~ <a>Caberdouche</a><span class="date">— 02.03.2020, posted from Pauline's phone</span></p></figcaption>
</figure>
......@@ -94,7 +96,7 @@
<figure class="live-pict">
<img src="pict/Screenshotfrom2020-08-04-16-37-46.png" />
<figcaption><p><span>Across</span> lecture of 2019</p></figcaption>
<figcaption><p><span>Across</span> lecture of 2019</p><span class="date">— 02.03.2020, posted from Pauline's phone</span></figcaption>
</figure>
<figure class="live-pict projects-pict">
<img src="pict/Screenshotfrom2020-08-04-16-37-58.png" />
......
......@@ -3,20 +3,33 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="project-styles.css">
<!-- <link rel="stylesheet" type="text/css" href="reset.css"> -->
<link rel="stylesheet" type="text/css" href="reset.css">
<title>Nord</title>
</head>
<body>
<main>
<section id="navigation">
<nav>
<a class="home-logo" href="/">nord</a>
<ul>
<li><a href="">live</a></li>
<li><a href="">projects</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</section>
<section id="main" class="grid--container">
<!-- 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">
<dl class="intro-data-flex">
<dt>Auteur</dt>
<dd>Nord</dd>
<dt>Rôle</dt>
......@@ -31,18 +44,16 @@
<dd>Equerre d'Argent 2026</dd>
</dl>
<figure>
<figure class="cover">
<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.
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’ouvrir 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 homogè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 confidentiel 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" />
......@@ -57,15 +68,15 @@
<figure>
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_10.jpg" />
</figure>
</section>
<section id="project-collaboration-data">
<!-- project-collaboration-data -->
<div>
<h2>Équipe</h2>
<dl>
<dl class="intro-data-flex">
<dt>Architecture</dt>
<dd>Central, AHA, V+<dd>
<dt>Espace public<dt>
<dd>Saison Menu<dd>
<dd>Central, AHA, V+</dd>
<dt>Espace public</dt>
<dd>Saison Menu</dd>
<dt>Client</dt>
<dd>Privé</dd>
<dt>Paysage</dt>
......@@ -77,22 +88,24 @@
<dt>Graphic design</dt>
<dd>OSP</dd>
</dl>
</div>
<div>
<h2>Sous-traitants</h2>
<dl>
<dl class="intro-data-flex">
<dt>Collaboration artistique</dt>
<dd>Denicolai & Provoost<dd>
<dt>Structure Ir<dt>
<dd>Util<dd>
<dd>Denicolai & Provoost</dd>
<dt>Structure Ir</dt>
<dd>Util</dd>
</dl>
</section>
</div>
<!-- level 3 -->
<section id="project-status-data">
<dl>
<dt>Status</dt>
<dd>Study start<dd>
<dd>Expeted delivery date<dd>
<dd>Delivery date<dd>
<h2>Statut</h2>
<dl class="intro-data-flex">
<dt>Study start</dt>
<dd></dd>
<dt>Expeted delivery date</dt>
<dt>Delivery date</dt>
<dt>Client</dt>
<dd>Privé</dd>
<dt>Procedure</dt>
......@@ -102,15 +115,21 @@
<dt>Budget</dt>
<dd>320.000 € HTVA</dd>
</dl>
</section>
<!-- level 4 -->
<section id="project-details">
</section>
<div id="project-details">
<figure class="live-pict ref">
<img src="pict/Screenshot_20200330_092828.png" />
<figcaption><p>Extrait de <span class="extract-title">Pirou-Plage</span>, Agnès Varda</p></figcaption>
</figure>
</div>
<!-- level 5 -->
<section id="project-free-lines">
</section>
</section>
</body>
</html>
......@@ -38,6 +38,13 @@
src: url('fonts/Spectral-Regular.ttf') format('woff');
}
@font-face {
font-family: 'Spectral';
font-weight: normal;
font-style: italic;
src: url('fonts/Spectral-Italic.ttf') format('woff');
}
@font-face {
font-family:'PxGrotesk';
font-weight: normal;
......@@ -61,7 +68,47 @@
}
//* Project page
/* Nav
========================================================================== */
.home-logo {
font-family: 'PxGrotesk';
font-weight: 500;
flex: 1 0;
font-size: 1.5em;
}
#navigation {
margin: 10px 0 27px 0;
width: 100%;
}
#navigation nav {
display: flex;
}
#navigation nav ul {
flex: 10 0;
}
#navigation li {
font-family: 'PxGrotesk';
font-weight: normal;
display: inline-block;
display: inline;
margin-left: 15px;
}
#navigation a {
color:black;
}
#navigation a:hover {
color:var(--orange);
}
#navigation nav ul a {
vertical-align: -7px;
}
/* Project page
========================================================================== */
body {
......@@ -71,12 +118,23 @@
font-family:'PxGrotesk';
font-size: 1.2em;
font-weight: normal;
line-height: 1.2em;
}
main {
padding: 20px;
}
.grid--container {
display: grid;
/* outline: 1px dotted cyan; */
grid-template-columns: 1fr 1fr 1fr;
column-gap: 14pt;
row-gap: 14pt;
grid-auto-flow: row;
}
figure {
position: relative;
}
......@@ -85,11 +143,37 @@
width: 100%;
}
h1 {
.cover {
grid-column: span 2;
}
.live-pict.ref {
background: #d4ddd8;
padding: 70px;
color: black;
grid-column-end: span 1;
grid-column-start: 2;
}
.live-pict.text-ref {
background: #d4ddd8;
padding: 40px;
height: max-content;
grid-column-end: span 2;
}
.live-pict.text-ref > p {
font-family: 'Spectral';
font-weight: 500;
font-size: 1.3em;
line-height: 1.15em;
}
h1 {
font-family: 'PxGrotesk';
letter-spacing: -0.03em;
font-weight: bold;
font-size: 3em;
line-height: 1.05em;
font-size: 6em;
line-height: 1em;
}
h2 {
......@@ -97,12 +181,18 @@
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
font-size: 1.8em;
letter-spacing: -0.03em;
margin-top:1em;
}
.short-description{
font-family: 'Spectral';
font-size: 2em;
line-height: 0.8em;
font-family: 'Spectral';
/* font-style: italic; */
font-size: 3em;
letter-spacing: -0.03em;
line-height: 1em;
margin-bottom: 1em;
}
figcaption{
......@@ -111,17 +201,51 @@
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;
}
dl.intro-data-flex {
display: flex;
flex-flow: row;
flex-wrap: wrap;
width: 100%; /* set the container width*/
overflow: visible;
}
dl.intro-data-flex dt {
flex: 0 0 50%;
text-overflow: ellipsis;
overflow: hidden;
font-family:'PxGrotesk-Screen';
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
color:#ff9955;
border-bottom: 1px solid #ff9955;
}
dl.intro-data-flex dd {
margin-left: auto;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
flex: 0 0 50%;
font-family:'PxGrotesk';
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
border-bottom: 1px solid #ff9955;
}
/* Media queries
========================================================================== */
@media only screen and (max-width: 768px) {
.grid--container {
grid-template-columns: 1fr;
}
.grid--container > * {
grid-column-start: 1;
grid-column-end: 1;
}
......@@ -19,7 +19,6 @@ time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
......
......@@ -103,7 +103,7 @@ main {
.grid--container {
display: grid;
/* outline: 1px dotted cyan; */
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
column-gap: 14pt;
row-gap: 14pt;
grid-auto-flow: row;
......@@ -118,9 +118,12 @@ img {
width: 100%;
}
.live-pict.ref {
background: #d4ddd8;;
background: #d4ddd8;
padding: 70px;
color: black;
grid-column-end: span 3;
grid-column-start: 4;
}
/*.live-pict.ref:hover {
background: black;
......@@ -133,36 +136,90 @@ img {
.projects-plan img{
max-width: 650px;
}*/
.live-pict {
grid-column-end: span 2;
}
.live-quotes {
background-image: linear-gradient(141deg, #ff9955, white);
padding: 40px;
height: max-content;
grid-column-end: span 2;
}
.live-quotes > p {
font-family: 'Spectral';
font-weight: 600;
font-size: 1.8em;
line-height: 1.05em;
font-size: 2.7em;
line-height: 1em;
}
.live-pict.text-ref {
background: #d4ddd8;
padding: 40px;
height: max-content;
grid-column-end: span 2;
}
.live-pict.text-ref > p {
font-family: 'Spectral';
font-weight: 500;
font-size: 1.3em;
line-height: 1.15em;
}
.project {
position: relative;
border: 4px dashed;
grid-column-start: 2;
grid-column-start: span 6;
max-height: 350px;
overflow: hidden;
width: 100%;
}
.project:hover div.project-cover,
.project:hover h2 {
display: none;
}
.project:hover figure.projects-pict figcaption p,
.project:hover figcaption {
display: block;
}
.project h2 {
position: absolute;
z-index: 100;
font-size: 3em;
font-size: 5.5em;
padding: 30px;
font-family: Spectral;
color: #d4ddd8;
display: inline-block;
margin: auto;
/*text-align: center;*/
width: 100%;
font-family: 'PxGrotesk';
font-weight: normal;
}
.projects-pict, .project {
align-self: center;
.project-cover {
width: 100%;
height: 100%;
background-color: #212423;
position: absolute;
z-index: 10;
filter: opacity(0.85);
}
.project .projects-pict {
max-height: 350px;
height: 350px;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.projects-pict {
grid-column-start: span 2;
}
.projects-pict figcaption p {
.project figcaption,
.projects-pict figcaption p,
.projects-pict figcaption {
display: none;
}
.projects-pict:hover figcaption{
.projects-pict figcaption,
.project figcaption {
position: absolute;
/* bottom: 0;
*//* padding: 0 10px;
......@@ -170,7 +227,8 @@ line-height: 1.05em;
bottom: 0;
padding: 5px 10px 7px 10px;
}
.projects-pict:hover figcaption p {
.projects-pict:hover figcaption p,
.projects-pict:hover figcaption {
display: block;
}
......@@ -190,4 +248,70 @@ figcaption p {
display: block;
font-size: 0.9em;
line-height: 1.4em;
}
/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {
.grid--container {
grid-template-columns: 1fr;
}
.grid--container > * {
grid-column-end: span 1 !important;
grid-column-start: span 1 !important;
}
.project h2 {
font-size: 2.2em;
word-break: break-all;
}
figcaption, figcaption p {
display: block !important;
}
.live-pict.ref,
.live-pict.text-ref {
padding: 15px;
}
.projects-pict figcaption, .project figcaption {
position: relative;
/* bottom: 0; */
/* padding: 0 10px; */
background: white;
/* bottom: calc(100% 26px); */
padding: 5px 10px 7px 10px;
}
.live-quotes > p {
font-family: 'Spectral';
font-weight: 600;
font-size: 2.3em;
line-height: 1em;
}
.live-quotes {
background-image: linear-gradient(141deg, #ff9955, white);
padding: 15px;
height: max-content;
grid-column-end: span 2;
}
.project figcaption {
display: none !important;
}
.live-pict.text-ref > p {
font-family: 'Spectral';
font-weight: 500;
font-size: 1.1em;
line-height: 1.15em;
}
.project-cover {
width: 100%;
height: 100%;
background: linear-gradient(black, transparent 118%);
position: absolute;
z-index: 10;