Redisposition des menus et du pied de page (fix #3).

assets/production/css/style.css

@@ -10,6 +10,7 @@ body {
 }
 
 .Container {
+  clear: both;
   max-width: 960px;
   margin: 0 auto;
   padding: 0 32px;
@@ -19,6 +20,13 @@ a {
   color: #373d3f;
 }
 
+a.external::after {
+  content: url(/images/external-link.svg);
+  display: inline-flex;
+  height: 1em;
+  padding-left: 0.4em;
+}
+
 h1,
 h2,
 h3,
@@ -126,58 +134,44 @@ abbr {
 
 .logo-front {
   display: block;
-  margin: 10em auto 0;
+  margin: 3em auto 2em;
-  height: 25vh;
 }
 
 .logo-small {
-  width: 3em;
+  display: inline;
-  display: inline-block;
+  margin: 0 2em 0 0;
-  margin: 0.4em;
+  height: 3em;
-}
-
-menu {
-  margin: 0;
-  padding: 0;
-  font-size: 0;
-}
-
-.container-logo,
-.menu-item {
-  height: 30%;
-  display: inline-block;
-  font-size: 16px;
   vertical-align: middle;
 }
 
-.menu-item {
+nav {
-  float: right;
+  margin: 0;
-  margin-left: 2em;
+  overflow: hidden;
+  padding: 0;
 }
 
-.menu-button {
+nav section {
-  padding: 8px 24px;
+  display: grid;
-  background: #05b;
+  grid-template-columns: 2fr 3fr;
-  color: #fff;
-  text-transform: uppercase;
-  text-decoration: none;
-  font-size: 12.8px;
-  font-weight: bold;
-  border-radius: 0 0 24px 24px;
-  line-height: 24px;
-  display: inline-block;
 }
 
-.menu-button-login {
+nav section h2 {
-  background: #2eae2e;
+  font-size: 1em;
+  margin: 0;
 }
 
-.Hero {
+nav section ul {
-  height: calc(75vh - 6em);
+  border-left: black 1px solid;
-  display: flex;
+  margin: 0;
-  align-items: center;
+  padding-left: 0.8em;
-  flex-direction: column;
+}
-  justify-content: center;
+
+nav section ul li {
+  list-style: none;
+}
+
+.Hero h1 {
+  font-size: 1.5em;
 }
 
 .services-title {
@@ -251,6 +245,13 @@ menu {
   padding: 1em;
 }
 
+.three-cols {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1em 0;
+}
+
 .Two-cols-One-row,
 .Two-cols-Two-rows {
   display: grid;
@@ -259,23 +260,18 @@ menu {
   gap: 64px 0;
 }
 
-.Article-Title {
+.footer h2 {
-  margin-top: 64px;
+  font-size: 1.2em;
-  margin-bottom: 32px;
+  margin-bottom: 0;
 }
 
-.footer {
+.footer hr + p {
+  font-size: 0.8em;
+  margin-bottom: 2em;
 }
 
-.footer ul,
+.footer p + p {
-.footer li {
+  margin-top: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.footer .Two-cols-One-row {
-  grid-row-gap: 0;
 }
 
 @media only screen and (min-width: 768px) {
@@ -283,10 +279,49 @@ menu {
     font-size: 48.33px;
   }
 
+  nav section {
+    border-left: black 1px solid;
+    display: block;
+    padding-left: 2em;
+  }
+
+  nav section h2 {
+    font-size: 1.5em;
+  }
+
+  nav section ul {
+    border: none;
+    padding: 0;
+  }
+
+  .Hero {
+    height: calc(75vh - 16em);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .Hero h1 {
+    font-size: 48.33px;
+  }
+
   .logo-chatons {
     height: 12vw;
   }
 
+  .logo-front {
+    margin: 10em auto 0;
+    height: 25vh;
+  }
+
+  .three-cols {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 64px;
+    grid-row-gap: 0;
+  }
+
   .Two-cols-One-row {
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 1fr;

assets/production/images/external-link.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>

content/mentions_legales.md

@@ -9,7 +9,7 @@ title: Mentions légales
 <br>SIREN : `904 949 534 00013`
 <br>Siège social : `Mairie, 11 places aux Chevaux, 22420 Le Vieux Marché - France`
 
-## Hébergement
+## Hébergement des données
 
 Ce site et toutes les données de l'association sont actuellement stockées chez la Sas OVH.
 <br>Siège social : `2 rue Kellermann, 59100 Roubaix - France`
@@ -20,4 +20,10 @@ Ce site est conçu avec le logiciel libre [Metalsmith](https://www.metalsmith.io
 
 Sauf mention contraire sur les supports utilisés, tout le contenu affiché sur le site [ti-nuage.fr](/) appartient à l'association **Ti Nuage** et est distribuable sous licence [CC-BY-SA version 2.0 ou ultérieure](https://creativecommons.org/licenses/by-sa/2.0/fr).
 
-Les icones utilisés pour la description des services sont réalisés avec **Uicons** de [Flaticon](https://www.flaticon.com/uicons).
+Les icones utilisés pour la description des services sont réalisés avec **Uicons** de [Flaticon](https://www.flaticon.com/uicons). L'icône utilisée pour marquer les liens externes fait partie du jeu d'icône [Feather](https://feathericons.com) et est distribué sous les termes de [la licence MIT](https://mit-license.org).
+
+## Nous contacter
+
+L'adresse électronique de contact de l'association est : contact @ ti-nuage.fr. Le courrier doit être adressé au siège social.
+
+Il est possible de nous rencontrer tous les premiers jeudi du mois à partir de 20 heures à [la Hutte](https://lahutte.ti-nuage.fr/), l'espace de travail partagé à Vieux Marché.

layouts/base.njk

@@ -30,59 +30,44 @@
     {% endif %}
   </head>
   <body>
-    <div class="Container">
+    <nav class="Container three-cols">
-      <menu>
+      <section>
-        <li class="container-logo">
+        <h2>Association</h2>
-          {% if not hidemenuicon %}
+        <ul>
-          <a href="/"><img class="logo-small" src="/images/logo.svg" alt=""></a>
+          <li><a href="/association.html">Découvrir l'association</a></li>
-          {% endif %}
+          <li><a href="/blog">Actualités</a></li>
-        </li>
+        </ul>
-        <li class="menu-item">
+      </section>
-          <a class="menu-button menu-button-login" href="https://mon.ti-nuage.fr">Espace adhérents</a>
+      <section>
-        </li>
+        <h2>Documentation</h2>
-        <li class="menu-item">
+        <ul>
-          <a class="menu-button" href="https://status.ti-nuage.fr/">État des services</a>
+          <li><a class="external" href="https://wiki.ti-nuage.fr">Wiki</a></li>
-        </li>
+        </ul>
-        <li class="menu-item">
+      </section>
-          <a class="menu-button" href="https://wiki.ti-nuage.fr/">Documentation</a>
+      <section>
-        </li>
+        <h2>Services</h2>
-        <li class="menu-item">
+        <ul>
-          <a class="menu-button" href="/blog">Actualités</a>
+          <li><a class="external" href="https://mon.ti-nuage.fr">Espace adhérents</a></li>
-        </li>
+          <li><a href="/services.html">Tous les services</a></li>
-      </menu>
+          <li><a class="external" href="https://status.ti-nuage.fr/">Suivi des incidents</a></li>
+        </ul>
+      </section>
+    </nav>
 
-    {% block article %}{% endblock %}
+    <section class="Container">
-    </div>
+      {% block article %}{% endblock %}
+    </section>
 
     <footer class="footer mt128">
       <div class="Container">
         <p class="tad">Page générée le {{ moment(article.date).format('LL') }}.</p>
         <hr>
-        <div class="Two-cols-One-row">
+        <p class="tac">
-          <div>
+          <a href="/"><img class="logo-small" src="/images/logo.svg" alt=""></a>
-            <h4>Ti Nuage</h4>
+          <b><a href="/cgu.html">Conditions Générales d'Utilisation</b></a>
-            <ul>
+          &mdash;
-              <li><a href="/">Accueil</a></li>
+          <b><a href="/mentions_legales.html">Mentions légales et contact</a></b>
-              <li><a href="/association.html">L'association</a></li>
+        </p>
-              <li><a href="/blog">Le blog</a></li>
-              <li><a href="/services.html">Les services</a></li>
-              <li><a href="/cgu.html">CGU</a></li>
-              <li><a href="/mentions_legales.html">Mentions légales</a></li>
-            </ul>
-          </div>
-          <div>
-            <h4>Nous contacter</h4>
-            <h5>Adresse</h5>
-            <p>
-              Mairie - Le Vieux-Marché<br>
-              11 place aux Chevaux<br>
-              22420 Le Vieux Marché
-            </p>
-            <h5>Email</h5>
-            <p>contact @ ti-nuage.fr</p>
-            <br>
-          </div>
-        </div>
       </div>
     </footer>
   </body>