feat: Modification des couleurs

assets/styles/fonts.sass

@@ -12,6 +12,15 @@ body
   line-height: 1.2
   font-family: 'League Spartan Variable'
 
+.viemunicipale h1, .viemunicipale a
+    color: var(--color-green)
+.cadredevie h1, .cadredevie a
+    color: var(--color-blue)
+.economie h1, .economie a
+    color: var(--color-orange)
+.associations h1, .associations a
+    color: var(--color-purple)
+
 h1, h2, h3, h4, h5
   font-weight: 600
   text-transform: uppercase
@@ -19,7 +28,7 @@ h1, h2, h3, h4, h5
 h1
   text-align: center
   text-transform: uppercase
-  color: $vert
+  color: var(--color-green)
   margin: 0 1rem 1rem
   padding: 1rem
   font-size: 2.5rem

assets/styles/footer.sass

@@ -1,5 +1,5 @@
 .footer
-  background: $vert
+  background: var(--color-green)
   color: white
   padding: 2rem 0
 

assets/styles/header.sass

@@ -5,9 +5,9 @@
   position: relative
 
   &.home
-    height: 80vh
+    height: 60vh
     .hero
-      height: 80vh
+      height: 60vh
 
   .hero
     position: absolute
@@ -19,7 +19,7 @@
     object-fit: cover
     width: 100%
     height: 40vh
-    background-color: $orange
+    background-color: var(--color-orange)
 
   $nav-height: 70px
   .nav
@@ -28,13 +28,16 @@
     bottom: 0
     left: 0
     right: 0
-    background-color: $vert
+    background-color: var(--color-secondary)
     height: $nav-height
 
     @media screen and (max-width: $size-md)
       top: 30px
       height: 50px
 
+    .viemunicipale a
+      color: var(--color-green)!important
+
   .container
     display: flex
     align-items: center
@@ -45,6 +48,7 @@
     z-index: 20
     margin: -1rem 1rem -1rem 0
     background: white
+    box-shadow: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2)
 
     a
       margin: 1rem
@@ -69,6 +73,19 @@
     margin: 0
     height: $nav-height
 
+    .viemunicipale, .viemunicipale a
+      color: var(--color-green)
+      font-weight: bold
+    .cadredevie, .cadredevie a
+      color: var(--color-blue)
+      font-weight: bold
+    .economie, .economie a
+      color: var(--color-orange)
+      font-weight: bold
+    .associations, .associations a
+      color: var(--color-purple)
+      font-weight: bold
+
     @media screen and (max-width: $size-xl)
       font-size: .95rem
 
@@ -76,7 +93,6 @@
       list-style-type: none
       display: none
       position: absolute
-      color: $vert
       background: white
       top: $nav-height
       flex-direction: column
@@ -87,7 +103,6 @@
       z-index: 10
 
       a
-        color: $vert
         padding: 10px 0 0
 
     .menu:hover .submenu
@@ -101,7 +116,7 @@
       	top: 100%
       	width: 0
       	height: 0
-      	border-top: 15px solid $vert
+        border-top: 15px solid var(--color-green)
       	border-right: 15px solid transparent
       	border-bottom: 0 solid transparent
       	border-left: 15px solid transparent
@@ -116,12 +131,6 @@
       &:first-child::before
         content: none
 
-      &::before
-        content: ""
-        border-right: 1px white solid
-        right: 0
-        height: 20px
-
     a
       color: white
       display: flex
@@ -151,7 +160,7 @@
       right: 0
       height: 100vh
       z-index: 100
-      background: $vert
+      background: white
       flex-direction: column
       justify-content: center
 
@@ -166,6 +175,7 @@
         height: auto
         flex-direction: column
         margin-bottom: 1rem
+        box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px
 
       .menu.withSubmenu
         padding: 10px
@@ -177,20 +187,7 @@
         padding: 0
         margin-top: 1rem
         border-radius: 6px
-
+        box-shadow: none
-        &::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

assets/styles/main.sass

@@ -1,9 +1,3 @@
-$vert: #04874b
-$orange: #f0833c
-$grey: #e5e5e5
-$color-primary: black
-$color-secondary: white
-
 $size-xs: 480px
 $size-sm: 600px
 $size-md: 840px
