feat: Avancement dans l'architecture du site

assets/styles/header.sass

@@ -6,6 +6,8 @@
 
   &.home
     height: 80vh
+    .hero
+      height: 80vh
 
   .hero
     position: absolute
@@ -16,8 +18,10 @@
     z-index: -1
     object-fit: cover
     width: 100%
-    height: 100%
+    height: 40vh
+    background-color: $orange
 
+  $nav-height: 70px
   .nav
     position: absolute
     top: 50px
@@ -25,7 +29,7 @@
     left: 0
     right: 0
     background-color: $vert
-    height: 70px
+    height: $nav-height
 
     @media screen and (max-width: $size-md)
       top: 30px
@@ -34,10 +38,7 @@
   .container
     display: flex
     align-items: center
-    justify-content: center
+    justify-content: space-between
-
-    @media screen and (max-width: $size-md)
-      justify-content: space-between
 
   .logo
     $size-border-logo: 20px
@@ -61,11 +62,14 @@
 
     img
       position: relative
-      height: 70px
+      height: $nav-height
+      width: 214px
       z-index: 30
+      text-align: center
 
       @media screen and (max-width: $size-md)
         height: 50px
+        width: 154px
 
   #menu
     list-style-type: none
@@ -73,10 +77,83 @@
     align-items: center
     padding: 0
     margin: 0
+    height: $nav-height
 
     @media screen and (max-width: $size-xl)
       font-size: .95rem
 
+    .submenu
+      list-style-type: none
+      display: none
+      position: absolute
+      color: $vert
+      background: white
+      top: $nav-height
+      flex-direction: column
+      margin: 0
+      padding: 1rem
+      width: max-content
+      box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px
+
+      a
+        color: $vert
+        padding: 10px 0 0
+
+        &:hover
+          text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
+
+    .menu:hover .submenu
+      display: flex
+
+    .menu.withSubmenu:hover::after
+      	content: ''
+      	display: block
+      	position: absolute
+      	left: calc(50% - 7.5px)
+      	top: 100%
+      	width: 0
+      	height: 0
+      	border-top: 15px solid $vert
+      	border-right: 15px solid transparent
+      	border-bottom: 0 solid transparent
+      	border-left: 15px solid transparent
+        z-index: 10000
+
+    .menu
+      display: flex
+      align-items: center
+      position: relative
+      height: 100%
+
+      &:first-child::before
+        content: none
+
+      &::before
+        content: ""
+        border-right: 2px white solid
+        right: 0
+        height: 20px
+
+    a
+      color: white
+      display: flex
+      align-items: center
+      padding: 0 10px
+      height: 100%
+      text-decoration: none
+
+      &:hover
+        text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
+
+    img
+      padding: 0 10px
+
+      @media screen and (max-width: $size-lg) and (min-width: $size-md)
+        display: none
+
+    span
+      white-space: nowrap
+
     @media screen and (max-width: $size-md)
       display: none
       position: fixed
@@ -84,6 +161,7 @@
       bottom: 0
       left: 0
       right: 0
+      height: 100vh
       z-index: 100
       background: $vert
       flex-direction: column
@@ -98,40 +176,42 @@
       img
         display: inherit
 
-    li
+      .menu
-      display: flex
+        height: auto
-      align-items: center
+        flex-direction: column
+        margin-bottom: 1rem
 
-      &:last-child::after
+      .menu.withSubmenu
+        padding: 10px
+
+      .submenu
+        display: flex
+        position: relative
+        top: 0
+        padding: 0
+        margin-top: 1rem
+        border-radius: 6px
+
+        &::before
+          	content: ''
+          	display: block
+          	position: absolute
+          	left: calc(50% - 15px)
+          	top: -15px
+          	width: 0
+          	height: 0
+          	border-top: 0 solid transparent
+          	border-right: 15px solid transparent
+          	border-bottom: 15px solid white
+          	border-left: 15px solid transparent
+            z-index: 10000
+
+        a
+          padding: 2px 10px
+
+      .menu:before
         content: none
 
-      &::after
-        content: ""
-        border-right: 2px white solid
-        height: 20px
-
-        @media screen and (max-width: $size-md)
-          content: none
-
-    a
-      color: white
-      display: flex
-      align-items: center
-      padding: 10px
-      text-decoration: none
-
-      &:hover
-        color: $orange
-
-    img
-      padding: 0 10px
-
-      @media screen and (max-width: $size-lg) and (min-width: $size-md)
-        display: none
-
-    span
-      white-space: nowrap
-
   .open-button
     display: none
     white-space: nowrap

assets/styles/main.sass

@@ -34,7 +34,7 @@ img
   width: 50px
 
 .container
