feat: prep for next version

- per subject of projects page
- add basic news page
- new layout with bootstrap
- more misc pages

layouts/partials/footer.html

@@ -1,2 +1,50 @@
-<footer class="site-footer">
-</footer>
+  <footer class="page-footer mt-5 py-5">
+    <div class="container">
+    <div class="row">
+      <div class="col-6 col-md-2 mb-3">
+        <h5>Le vélo à Gaillon-Aubevoye</h5>
+        <ul class="nav flex-column">
+          <li class="nav-item mb-2"><a href="/etat" class="nav-link p-0 text-body-secondary">Problèmes et état des infrastructures</a></li>
+          <li class="nav-item mb-2"><a href="/projets" class="nav-link p-0 text-body-secondary">Sujets en cours</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-2 mb-3">
+        <h5>L'association</h5>
+        <ul class="nav flex-column">
+          <li class="nav-item mb-2"><a href="/association" class="nav-link p-0 text-body-secondary">À propos</a></li>
+          <li class="nav-item mb-2"><a href="/association/rejoindre" class="nav-link p-0 text-body-secondary">Nous rejoindre</a></li>
+          <li class="nav-item mb-2"><a href="/association/contact" class="nav-link p-0 text-body-secondary">Nous contacter</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-5 offset-md-1 mb-3">
+        <form>
+          <h5>Abonnez vous à notre liste de diffusion</h5>
+          <p>Soyez aux courants des actualités de l'association. Lettre d'information envoyé par email tout les trimestres.</p>
+          <!-- TODO, add small js script to handle subsription -->
+          <div class="d-flex flex-column flex-sm-row w-100 gap-2">
+            <label for="newsletter1" class="visually-hidden">Adresse email</label>
+            <input id="newsletter1" type="text" class="form-control" placeholder="Adresse email">
+            <button class="btn btn-primary" type="button">S'abonner</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
+      <p>VMEMS – Contenu en <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">licence Creative Commons CC-BY-SA</a> sauf si mentioné autrement</p>
+      <ul class="list-unstyled d-flex">
+        <li class="ms-3"><a class="link-body-emphasis" href="#">
+            <svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg>
+        </a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#">
+            <svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg>
+        </a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#">
+            <svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a>
+        </li>
+      </ul>
+    </div>
+</div>
+  </footer>

layouts/partials/head.html

@@ -10,7 +10,7 @@
 
 {{- $title := partialCached "data/title" . .RelPermalink -}}
 
-<title>{{ $title }} {{ if not .IsHome }}- L'Étoile de Bethléem{{ end }}</title>
+<title>{{ $title }} {{ if not .IsHome }}- VMEMS{{ end }}</title>
 
 <link rel="canonical" href="{{ .Permalink }}">
 

layouts/partials/header.html

@@ -1,2 +1,26 @@
-<header class="site-header">
-</header>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container">
+        <a class="navbar-brand" href="/">VMEMS</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link" href="/projets">Projets cyclables</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/signalements">Signalements</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/actualites">Actualités</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/association">L'association</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+