@@ -19,8 +13,16 @@ $size-xl: 1280px
 @import "./css-masonry"
 
 body
-  color: $color-primary
+  --color-green: #04874B
-  background-color: $color-secondary
+  --color-blue: #586994
+  --color-orange: #F0833C
+  --color-purple: #4C1036
+  --color-grey: #E8E9ED
+  --color-primary: black
+  --color-secondary: white
+
+  color: var(--color-primary)
+  background-color: var(--color-secondary)
 
 .open-button, .close-button
   border-radius: 0
@@ -62,7 +64,7 @@ body
   width: 30px
 
 .container
-  max-width: $size-lg
+  max-width: $size-xl
   margin: 0 auto
   padding: 0 1rem
   @media screen and (max-width: $size-xs)
@@ -78,7 +80,7 @@ body
     min-height: inherit
 
   a
-    color: $color-primary
+    color: var(--color-primary)
 
   > .container
     background-color: white
@@ -111,7 +113,7 @@ body
         margin: 0
 
     .opening
-      background: $orange
+      background: var(--color-orange)
       width: 35%
       padding: 20px
       color: black
@@ -151,7 +153,7 @@ body
 
 hr
   margin: 3rem auto
-  border: 1px dashed $vert
+  border: 1px dashed var(--color-green)
   @media screen and (max-width: $size-xs)
     margin: 2rem auto
 // FOOTER
@@ -159,7 +161,7 @@ hr
 .explain
   text-align: center
   font-size: .6rem
-  background-color: $vert
+  background-color: var(--color-green)
   color: white
 
   a
@@ -167,7 +169,7 @@ hr
 
 #content .commissions
   h3, h4
-    color: $vert
+    color: var(--color-green)
 
 #content .conseilmunicipal
   display: flex
@@ -182,7 +184,7 @@ hr
       margin-bottom: 1rem
 
     h2
-      color: $vert
+      color: var(--color-green)
       font-size: 1.1rem
       padding: 0
       margin: 0 0 .3rem
@@ -214,12 +216,6 @@ details > summary
   cursor: pointer
   padding: .5rem 0
 
-// $vert: #04874b
-// $orange: #f0833c
-// $grey: #e5e5e5
-// $color-primary: black
-// $color-secondary: white
-
 #content .cards
   margin: 0 -1rem
   padding: 0
@@ -229,7 +225,7 @@ details > summary
   justify-content: center
   .card
     flex: 0 0 calc(100% * 3 / 12)
-    background-color: #f0833c
+    background-color: var(--color-purple)
     margin: 1rem
     padding: 1rem
     border-radius: 4px
@@ -247,7 +243,7 @@ details > summary
 
     &:hover
       box-shadow: none
-      color: $vert
+      color: var(--color-purple)
       background-color: white
 
 blockquote
@@ -258,9 +254,9 @@ blockquote
   font-style: italic
   color: #555555
   padding: 1.5rem
-  border-left: 8px solid $vert
+  border-left: 8px solid var(--color-green)
   line-height: 1.4
-  background: #EDEDED
+  background: var(--color-grey)
 
   position: relative
 
@@ -275,7 +271,7 @@ blockquote
   &::before
     font-family: Arial
     content: "\201C"
-    color: $vert
+    color: var(--color-green)
     font-size: 10rem
     position: absolute
     left: 1rem

assets/styles/posts.sass

@@ -12,7 +12,7 @@ $size-news: 100px
   .picture
     width: $size-news
     height: $size-news
-    background: $orange
+    background: var(--color-orange)
     flex-shrink: 0
     @media screen and (max-width: $size-sm)
       margin-bottom: 1rem
@@ -35,7 +35,7 @@ $size-news: 100px
           width: 100%
     .details
       padding: 20px
-      background: $grey
+      background: var(--color-grey)
       height: $size-la-une
       overflow: hidden
       text-overflow: ellipsis

config/_default/config.yml

@@ -44,6 +44,10 @@ markup:
       attribute:
         block: true
         title: true
+  tableOfContents:
+    endLevel: 3
+    ordered: false
+    startLevel: 2
 
 disableHugoGeneratorInject: true
 

