Flex menu on its way

assets/css/blueprint.css

@@ -4,55 +4,134 @@
 @import url("../fonts/firasans-regular.css");
 
 html, body {
-    background-color:  white;
+  background-color: white;
-    font-family: "Space Mono", Monaco, monospace !important;
+  font-family: "Space Mono", Monaco, monospace !important;
 }
 
 p {
-    font-family: "Fira Sans";
+  font-family: "Fira Sans", sans-serif;
+}
+
+
+nav {
+  background: white;
+  background: rgba(255, 255, 255, .8);
+  z-index: 10;
+  /*padding: 1rem 2rem;*/
+
+  position: fixed;
+  width: 100%;
+  /*position: -webkit-sticky;
+  position: sticky;
+  top: 0;*/
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+nav a {
+  display:  block;
+  padding: 1rem 2rem;
+  line-height: 1;
+
+  font-weight: bold;
+  text-decoration: none;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+nav h1 {
+  margin:  0;
+}
+nav .home {
+  font-weight:  normal;
+  font-size: 2rem;
+}
+
+nav .nav-left, nav .nav-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+nav .nav-left {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+nav .nav-right {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+nav ul {
+  margin: 0;
+  list-style: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 header {
-    background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
+  height: 100vh;
-    height: 100vh;
+  width: 100%;
-    width: 100vw;
+  background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
-    /* Create the parallax scrolling effect */
+  /* Create the parallax scrolling effect */
-    /* background-attachment: fixed; */
+  /*background-attachment: fixed;*/
-    background-position: center;
+  background-position: center;
-    /* background-repeat: no-repeat; */
+  background-repeat: no-repeat;
-    background-repeat: no-repeat;
+  background-size: cover;
-    background-size: cover;
+  margin-bottom: 5rem;
-    margin-bottom:  5rem;
+  padding: 0;
 }
 
 header > p {
-    width:  40%;
+  width: 40%;
-    position: relative;
+  position: relative;
-    left: 55%;
+  left: 55%;
-    bottom: -75%;
+  bottom: -75%;
-    text-align: right;
+  text-align: right;
 }
 
-header > nav {
-	background:  none;
-    position: fixed;
-    width: 100vw;
-}
 
-nav.nav a {
+header > p, nav a {
-	font-weight:  bold;
+  color: white;
-}
+  /* color | offset-x | offset-y | blur-radius */
-
+  text-shadow: black 0px 0px 4px;
-header > p, header > nav.nav a {
+  margin: 0;
-    color: white;
-    /* color | offset-x | offset-y | blur-radius */
-    text-shadow: black 0px 0px 4px;
 }
 
 
 
 footer {
-    border-top: black solid 2px;
+  border-top: black solid 2px;
-    margin-top: 3rem;
+  margin-top: 3rem;
-    padding-top:  2rem;
+  padding-top: 2rem;
 }

assets/fonts/firasans-regular.css

@@ -1,24 +1,24 @@
 @font-face {
     font-family: 'Fira Sans';
-    src: url('../fonts/spacemono/FiraSans-BoldItalic.ttf') format('truetype');
+    src: url('../fonts/firasans/FiraSans-BoldItalic.ttf') format('truetype');
     font-weight: bold;
     font-style: italic;
 }
 @font-face {
     font-family: 'Fira Sans';
-    src: url('../fonts/spacemono/FiraSans-Bold.ttf') format('truetype');
+    src: url('../fonts/firasans/FiraSans-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 @font-face {
     font-family: 'Fira Sans';
-    src: url('../fonts/spacemono/FiraSans-Italic.ttf') format('truetype');
+    src: url('../fonts/firasans/FiraSans-Italic.ttf') format('truetype');
     font-weight: normal;
     font-style: italic;
 }
 @font-face {
     font-family: 'Fira Sans';
-    src: url('../fonts/spacemono/FiraSans-Regular.ttf') format('truetype');
+    src: url('../fonts/firasans/FiraSans-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

blueprint/charpente.css

@@ -0,0 +1 @@
+../charpente/charpente.css

blueprint/index.html

@@ -1,40 +1,44 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">
 
 <head>
   <meta charset="utf-8" />
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <title>Deuxfleurs</title>
 
   <link rel="stylesheet" href="assets/css/normalize.css">
-  <link rel="stylesheet" href="assets/css/chota.min.css">
+  <link rel="stylesheet" href="charpente.css">
+  <!-- <link rel="stylesheet" href="assets/css/chota.css"> -->
   <link rel="stylesheet" href="assets/css/blueprint.css">
 </head>
 
 <body>
+  <nav class="nav">
+
+    <div class="nav-left">
+      <h1>
+        <a class="home" href="#">Deuxfleurs</a>
+      </h1>
+    </div>
+
+    <div class="nav-right">
+      <ul>
+        <li>
+          <a href="#">Documentation</a>
+        </li>
+        <li>
+          <a href="#">Blog</a>
+        </li>
+        <li>
+          <a href="#">Mon compte</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
   <header>
-    <nav class="nav">
-      <div class="nav-left">
-        <a href="#" class="home"><h1>Deuxfleurs</h1></a>
-      </div>
-
-      <div class="nav-right">
-        <ul>
-          <li>
-            <a href="#">Documentation</a>
-          </li>
-          <li>
-            <a href="#">Blog</a>
-          </li>
-          <li>
-            <a href="#">Mon compte</a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-
     <p>
       Nous sommes un hébergeur associatif expérimental.<br>
       Avec nos machines et nos logiciels, <br>
@@ -109,7 +113,7 @@
 
       <div id="trombinoscope" class="row">
         <figure class="col-6 col-3-md">
-          <img src="">
+          <!-- <img src=""> -->
           <figcaption>
             <h4>Esther</h4>
             Magicienne des images
@@ -117,7 +121,7 @@
         </figure>
 
         <figure class="col-6 col-3-md">
-          <img src="">
+          <!-- <img src=""> -->
           <figcaption>
             <h4>Quentin</h4>
             Bidouilleur d'ordinateurs
@@ -125,7 +129,7 @@
         </figure>
 
         <figure class="col-6 col-3-md">
-          <img src="">
+          <!-- <img src=""> -->
           <figcaption>
             <h4>Adrien</h4>
             Généraliste
@@ -133,7 +137,7 @@
         </figure>
 
         <figure class="col-6 col-3-md">
-          <img src="">
+          <!-- <img src=""> -->
           <figcaption>
             <h4>Maximilien</h4>
             Ordinateurologue
@@ -141,7 +145,7 @@
         </figure>
 
         <figure class="col-6 col-3-md">
-          <img src="">
+          <!-- <img src=""> -->
           <figcaption>
             <h4>Alex</h4>
             Bâtisseur d'empires
@@ -149,14 +153,12 @@
         </figure>
       </div>
     </section>
-
+  </main>
 
   <footer>
     <p>Brodé avec amour par Deuxfleurs.</p>
 
     <p class="is-right">Il y a sans doute un copyright.</p>
   </footer>
-  </main>
 </body>
-
 </html>

charpente

@@ -1 +1 @@
-Subproject commit a418d3037177a70c6a83f0d543c780a2559126d1
+Subproject commit 9fd5420ce9fb61d93a219a0e6faf37dcc0b0f69a