-  max-width: $size-xl
+  max-width: $size-lg
   margin: 0 auto
   padding: 0 1rem
 
@@ -42,10 +42,16 @@ img
 
 #content
   margin-top: -10vh
+  min-height: 50vh
+
+  @media screen and (max-width: $size-md)
+    min-height: inherit
+
+  a
+    color: $color-primary
 
   .container
     background-color: white
-    margin: 0 1rem
     padding: 1rem
     @media screen and (max-width: $size-sm)
       margin: 0
@@ -55,166 +61,190 @@ img
     text-align: center
     text-transform: uppercase
     color: $vert
-    margin: 1rem 2rem 2rem
+    margin: 0 1rem 1rem
+    padding: 1rem
     font-size: 2.5rem
     word-wrap: anywhere
     @media screen and (max-width: $size-sm)
       font-size: 1.2rem
+      margin: 0
 
     strong
       font-size: 3.5rem
       @media screen and (max-width: $size-sm)
         font-size: 1.8rem
 
-  .container.news
+  h2
-    padding: 1rem 5rem
+    font-size: 2rem
     @media screen and (max-width: $size-sm)
-      padding: 0 1rem
+      font-size: 1.1rem
-.infos
-  display: flex
-  @media screen and (max-width: $size-md)
-    flex-direction: column
-  .news, .opening
-    min-height: 500px
-    margin: 1rem
 
-  .news
+  h3
-    width: 70%
+    font-size: 1.8rem
+    @media screen and (max-width: $size-sm)
+      font-size: 1rem
+
+  h4
+    font-size: 1.6rem
+    @media screen and (max-width: $size-sm)
+      font-size: .9rem
+
+  .infos
     display: flex
-    flex-direction: column
-    @media screen and (max-width: $size-xl)
-      width: 65%
     @media screen and (max-width: $size-md)
-      width: 100%
+      flex-direction: column
-      margin: 0
+    .news, .opening
+      min-height: 500px
+      margin: 1rem
 
-
+    .news
-    $size-la-une: 220px
+      width: 70%
-    $size-news: 100px
-    .post
       display: flex
-      flex-wrap: nowrap
+      flex-direction: column
-      margin-bottom: 2rem
+      @media screen and (max-width: $size-xl)
+        width: 65%
+      @media screen and (max-width: $size-md)
+        width: 100%
+        margin: 0
+
+
+      $size-la-une: 220px
+      $size-news: 100px
+      .post
+        display: flex
+        flex-wrap: nowrap
+        margin-bottom: 2rem
 
-      @media screen and (max-width: $size-sm)
-        flex-direction: column
-        justify-content: center
-        align-items: center
-      .picture
-        width: $size-news
-        height: $size-news
-        background: $orange
-        flex-shrink: 0
         @media screen and (max-width: $size-sm)
-          margin-bottom: 1rem
+          flex-direction: column
-
+          justify-content: center
-      &.last
+          align-items: center
-
         .picture
-          width: $size-la-une
+          width: $size-news
-          height: $size-la-une
+          height: $size-news
+          background: $orange
+          flex-shrink: 0
           @media screen and (max-width: $size-sm)
-            width: 100%
+            margin-bottom: 1rem
-            overflow: hidden
+
-            margin: 0
+        &.last
-            img
+
+          .picture
+            width: $size-la-une
+            height: $size-la-une
+            @media screen and (max-width: $size-sm)
               width: 100%
+              overflow: hidden
+              margin: 0
+              img
+                width: 100%
+          .details
+            padding: 20px
+            background: $grey
+            height: $size-la-une
+            overflow: hidden
+            text-overflow: ellipsis
+            @media screen and (max-width: $size-sm)
+              height: inherit
         .details
-          padding: 20px
+          padding: 0 1rem
-          background: $grey
+          height: $size-news
-          height: $size-la-une
+          max-width: 100%
           overflow: hidden
-          text-overflow: ellipsis
           @media screen and (max-width: $size-sm)
             height: inherit
-      .details
+            text-align: center
-        padding: 0 1rem
-        height: $size-news
-        overflow: hidden
-        @media screen and (max-width: $size-sm)
-          height: inherit
-          text-align: center
 
-        a
+          span
-          color: black
+            font-size: .8rem
-        span
+            display: block
-          font-size: .8rem
+          h2
-          display: block
+            font-size: 1.4rem
-        h2
+            font-weight: bold
-          font-size: 1.4rem
+            margin: .6rem 0
-          font-weight: bold
+            white-space: nowrap
-          margin: .6rem 0
+            overflow: hidden
-          white-space: nowrap
+            text-overflow: ellipsis
-          overflow: hidden
+          h3
-          text-overflow: ellipsis
+            font-size: 1.1rem
-        h3
+            font-weight: bold
-          font-size: 1.1rem
-          font-weight: bold
-          margin: 0
-          white-space: nowrap
-          overflow: hidden
-          text-overflow: ellipsis
-
-        .text
-          font-size: .8rem
-          overflow: hidden
-          text-overflow: ellipsis
-          width: 100%
-          padding-top: 6px
-
-          p
             margin: 0