content/viemunicipale/lemotdumaire/index.md

@@ -1,24 +0,0 @@
----
-title: Le mot du **maire**
-description: Retrouvez le mot du Maire après son élection
-image: anthony-choren-lYzap0eubDY-unsplash.jpg
-image_credit: Photo de Anthony Choren sur Unsplash
-menu:
-  main:
-    name: Le mot du maire
-    weight: 4
-    parent: viemunicipale
----
-
-{{< maire >}}
-
-**Nous voilà maintenant en début de mandat 2020, une année spéciale avec cette crise sanitaire.**
-
-2020 n’aura pas été facile pour tous, et une première pensée va à ceux qui ont été malheureusement touchés de plein fouet par ce COVID 19.
-
-Pour notre commune, dans la conjoncture actuelle que nous connaissons tous, il nous semble important que la municipalité reste bien assurée. Nous allons poursuivre les dossiers en cours : travaux de l’école, la voirie... Rénover la mairie afin de faciliter son accès aux personnes à mobilité réduite et d’améliorer sa performance énergétique. D’autres projets seront étudiés en fonction des besoins qui se manifesteront. Tous les aspects animations, culture et patrimoine qui font la richesse et la vie de notre commune seront soutenus avec conviction.
-
-Je souhaite remercier toutes les personnes qui ont continué de se mobiliser pour notre village de Crémeaux malgré la pandémie (commerçants, artisans et entreprises, associations, agriculteurs, enseignants, soignants...) et en particuliers les adjoints, conseillers et agents communaux.
-
-**Didier PONCET**
-

layouts/_default/baseof.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}">
 {{ partial "head.html" . }}
-  <body>
+  <body class="{{ default .Params.menu.main.identifier .Params.menu.main.parent }}">
     {{ partial "header.html" . }}
     {{ block "all" . }}
     <main role="main" id="content" class="container">

layouts/partials/header.html

@@ -26,7 +26,7 @@
       <button class="open-button" onClick="document.getElementById('nav').setAttribute('data-open', true)">≡ Menu</button>
       <ol id="menu">
         {{ range .Site.Menus.main }}
-        <li class="menu{{ if .HasChildren }} withSubmenu{{ end }}">
+        <li class="menu{{ if .HasChildren }} withSubmenu{{ end }} {{ .Identifier }}">
           <a href="{{ .URL }}">
             <img class="icons" src="/icons/{{ .Identifier }}.svg" alt="{{ .Name }}" width="30" height="30" /><span>{{ .Name }}</span>
           </a>

static/icons/associations.svg

@@ -1 +1 @@
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><path class="cls-1" d="M4.74 4.63h20.64S26.71 19.68 15 25.46C11.79 24.19 3.28 20.5 4.74 4.63zm2.98 7.76a4.32 4.32 0 016.17 0m2.16 0a4.38 4.38 0 016.24 0"/><path class="cls-1" d="M18.63 17.55s-.14 3.78-3.66 3.78-3.64-3.78-3.64-3.78z"/></svg>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#4C1036;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><path class="cls-1" d="M4.74 4.63h20.64S26.71 19.68 15 25.46C11.79 24.19 3.28 20.5 4.74 4.63zm2.98 7.76a4.32 4.32 0 016.17 0m2.16 0a4.38 4.38 0 016.24 0"/><path class="cls-1" d="M18.63 17.55s-.14 3.78-3.66 3.78-3.64-3.78-3.64-3.78z"/></svg>

static/icons/cadredevie.svg