+            white-space: nowrap
+            overflow: hidden
+            text-overflow: ellipsis
+
+          .text
+            font-size: .8rem
+            overflow: hidden
+            text-overflow: ellipsis
+            width: 100%
+            padding-top: 6px
+
+            p
+              margin: 0
 
 
 
-  .opening
+    .opening
-    background: $orange
+      background: $orange
-    width: 30%
+      width: 30%
-    padding: 20px
+      padding: 20px
-    color: white
-    background-image: url(/icons/horloge.svg)
-    background-repeat: no-repeat
-    background-position: center -50px
-    background-size: 70%
-    @media screen and (max-width: $size-xl)
-      width: 40%
-    @media screen and (max-width: $size-md)
-      width: 100%
-      margin: 0
-      background-position-x: 120%
-      background-size: 50%
-
-    h2
-      font-size: 1.4rem
-      margin: 1rem 0
-      font-weight: bold
-
-    h3
-      margin: 1rem 0 .4rem
-      font-size: 1.2rem
-      font-weight: bold
-
-    p
-      font-size: .8rem
-
-      &:last-child
-        margin-bottom: 0
-
-    a
       color: white
+      background-image: url(/icons/horloge.svg)
+      background-repeat: no-repeat
+      background-position: center -50px
+      background-size: 70%
+      @media screen and (max-width: $size-xl)
+        width: 40%
+      @media screen and (max-width: $size-md)
+        width: 100%
+        margin: 0
+        background-position-x: 120%
+        background-size: 50%
+
+      h2
+        font-size: 1.4rem
+        margin: 1rem 0
+        font-weight: bold
+
+      h3
+        margin: 1rem 0 .4rem
+        font-size: 1.2rem
+        font-weight: bold
+
+      p
+        font-size: .8rem
+
+        &:last-child
+          margin-bottom: 0
+
+      a
+        color: white
 
 // FOOTER
 
 .explain
   text-align: center
   font-size: .6rem
+  background-color: $vert
+  color: white
+
+  a
+    color: white
 
 .footer
   background: $vert
   color: white
   padding: 2rem 0
-  @media screen and (max-width: $size-sm)
+
-    padding: 1rem 0
+  .icons
+    height: 30px
+    width: 30px
+    margin: 1rem 0 .5rem .5rem
+
+  a
+    color: white
+    display: inline-block
 
   .container
     display: flex
@@ -232,7 +262,7 @@ img
       order: -1
       width: 100%
     img
-      margin: 0 auto
+      margin: 0 auto 1rem
   .horaire,
   .address
     width: 40%
@@ -244,10 +274,46 @@ img
       padding: 1rem 0 0
 
   h3
-    font-size: 1.5rem
+    font-size: 1.3rem
-    margin-top: 0
+    margin: 0 0 .7rem
     font-weight: bold
 
   p
     margin: 0
-    line-height: 1.3rem
+    line-height: 1.1rem
+
+#content .commissions
+  h3, h4
+    color: $vert
+
+#content .conseilmunicipal
+  display: flex
+  flex-wrap: wrap
+  justify-content: center
+
+  .person
+    margin: 1rem
+    width: 250px
+    text-align: center
+    .card-image
+      margin-bottom: 1rem
+
+    h2
+      color: $vert
+      font-size: 1.1rem
+      padding: 0
+      margin: 0 0 .3rem
+
+    h3
+      font-size: 1rem
+      padding: 0
+      margin: 0
+
+    .card-body
+      font-size: .9rem
+
+
+.md
+  max-width: 645px
+  margin-left: auto
+  margin-right: auto

content/_index.md

@@ -8,19 +8,25 @@ title: Actualités
 
 Lundi, mardi, jeudi et vendredi : 8h30 à 12h30  
 Mercredi : 9h15 à 12h15  
-04 77 62 50 67 - mairie@cremeaux.fr
+[04 77 62 50 67](tel:0477625067)  
+[mairie@cremeaux.fr](mailto:mairie@cremeaux.fr)
 
 ### * Poste
 
-Mardi, mercredi, jeudi, vendredi et samedi : 9h15 à 12h15
+Mardi au samedi : 9h15 à 12h15  
+[04 77 62 56 49](tel:0477625649)
 
 ### * Bibliothèque Municipale
 
 Mercredi : 16h à 18h40  
-Vendredi et samedi : 10h à 12h
+Vendredi et samedi : 10h à 12h  
+[04 77 62 82 66](tel:0477628266)  
+[bibliocremeaux@orange.fr](mailto:bibliocremeaux@orange.fr)
 
 ### * Déchetterie
 
 Lundi au vendredi : 14h à 18h  
 Samedi 9h à 12h et 14h à 18h  
-L'usine 42430 Saint-Just-en-Chevalet
+L'usine 42430 Saint-Just-en-Chevalet  
+[04 77 62 86 41](tel:0477628641)  
+[Site internet](https://www.ccpu.fr/decheterie-dechetterie-pays-urfe-saint-just-en-chevalet-42430_fr.html)

content/actualites/2020_11_05-nouveau_site_web/index.md

@@ -0,0 +1,13 @@
+---
+title: Nouveau **site web**
+catégorie: Communication
+date: 2020-11-05
+---
+
+Nous venons de mettre le site internet de Crémeaux en ligne !!!
+
+Vous pouvez retrouver sur la page d'accueil les horaires des services communaux, les dernières actualités de Crémeaux que vous pouvez aussi retrouver sur la page Facebook [Vivre à Crémeaux](https://www.facebook.com/vivre.a.cremeaux/).
+
+Vous retrouverez des informations sur la vie municipale avec le mot du Maire, les comptes rendus des réunions du conseil municipal, la présentation du conseil municipal, et les commissions.
+
+Le site sera complété au fur et à mesure. Nous aimerions mettre en place 3 autres grandes parties : Cadre de vie, les associations et l'économie à Crémeaux pour avoir une vision plus global de notre commune.

content/actualites/_index.md

@@ -0,0 +1,3 @@
+---
+title: Les **Actualités**
+---

content/economie/_index.md

@@ -1,5 +1,5 @@
 ---
-title: Le conseil municipal
+title: Économie
 draft: true
 menu:
   main:
@@ -9,11 +9,14 @@ menu:
     pre: jaune
 ---
 
-![](/market.svg)
+Cette page n'est pas encore faite.
+
+Nous listerons ici tous les commerces et entreprises de Crémeaux. Nous réunirons les informations pour les contacter (adresse, téléphone, adresse d'un site web) avec un descriptif, une photo.
+
+Voici les catégories que nous mettrons en place :
 
-Liste des commerces et entreprises avec des catégories
   * Commerces
   * Hébergements
-  * Artisants
+  * Artisans
   * Services
   * Entreprise

content/news/2020_11_05-nouveau_site_web/index.md

@@ -1,7 +0,0 @@
----
-title: Nouveau **site web**
-catégorie: Communication
-date: 2020-11-05
----
-
-Nous venons de mettre le site internet de Crémeaux en ligne. Comme vous pouvez le voir il y a encore peu d'information. Nous compléterons au fur et à mesure de l'année. Il y aura par la suite une section spécifique sur l'économie, les associations et le cadre de vie de Crémeaux.

content/viemunicipale/_index.md

@@ -7,9 +7,3 @@ menu:
     weight: 10
     pre: rouge
 ---
-
-Voici les derniers comptes rendus des réunions du conseil municipal :
-
-- 10 septembre 2020 : Compte rendu en cours d'écriture
-- [9 juillet 2020](/comptes-rendus/2020_07_09-Conseil_Municipal.pdf)
-- [4 juin 2020](/comptes-rendus/2020_06_04-Conseil_Municipal.pdf)

content/viemunicipale/commissions.md

@@ -1,11 +0,0 @@
----
-title: Accueil
-menu:
-  main:
-    parent: municipale
-    name: Les Commissions
-    weight: 30
-    pre: rouge
----
-
-## Les Commissions

content/viemunicipale/commissions/index.md

@@ -0,0 +1,90 @@
+---
+title: Les **Commissions**
+menu:
+  main:
+    parent: municipale
+    name: Les Commissions
+    weight: 30
+layout: commissions
+---
+
+## MAIRE : Didier PONCET / 1er ADJOINT : Thierry CLEMENÇON
+
+---
+
+### DÉVELOPPEMENT ÉCONOMIQUE, FINANCES, IMPÔTS, URBANISME, PERSONNEL
+
+#### 1 er ADJOINT : Thierry CLEMENÇON
+
+- **Commission Impôts, Budget, Finances, Urbanisme**  
+  V-Président : Thierry CLEMENÇON  
+  Membres : Suzanne MANISSOLLE, Irène MICHON
+- **Commission des Impôts Directs**  
+  Maire + 6 commissaires et 6 suppléants désignés par la DD des services fiscaux
+- **Commission d’Appel d’Offre**  
+  À constituer le moment venu
+- **Commission Subventions**  
+  V-Président : Thierry CLEMENÇON  
+  Membres : Suzanne MANISSOLLE, André SANGLE, Simon CONSTANS, Patricia SESSEGOLO
+
+---
+
+### BÂTIMENTS, ÉQUIPEMENTS SPORTIFS, PETIT PATRIMOINE ET ÉCOLES
+
+#### 2 ème ADJOINT : Laurent BRUEL
+
+- **Commission des Écoles**  
+  V-Président : Laurent BRUEL  
+  Membres : Jean-Christophe DUBOST, Élodie BOURG, Simon CONSTANS, Stéphane PRAS
+- **Commission Bâtiment**  
+  V-Président : Laurent BRUEL  
+  Membres : Laurent LOÏZZO, Aurélien MAILLET-FEUGÈRE, André SANGLE, Irène MICHON, Stéphane PRAS
+- **Délégués aux Écoles**  
+  Laurent BRUEL, Jean-Christophe DUBOST, Stéphane PRAS
+- **Délégués aux bâtiments**  
+  Laurent LOÏZZO, Aurélien MAILLET-FEUGÈRE, Georges TRAVARD, Stéphane PRAS
+- **Délégués Logements en location**  
+  Thierry CLEMENÇON, Georges TRAVARD
+
+---
+
+### VOIRIE, ASSAINISSEMENT, DÉCHETS, EAU POTABLE, ET ÉCLAIRAGE
+
+#### 3 ème ADJOINT : Laurent LOÏZZO
+
+- **Commission Voirie**  
+  V-Président : Laurent LOÏZZO  
+  Membres : Thierry CLEMENÇON, Aurélien MAILLET-FEUGÈRE, Georges TRAVARD, Patricia SESSEGOLO
+- **Délégués au SIEL**  
+  Titulaire : Jean-Christophe DUBOST  
+  Suppléant : Simon CONSTANS
+- **Délégués au Syndicat des Eaux de la Bombarde et à l’assainissement**  
+  Titulaires : Laurent LOÏZZO, Simon CONSTANS  
+  Suppléants : Georges TRAVARD, Irène MICHON
+
+---
+
+### ANIMATION, SPORT, CULTURE ET BIBLIOTHÈQUE, RELATION AVEC LES ASSOCIATIONS
+
+#### 4 ème ADJOINT : Sandra GARRIVIER
+
+- **Commission Animation Cérémonies Culture**  
+  V-Présidente : Sandra GARRIVIER  
+  Membres : Jean-Christophe DUBOST, Aurélien MAILLET-FEUGÈRE, Georges TRAVARD, Irène MICHON, Patricia SESSEGOLO
+- **Membres du Conseil délégués au CCAS**  
+  Laurent LOÏZZO, Sandra GARRIVIER, Élodie BOURG, Aurélien MAILLET-FEUGÈRE, Jean-Christophe DUBOST
+- **Délégués au Syndicat d’Initiative du Pays d’Urfé**  
+  Titulaire : Laurent BRUEL  
+  Suppléant : Sandra GARRIVIER
+- **Délégués à l’Association Avenir Santé en Pays d’Urfé**  
+  Titulaire : André SANGLE  
+  Suppléant : Sandra GARRIVIER
+- **Délégués aux associations**  
+  Sandra GARRIVIER, Aurélien MAILLET-FEUGÈRE, Georges TRAVARD, Irène MICHON, Stéphane PRAS
+- **Délégués à la Bibliothèque**  
+  Suzanne MANISSOLLE, Simon CONSTANS
+- **Délégués au Fleurissement – Verger Conservatoire**
+  Sandra GARRIVIER, Thierry CLEMENÇON, Simon CONSTANS
+- **Commission Communication**  
+  V-Présidente : Sandra GARRIVIER  
+  Membres : Laurent LOÏZZO, Élodie BOURG, Simon CONSTANS

content/viemunicipale/compte-rendus/index.md

@@ -0,0 +1,26 @@
+---
+title: Les **comptes rendus**
+menu:
+  main:
+    parent: municipale
+    name: Les comptes rendus
+    weight: 5
+---
+
+Voici les comptes rendus des séances des conseils municipaux :
+
+- 26 novembre 2020 : prochain conseil municipal
+- 22 octobre 2020 : [Compte rendu](.) - [résumé](.)
+- 10 septembre 2020 : [Compte rendu](2020_09_10-Conseil_Municipal.pdf) - [résumé](.)
+- 9 juillet 2020 : [Compte rendu](2020_07_09-Conseil_Municipal.pdf) - [résumé](.)
+- 4 juin 2020 : [Compte rendu](2020_06_04-Conseil_Municipal.pdf) - [résumé](.)
+
+## Assister au Conseil Municipal
+
+**Le conseil municipal représente les habitants.** Ses attributions sont très larges depuis la loi de 1884 qui le charge de régler "par ses délibérations les affaires de la commune". Cette compétence s’étend à de nombreux domaines. Le conseil municipal donne son avis toutes les fois qu’il est requis par les textes ou par le représentant de l’État.
+
+**Les séances des conseils municipaux sont publiques** selon l’article L. 2121-18 du Code Général des Collectivités Territoriales. Toute personne peut y assister, quelle que soit sa domiciliation, sa situation, ou son intérêt, sans avoir à en justifier ou à en faire la demande.
+
+Néanmoins, sur la demande de trois membres ou du maire, le conseil municipal peut décider, sans débat, à la majorité absolue des membres présents ou représentés, qu’il se **réunit à huis clos**.
+
+Pendant la séance, le public ne doit en aucun cas marquer son approbation ou désapprobation de quelque manière que ce soit, et **doit garder le silence**.

content/viemunicipale/leconseilmunicipal/index.md

@@ -1,11 +1,11 @@
 ---
-title: Le Conseil Municipal
+title: Le Conseil **Municipal**
 menu:
   main:
     parent: municipale
     name: Le Conseil Municipal
     weight: 20
-    pre: rouge
+image: anthony-choren-lYzap0eubDY-unsplash.jpg
 layout: conseil
 ---
 

content/viemunicipale/lemotdumaire/index.md

@@ -1,12 +1,11 @@
 ---
 title: Le mot du **Maire**
-image: homepage.jpg
+image: mairie.jpg
 menu:
   main:
     parent: municipale
     name: Le mot du Maire
     weight: 10
-    pre: rouge
 ---
 
 {{< maire >}}

layouts/_default/_markup/render-link.html

@@ -1 +1,9 @@
-<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
+{{/*
+  S'il n'y a pas de / dans l'url d'un lien alors on ajoute le path du répertoire
+*/}}
+{{ $isExternalLink := strings.HasPrefix .Destination "http" }}
+{{ $isTelLink := strings.HasPrefix .Destination "tel:" }}
+{{ $isMailtoLink := strings.HasPrefix .Destination "mailto:" }}
+{{ $hasSlash := in .Destination "/" }}
+{{ $path := cond (or (or $isTelLink $isMailtoLink) $hasSlash) .Destination (path.Join "/" .Page.Dir .Destination) }}
+<a href="{{ $path | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isExternalLink }} target="_blank" rel="noopener"{{ end }}{{ if $isTelLink }} rel="nofollow"{{ end }}>{{ .Text | safeHTML }}</a>

layouts/_default/list.html

@@ -1,8 +1,15 @@
 {{ define "main" }}
   <div class="container">
     <h1>{{ .RenderString .Title }}</h1>
-    <div class="container">
+    <div class="container md">
       {{ .Content }}
+      <ul>
+        {{ block "list" . }}
+        {{ range .Pages }}
+        <li><a href="{{ .URL }}">{{ .RenderString .Title }}</a></li>
+        {{ end }}
+        {{ end }}
+      </ul>
     </div>
   </div>
 {{ end }}

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   <div class="container">
     <h1>{{ .RenderString .Title }}</h1>
-    <div class="container">
+    <div class="container md">
       {{ .Content }}
     </div>
   </div>

layouts/actualites/list.html

@@ -0,0 +1,15 @@
+{{ define "main" }}
+  <div class="container">
+    <h1>{{ .RenderString .Title }}</h1>
+    <div class="container md">
+      {{ .Content }}
+      <ul>
+        {{ block "list" . }}
+        {{ range .Pages }}
+        <li><a href="{{ .URL }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }} - {{ .RenderString .Title }}</a></li>
+        {{ end }}
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+{{ end }}

layouts/actualites/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   <div class="container">
     <h1>{{ .RenderString .Title }}</h1>
-    <div class="container news">
+    <div class="container news md">
       {{ .Content }}
     </div>
   </div>

layouts/home.html

@@ -3,7 +3,7 @@
     <h1>Le fil <strong>des actualités</strong></h1>
     <div class="infos">
       <div class="news">
-        {{ $headless := .Site.GetPage "/news" }}
+        {{ $headless := .Site.GetPage "/actualites" }}
         {{ $lastnews := first 4 (sort $headless.Pages "Date" "desc") }}
         {{ $first := index (first 1 $lastnews) 0 }}
         {{ $others := after 1 $lastnews }}

layouts/partials/conseilmunicipal.html

@@ -1,13 +1,9 @@
 {{ $headless := .Site.GetPage "/viemunicipale/leconseilmunicipal" }}
 
-<div class="container grid-xl conseilmunicipal">
+<div class="container conseilmunicipal">
-  <div class="columns">
 {{ range sort $.Site.Data.conseilmunicipal.conseilmunicipal "nom" }}
   {{ $image := $headless.Resources.GetMatch .image }}
   {{ $resized := $image.Resize "250x" }}
-  <div class="column col-3 col-xl-4 col-lg-6 col-sm-12">
+  {{ partial "person.html" (merge . (dict "image" $resized.RelPermalink)) }}
-    {{ partial "person.html" (merge . (dict "image" $resized.RelPermalink)) }}
-  </div>
 {{ end }}
-  </div>
 </div>

layouts/partials/footer.html

@@ -5,11 +5,15 @@
       <h3>Mairie de Crémeaux</h3>
       <p>Place de Pierre-Bénite</p>
       <p>42260 Crémeaux</p>
-      <p>04 77 62 50 67</p>
+      <p><a href="tel:0477625067" rel="nofollow">04 77 62 50 67</a></p>
-      <p>mairie@cremeaux.fr</p>
+      <p><a href="mailto:mairie@cremeaux.fr">mairie@cremeaux.fr</a></p>
+      <p>
+        <a href="/actualites/index.xml"><img src="/icons/rss.svg" alt="Flux RSS de l'actualité à Crémeaux" title="Flux RSS de l'actualité à Crémeaux" class="icons" /></a>
+        <a target="_blank" rel="noopener" href="https://www.facebook.com/vivre.a.cremeaux/"><img src="/icons/facebook.svg" alt="Facebook : Vivre à Crémeaux" title="Facebook : Vivre à Crémeaux" class="icons" /></a>
+      </p>
     </div>
     <div class="logo">
-      <img src="/icons/logo-footer.png" alt="Commune de Crémeaux" />
+      <img width="135" height="163" src="/icons/logo-footer.png" alt="Commune de Crémeaux" />
     </div>
     <div class="horaire">
       <h3>Horaire d'ouverture<br>au public :</h3>
@@ -19,5 +23,5 @@
   </div>
 </footer>
 <footer class="explain">
-  Ce site est réalisé par <a href="https://weko.io">Weko</a> de façon <a href="https://weko.io">éco-responsable, économe en énergie et sans aucun traceur</a>.
+  Ce site est réalisé par <a href="https://weko.io">Weko</a> de façon éco-responsable.
 </footer>

layouts/partials/header.html

@@ -1,15 +1,16 @@
+{{ $imageSize := cond .IsHome "1920x850 Top" "1920x450 Center" }}
 <header class="header{{ if .IsHome }} home{{ end }}">
-  {{ if .Resources }}
+  {{ if .Resources.ByType "image" }}
     {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
     {{ if $image }}
-      {{ $resized := $image.Fill "1400x600 Center"}}
+      {{ $resized := $image.Fill $imageSize }}
-      <img class="hero" src="{{ $resized.RelPermalink }}" alt="{{ .Title }}" />
+      <img class="hero" src="{{ $resized.RelPermalink }}" />
     {{ end }}
   {{ else }}
     {{ $headless := .Site.GetPage "/" }}
     {{ $image := $headless.Resources.GetMatch "*" }}
-    {{ $resized := $image.Fill "1400x600 Top"}}
+    {{ $resized := $image.Fill $imageSize }}
-    <img class="hero" src="{{ $resized.RelPermalink }}" alt="{{ .Title }}" />
+    <img class="hero" src="{{ $resized.RelPermalink }}" />
   {{ end }}
   <nav class="nav">
     <div class="container">
@@ -21,11 +22,20 @@
       <button class="open-button">≡ Menu</button>
       <ol id="menu">
         {{ range .Site.Menus.main }}
-        <li>
+        <li class="menu{{ if .HasChildren }} withSubmenu{{ end }}">
           <a href="{{ .URL }}">
             <img class="icons" src="/icons/{{ .Identifier }}.svg" alt="{{ .Name }}" />
             <span>{{ .Name }}</span>
           </a>
+          {{ if .HasChildren }}
+          <ol class="submenu">
+            {{ range .Children }}
+              <li>
+                <a href="{{ .URL }}">{{ .Name }}</a>
+              </li>
+            {{ end }}
+          </ol>
+          {{ end }}
         </li>
         {{ end }}
       </ol>

layouts/partials/person.html

@@ -3,13 +3,10 @@
     <img src="{{ .image }}" alt="Photo de {{ .prenom }} {{ .nom }}"  />
   </div>
   <div class="card-header">
-    <div class="card-title h5">{{ .prenom }} {{ .nom }}</div>
+    <h2>{{ .prenom }} {{ .nom }}</h2>
-    <div class="card-subtitle text-gray">{{ .fonction }}</div>
+    <h3>{{ .fonction }} - {{ .age }}&nbsp;ans</h3>
   </div>
   <div class="card-body">
     {{ .job }}
   </div>
-  <div class="card-footer">
-    <span class="label label-rounded label-primary">{{ .age }}&nbsp;ans</span>
-  </div>
 </div>

layouts/viemunicipale/commissions.html

@@ -0,0 +1,8 @@
+{{ define "main" }}
+  <div class="container">
+    <h1>{{ .RenderString .Title }}</h1>
+    <div class="container commissions md">
+      {{ .Content }}
+    </div>
+  </div>
+{{ end }}

layouts/viemunicipale/conseil.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
-  <div class="container grid-lg contenu">
+  <div class="container">
-    <h1>{{ .Title }}</h1>
+    <h1>{{ .RenderString .Title }}</h1>
-    <div class="container grid-sm">
+    <div class="container news md">
       {{ .Content }}
     </div>
   </div>

static/icons/facebook.svg

@@ -0,0 +1 @@
+<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.65 58.68"><path d="M45.74 0H12.91A12.94 12.94 0 000 12.91v32.83a13 13 0 0012.91 12.94h17.2V34.62h-4.84V25h4.8v-4.37c0-3.95 1.85-10.07 10.11-10.07h7.46v8.26h-5.4a2 2 0 00-2.14 2.29V25h7.66l-.56 5.85-.33 3.79h-7.13v24.04h6a13 13 0 0012.91-12.94V12.91A13 13 0 0045.74 0z" fill="#fff" fill-rule="evenodd"/></svg>

static/icons/rss.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="58" y="58" viewBox="0 0 58.65 58.68"><path d="M45.74 0H12.91C5.79 0 0 5.82 0 12.91v32.82c0 7.12 5.79 12.94 12.91 12.94h32.82c7.09 0 12.91-5.82 12.91-12.94V12.91C58.65 5.82 52.83 0 45.74 0zM13.18 51.39c-3.26 0-5.9-2.65-5.89-5.91 0-3.27 2.65-5.91 5.91-5.91 3.22.01 5.91 2.57 5.9 5.92 0 3.35-2.7 5.9-5.92 5.9zm22.52 0h-8.06c-.12 0-.17-.03-.16-.15.03-.33-.04-.67-.04-1 0-.3-.04-.6-.07-.9-.04-.6-.14-1.2-.25-1.79-.37-1.92-1-3.75-1.91-5.48-.5-.95-1.07-1.85-1.71-2.72a19.883 19.883 0 00-7.03-5.95c-.63-.32-1.29-.61-1.95-.87-1.41-.54-2.86-.93-4.35-1.13-.89-.12-1.78-.19-2.68-.2-.14 0-.18-.04-.18-.18 0-2.67.01-5.34 0-8 0-.15.04-.19.19-.19 6.5.08 12.33 2.1 17.45 6.1 3.99 3.12 6.92 7.05 8.84 11.74.03.07.06.13.09.2.24.67.49 1.33.7 2 .53 1.73.91 3.5 1.11 5.3.11 1.02.17 2.04.18 3.06-.01.14-.05.16-.17.16zm14.54 0H41.9c-.12 0-.15-.03-.15-.15 0-1.08-.05-2.15-.16-3.22-.05-.45-.09-.9-.16-1.34-.07-.44-.14-.87-.22-1.31-.5-3.07-1.48-5.99-2.8-8.8-.01-.02-.03-.04-.04-.07-.22-.53-.49-1.03-.77-1.53-4.37-7.84-10.78-13.27-19.25-16.24a32.03 32.03 0 00-6.17-1.47c-.43-.06-.86-.1-1.29-.15-.42-.05-.84-.08-1.26-.11-.29-.02-.58-.04-.87-.05-.45-.01-.91-.04-1.36-.05-.08 0-.1-.03-.1-.1v-6.13c0-.07-.01-.14-.01-.2 0-.68.01-1.36 0-2.03 0-.12.03-.15.15-.15.39.01.79.01 1.18.01.31.02.62.03.93.05 5.48.28 10.72 1.57 15.71 3.85.68.31 1.35.65 2.02.99 2.89 1.51 5.56 3.32 8.03 5.44 2.37 2.03 4.5 4.3 6.39 6.79 1.12 1.48 2.14 3.03 3.06 4.64.01.02.03.04.05.06.36.67.72 1.33 1.06 2 1.65 3.31 2.86 6.78 3.61 10.4a39.945 39.945 0 01.72 4.94c.05.63.1 1.25.13 1.88.03.63.05 1.26.06 1.89-.01.14-.04.16-.15.16z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"/></svg>