@@ -1 +1 @@
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><path class="cls-1" d="M2.05 23.56s7.8-5.11 19.62.75M2.05 28a20.79 20.79 0 0123 0m3.02-4.85s-4.95-.59-7.28 2.56M8.6 10.18v11.34m-1.93-7.27l1.68 1.68m2.22-4.13L8.6 13.75"/><circle class="cls-1" cx="21.94" cy="8.15" r="2.82"/><path class="cls-1" d="M21.92 1.48V3m0 10.23v1.51m-6.63-6.63h1.52m10.22 0h1.52M17.23 12.8l1.07-1.07m7.23-7.23l1.08-1.08m0 9.38l-1.08-1.07M18.3 4.5l-1.07-1.08M9.26 19c3.33 0 3.45-2.59 3.35-4.24 0-10.57-4-10.26-4-10.26s-4-.4-4 10.26C4.48 16.44 4.6 19 7.93 19z"/></svg>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#586994;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><path class="cls-1" d="M2.05 23.56s7.8-5.11 19.62.75M2.05 28a20.79 20.79 0 0123 0m3.02-4.85s-4.95-.59-7.28 2.56M8.6 10.18v11.34m-1.93-7.27l1.68 1.68m2.22-4.13L8.6 13.75"/><circle class="cls-1" cx="21.94" cy="8.15" r="2.82"/><path class="cls-1" d="M21.92 1.48V3m0 10.23v1.51m-6.63-6.63h1.52m10.22 0h1.52M17.23 12.8l1.07-1.07m7.23-7.23l1.08-1.08m0 9.38l-1.08-1.07M18.3 4.5l-1.07-1.08M9.26 19c3.33 0 3.45-2.59 3.35-4.24 0-10.57-4-10.26-4-10.26s-4-.4-4 10.26C4.48 16.44 4.6 19 7.93 19z"/></svg>

static/icons/economie.svg

@@ -1 +1 @@
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><path class="cls-1" d="M4.48 11.95v13.54H25.5V11.95"/><path class="cls-1" d="M7.05 25.09v-9.31h5.93v9.31m4.05-9.31H23v4.54h-5.97zM15 12a2.38 2.38 0 002.59-2.4A2.33 2.33 0 0020 12a2.42 2.42 0 002.65-2.09A2.29 2.29 0 0025.21 12 2.84 2.84 0 0028 9.5l-2.74-5H4.78L2 9.5A2.78 2.78 0 004.76 12a2.3 2.3 0 002.52-2.14A2.42 2.42 0 009.92 12a2.33 2.33 0 002.45-2.4A2.38 2.38 0 0015 12z"/></svg>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#F0833C;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><path class="cls-1" d="M4.48 11.95v13.54H25.5V11.95"/><path class="cls-1" d="M7.05 25.09v-9.31h5.93v9.31m4.05-9.31H23v4.54h-5.97zM15 12a2.38 2.38 0 002.59-2.4A2.33 2.33 0 0020 12a2.42 2.42 0 002.65-2.09A2.29 2.29 0 0025.21 12 2.84 2.84 0 0028 9.5l-2.74-5H4.78L2 9.5A2.78 2.78 0 004.76 12a2.3 2.3 0 002.52-2.14A2.42 2.42 0 009.92 12a2.33 2.33 0 002.45-2.4A2.38 2.38 0 0015 12z"/></svg>

static/icons/viemunicipale.svg

@@ -1 +1 @@
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><circle class="cls-1" cx="14.99" cy="7.93" r="3.41"/><path class="cls-1" d="M11.61 25.47v-3.8H9.45c0-3.06.29-8.09 5.54-8.09s5.55 5 5.55 8.09h-1.89v3.8"/><circle class="cls-1" cx="6.99" cy="10.33" r="2.52"/><path class="cls-1" d="M8.44 15.55c-1.59-.35-4.59-.39-5.63 3.69h1.71v6.23"/><circle class="cls-1" cx="22.96" cy="10.33" r="2.52"/><path class="cls-1" d="M21.57 15.55c1.6-.35 4.59-.39 5.63 3.69h-1.71v6.23"/></svg>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;stroke:#04874B;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><circle class="cls-1" cx="14.99" cy="7.93" r="3.41"/><path class="cls-1" d="M11.61 25.47v-3.8H9.45c0-3.06.29-8.09 5.54-8.09s5.55 5 5.55 8.09h-1.89v3.8"/><circle class="cls-1" cx="6.99" cy="10.33" r="2.52"/><path class="cls-1" d="M8.44 15.55c-1.59-.35-4.59-.39-5.63 3.69h1.71v6.23"/><circle class="cls-1" cx="22.96" cy="10.33" r="2.52"/><path class="cls-1" d="M21.57 15.55c1.6-.35 4.59-.39 5.63 3.69h-1.71v6.23"/></svg>