feat: Avancement général sur le contenu et le design

fixes #3, fixes #4, fixes #5, fixes #7, fixes #8, fixes #9, fixes #10

assets/fonts/source-sans-pro.css

@@ -1,131 +0,0 @@
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 200;
-    font-style: normal;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-ExtraLight.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-ExtraLight.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-ExtraLight.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-ExtraLight.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 200;
-    font-style: italic;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-ExtraLightIt.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-ExtraLightIt.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-ExtraLightIt.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-ExtraLightIt.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 300;
-    font-style: normal;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-Light.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-Light.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-Light.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-Light.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 300;
-    font-style: italic;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-LightIt.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-LightIt.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-LightIt.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-LightIt.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 400;
-    font-style: normal;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-Regular.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-Regular.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-Regular.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-Regular.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 400;
-    font-style: italic;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-It.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-It.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-It.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-It.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 600;
-    font-style: normal;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-Semibold.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-Semibold.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-Semibold.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 600;
-    font-style: italic;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-SemiboldIt.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-SemiboldIt.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-SemiboldIt.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-SemiboldIt.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 700;
-    font-style: normal;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-Bold.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-Bold.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-Bold.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-Bold.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 700;
-    font-style: italic;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-BoldIt.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-BoldIt.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-BoldIt.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-BoldIt.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 900;
-    font-style: normal;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-Black.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-Black.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-Black.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-Black.ttf') format('truetype');
-}
-
-@font-face{
-    font-family: 'Source Sans Pro';
-    font-weight: 900;
-    font-style: italic;
-    font-stretch: normal;
-    src: url('/fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-BlackIt.ttf.woff2') format('woff2'),
-         url('/fonts/source-sans-pro/WOFF/OTF/SourceSansPro-BlackIt.otf.woff') format('woff'),
-         url('/fonts/source-sans-pro/OTF/SourceSansPro-BlackIt.otf') format('opentype'),
-         url('/fonts/source-sans-pro/TTF/SourceSansPro-BlackIt.ttf') format('truetype');
-}

assets/styles/fonts.sass

@@ -0,0 +1,59 @@
+@font-face
+  font-family: 'League Spartan Variable'
+  src: url('/fonts/LeagueSpartan-VF.woff2') format('woff2-variations')
+  font-weight: 200 900
+
+html
+  font-size: 18px
+
+body
+  font-weight: 400
+  line-height: 1.2
+  font-family: 'League Spartan Variable'
+
+h1, h2, h3, h4, h5
+  font-weight: 600
+  text-transform: uppercase
+
+h1
+  text-align: center
+  text-transform: uppercase
+  color: $vert
+  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
+
+h2
+  font-size: 1.4rem
+  margin: 1rem 0
+  text-transform: uppercase
+  @media screen and (max-width: $size-sm)
+    font-size: 1.1rem
+
+h3
+  font-size: 1.1rem
+  text-transform: uppercase
+  @media screen and (max-width: $size-sm)
+    font-size: 1rem
+
+h4
+  font-size: 1rem
+  @media screen and (max-width: $size-sm)
+    font-size: .9rem
+
+p
+  margin-top: 1rem
+  margin-bottom: 1rem
+
+small,
+.text_small
+  font-size: 0.8rem

assets/styles/header.sass

@@ -130,7 +130,7 @@
 
       &::before
         content: ""
-        border-right: 2px white solid
+        border-right: 1px white solid
         right: 0
         height: 20px
 
@@ -146,7 +146,7 @@
         text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
 
     img
-      padding: 0 10px
+      margin: 0 10px 0 0
 
       @media screen and (max-width: $size-lg) and (min-width: $size-md)
         display: none

assets/styles/html.sass

@@ -1,55 +0,0 @@
-/* Box sizing rules */
-*,*::before,*::after
-  box-sizing: border-box
-
-html
-  /*-webkit-font-smoothing: antialiased*/
-  /*--moz-osx-font-smoothing: grayscale*/
-  scroll-behavior: smooth
-  /* 18px */
-  font-size: $font-size
-
-body
-  font-weight: 400
-  line-height: 1.65
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
-  color: $color-primary
-  background-color: $color-secondary
-
-p
-  margin-bottom: 1.15rem
-
-h1,
-h2,
-h3,
-h4,
-h5
-  margin: 2.75rem 0 1.05rem
-  font-weight: 400
-  line-height: 1.15
-
-h4,
-h5
-  margin: 1.375rem 0 0.75rem
-  font-weight: 400
-  line-height: 1.15
-
-h1
-  margin-top: 0
-  font-size: 4rem
-
-h2
-  font-size: 3rem
-
-h3
-  font-size: 3rem
-
-h4
-  font-size: 2.5rem
-
-h5
-  font-size: 2rem
-
-small,
-.text_small
-  font-size: 0.889em

assets/styles/main.sass

@@ -1,6 +1,3 @@
-// VARIABLE
-$font-size: 18px
-
 $vert: #04874b
 $orange: #f0833c
 $grey: #e5e5e5
@@ -14,29 +11,42 @@ $size-lg: 960px
 $size-xl: 1280px
 
 @import "./reset"
-@import "./html"
+@import "./fonts"
 @import "./header"
+@import "./posts"
+@import "./print"
 
+body
+  color: $color-primary
+  background-color: $color-secondary
+
+.md p
   img
-  display: block
+    margin: 3rem auto
-
+  &:first-child img
-  &.round
+    margin: 0 auto 3rem
-    border-radius: 100%
+  &:last-child img
-
+    margin: 3rem auto 0
-.maire
+  &:first-child:last-child img
-  padding-bottom: 3rem
-  img
     margin: 0 auto
 
+.round
+  border-radius: 100%
+
 // CONTAINER
 
 .icons
-  width: 50px
+  width: 30px
 
 .container
   max-width: $size-lg
   margin: 0 auto
   padding: 0 1rem
+  @media screen and (max-width: $size-xs)
+    padding: 0 .5rem
+
+  &.md
+    padding: 0 .5rem
 
 // content
 
@@ -50,44 +60,14 @@ img
   a
     color: $color-primary
 
-  .container
+  > .container
     background-color: white
     padding: 1rem
     @media screen and (max-width: $size-sm)
       margin: 0
       padding: 1rem 0
 
-  h1
-    text-align: center
-    text-transform: uppercase
-    color: $vert
-    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
-
-  h2
-    font-size: 2rem
-    @media screen and (max-width: $size-sm)
-      font-size: 1.1rem
-
-  h3
-    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
@@ -98,7 +78,7 @@ img
       margin: 1rem
 
     .news
-      width: 70%
+      width: 65%
       display: flex
       flex-direction: column
       @media screen and (max-width: $size-xl)
@@ -107,87 +87,9 @@ img
         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
-
-        &.last
-
-          .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: 0 1rem
-          height: $size-news
-          max-width: 100%
-          overflow: hidden
-          @media screen and (max-width: $size-sm)
-            height: inherit
-            text-align: center
-
-          span
-            font-size: .8rem
-            display: block
-          h2
-            font-size: 1.4rem
-            font-weight: bold
-            margin: .6rem 0
-            white-space: nowrap
-            overflow: hidden
-            text-overflow: ellipsis
-          h3
-            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
-
-
-
     .opening
       background: $orange
-      width: 30%
+      width: 35%
       padding: 20px
       color: white
       background-image: url(/icons/horloge.svg)
@@ -195,7 +97,7 @@ img
       background-position: center -50px
       background-size: 70%
       @media screen and (max-width: $size-xl)
-        width: 40%
+        width: 35%
       @media screen and (max-width: $size-md)
         width: 100%
         margin: 0
@@ -203,24 +105,32 @@ img
         background-size: 50%
 
       h2
-        font-size: 1.4rem
         margin: 1rem 0
-        font-weight: bold
 
       h3
         margin: 1rem 0 .4rem
-        font-size: 1.2rem
+        text-transform: inherit
-        font-weight: bold
 
       p
-        font-size: .8rem
+        margin-top: 0
 
-        &:last-child
+      p:last-child
         margin-bottom: 0
 
       a
         color: white
+.news
+  aside h2
+    text-align: center
+  > small
+    display: block
+    text-align: center
 
+hr
+  margin: 3rem auto
+  border: 1px dashed $vert
+  @media screen and (max-width: $size-xs)
+    margin: 2rem auto
 // FOOTER
 
 .explain

assets/styles/posts.sass

@@ -0,0 +1,76 @@
+$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
+
+    a
+      width: 100%
+      height: 100%
+      display: block
+
+  &.big
+
+    .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: 0 1rem
+    height: $size-news
+    max-width: 100%
+    overflow: hidden
+    @media screen and (max-width: $size-sm)
+      height: inherit
+      text-align: center
+
+    span
+      font-size: .8rem
+      display: block
+    h2
+      margin: .6rem 0
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
+    h3
+      margin: .3rem 0
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
+
+    .text
+      font-size: .9rem
+      overflow: hidden
+      text-overflow: ellipsis
+      width: 100%
+      padding-top: 6px
+
+      p
+        margin: 0
+        display: inline

assets/styles/print.sass

@@ -12,10 +12,6 @@ body
     font-family: serif
     font-size: 12pt
 
-nav,
-footer
-  display: none
-
   p,
   .p-like,
   h1,
@@ -73,7 +69,7 @@ caption
   a
     color: #000
 
-a[href^="http"]:not([href*="pikselkraft.com"]):after
+  a[href^="http"]:not([href*="cremeaux.fr"]):after
     content: " (" attr(href) ")"
 
   a[href^="javascript:"]::after,

assets/styles/reset.css

@@ -8,6 +8,12 @@ Reset CSS
   box-sizing: border-box;
 }
 
+html {
+  /*-webkit-font-smoothing: antialiased*/
+  /*--moz-osx-font-smoothing: grayscale*/
+  scroll-behavior: smooth;
+}
+
 /* Remove default margin */
 body,
 h1,
@@ -33,11 +39,6 @@ img {
   display: block;
 }
 
-/* Natural flow and rhythm in articles by default */
-article > * + * {
-  margin-top: 1em;
-}
-
 /* Inherit fonts for inputs and buttons */
 input,
 button,

config/production/config.yml

@@ -1 +1,2 @@
 baseURL: https://cremeaux.fr/
+enableRobotsTXT: true

config/staging/config.yml

@@ -1 +1,2 @@
 baseURL: https://staging.cremeaux.fr/
+enableRobotsTXT: true

content/actualites/2020_10_24-LAND_ART.md

@@ -1,10 +0,0 @@
----
-title: LAND ART
-catégorie: Association
-date: 2020-10-24
----
-
-🎨 L'activité LAND ART est pour l'instant maintenue la semaine prochaine.  
-👍 A partir de 4 ans.  
-🌦 A voir en fonction de la météo car l'atelier se fera en extérieur pour respecter les mesures sanitaires.  
-☎️ Infos et inscriptions directement auprès de l'association.

content/actualites/2020_11_03-déchèterie_rouvre_ses_portes/index.md

@@ -4,15 +4,16 @@ catégorie: Communauté de Communes du Pays d'Urfé
 date: 2020-11-03
 ---
 
-𝗔𝗽𝗿𝗲̀𝘀 𝗾𝘂𝗲𝗹𝗾𝘂𝗲𝘀 𝗷𝗼𝘂𝗿𝘀 𝗱𝗲 𝗳𝗲𝗿𝗺𝗲𝘁𝘂𝗿𝗲, 𝗹𝗮 𝗱𝗲́𝗰𝗵𝗲̀𝘁𝗲𝗿𝗶𝗲 𝗱𝘂 𝗣𝗮𝘆𝘀 𝗱’𝗨𝗿𝗳𝗲́ 𝗿𝗼𝘂𝘃𝗿𝗲 𝘀𝗲𝘀 𝗽𝗼𝗿𝘁𝗲𝘀 à tous les usagers, dès demain 4 novembre.
+**Après quelques jours de fermeture, la déchetterie du pays d'Urfé rouvre ses portes** à tous les usagers, dès demain 4 novembre.
 
 Pour vous y rendre, vous devez cocher sur votre attestation la case "convocation judiciaire ou administrative et pour se rendre dans un service public".
 
 ‼ ATTENTION - Plus que jamais, les consignes doivent être respectées :
-- 𝗠𝗮𝘀𝗾𝘂𝗲 𝗼𝗯𝗹𝗶𝗴𝗮𝘁𝗼𝗶𝗿𝗲
+- **Masque obligatoire**
-- Pas de prêt de matériel : 𝘃𝗼𝘂𝘀 𝗱𝗲𝘃𝗲𝘇 𝗽𝗿𝗲́𝘃𝗼𝗶𝗿 𝗱𝗲 𝗾𝘂𝗼𝗶 𝗱𝗲́𝗰𝗵𝗮𝗿𝗴𝗲𝗿 𝗲𝘁 𝗻𝗲𝘁𝘁𝗼𝘆𝗲𝗿 𝗹𝗲𝘀 𝗲𝗺𝗽𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁𝘀 avant votre départ (pelles, balais, etc)
+- Pas de prêt de matériel : **vous devez prévoir de quoi décharger et nettoyer les emplacements** avant votre départ (pelles, balais, etc)
-- 𝗣𝗮𝘀 𝗱’𝗮𝗶𝗱𝗲 𝗮𝘂 𝗱𝗲́𝗰𝗵𝗮𝗿𝗴𝗲𝗺𝗲𝗻𝘁 par les agents de la déchèterie
+- **Pas d'aide au déchargement** par les agents de la déchetterie
 
 Rappel des jours et horaires d’ouverture :
-du lundi au vendredi 14h - 18h
+
-le samedi 9h - 12h et 14h - 18h.
+- lundi au vendredi de 14h à 18h
+- samedi de 9h à 12h et 14h à 18h.

content/actualites/test-typo.md

@@ -0,0 +1,168 @@
+---
+title: "Adversus is a web-based dialer and practical CRM solution"
+date: 2020-04-18T10:07:21+06:00
+# post image
+image: "https://dr.savee-cdn.com/things/5/f/7f148fa56b883776e659ec.jpg"
+# post type (regular/featured)
+type: "regular"
+# meta description
+description: "This is meta description"
+# post draft
+draft: false
+---
+
+Here is example of hedings 1. You can use this heading by following markdownify rules. For example: use `# Heading 1` for heading 1.
+
+## Heading 2
+
+Here is example of hedings 2. You can use this heading by following markdownify rules. For example: use `# Heading 2` for heading 2.
+
+### Heading 3
+
+Here is example of hedings 2. You can use this heading by following markdownify rules. For example: use `# Heading 2` for heading 2.
+
+#### Heading 4
+
+Here is example of hedings 2. You can use this heading by following markdownify rules. For example: use `# Heading 2` for heading 2.
+
+##### Heading 5
+
+Here is example of hedings 2. You can use this heading by following markdownify rules. For example: use `# Heading 2` for heading 2.
+
+###### Heading 6
+
+Here is example of hedings 2. You can use this heading by following markdownify rules. For example: use `# Heading 2` for heading 2.
+
+
+<hr>
+
+##### Emphasis
+
+Emphasis, aka italics, with *asterisks* or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+<hr>
+
+##### Link
+[I'm an inline-style link](https://www.google.com)
+
+[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
+
+[I'm a reference-style link][Arbitrary case-insensitive reference text]
+
+[I'm a relative reference to a repository file](../blob/master/LICENSE)
+
+[You can use numbers for reference-style link definitions][1]
+
+Or leave it empty and use the [link text itself].
+
+URLs and URLs in angle brackets will automatically get turned into links.
+http://www.example.com or <http://www.example.com> and sometimes
+example.com (but not on Github, for example).
+
+Some text to show that the reference links can follow later.
+
+[arbitrary case-insensitive reference text]: https://www.themefisher.com
+[1]: https://gethugothemes.com
+[link text itself]: https://www.getjekyllthemes.com
+
+<hr>
+
+##### Paragraph
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam nihil enim maxime corporis cumque totam aliquid nam sint inventore optio modi neque laborum officiis necessitatibus, facilis placeat pariatur! Voluptatem, sed harum pariatur adipisci voluptates voluptatum cumque, porro sint minima similique magni perferendis fuga! Optio vel ipsum excepturi tempore reiciendis id quidem? Vel in, doloribus debitis nesciunt fugit sequi magnam accusantium modi neque quis, vitae velit, pariatur harum autem a! Velit impedit atque maiores animi possimus asperiores natus repellendus excepturi sint architecto eligendi non, omnis nihil. Facilis, doloremque illum. Fugit optio laborum minus debitis natus illo perspiciatis corporis voluptatum rerum laboriosam.
+
+<hr>
+
+##### Ordered List
+
+1. List item
+2. List item
+3. List item
+4. List item
+5. List item
+
+<hr>
+
+##### Unordered List
+
+* List item
+* List item
+* List item
+* List item
+* List item
+
+<hr>
+
+##### Code and Syntax Highlighting
+
+Inline `code` has `back-ticks around` it.
+
+```javascript
+var s = "JavaScript syntax highlighting";
+alert(s);
+```
+
+```python
+s = "Python syntax highlighting"
+print s
+```
+
+<hr>
+
+##### Blockquote
+
+> This is a blockquote example.
+
+<hr>
+
+##### Inline HTML
+
+You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
+
+<dl>
+  <dt>Definition list</dt>
+  <dd>Is something people use sometimes.</dd>
+
+  <dt>Markdown in HTML</dt>
+  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
+</dl>
+
+
+<hr>
+
+##### Tables
+
+Colons can be used to align columns.
+
+| Tables        | Are           | Cool  |
+| ------------- |:-------------:| -----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+
+There must be at least 3 dashes separating each header cell.
+The outer pipes (|) are optional, and you don't need to make the
+raw Markdown line up prettily. You can also use inline Markdown.
+
+Markdown | Less | Pretty
+--- | --- | ---
+*Still* | `renders` | **nicely**
+1 | 2 | 3
+
+<hr>
+
+##### Image
+
+![image](../../images/blog/post-6.jpg)
+
+<hr>
+
+##### Youtube video
+
+{{< youtube C0DPdy98e4c >}}

content/associations/_index.md

@@ -9,6 +9,6 @@ menu:
     pre: bleu
 ---
 
-La page n'est pas encore réalisé, nous voulons ajouter ici l'ensemble des informations des différentes associations de Crémeaux.
+🚧 La page n'a pas encore été réalisée.
 
-Si vous êtes président d'une association, n'hésitez pas à nous envoyer un texte descriptif, une photo ainsi que les informations pour vous contacter.
+Nous voulons ajouter ici l'ensemble des informations des différentes associations de Crémeaux.

content/cadredevie/_index.md

@@ -9,6 +9,6 @@ menu:
     pre: vert
 ---
 
-![vache](/vache.svg)
+🚧 La page n'a pas encore été réalisée.
 
-En cours de construction
+Nous voudrions présenter les caractéristiques de notre commune, avec des parties sur la santé et les soins, la culture, l'enseignement et l'histoire de Crémeaux.

content/cadredevie/enseignement.md

@@ -1,10 +0,0 @@
----
-title: Enseignement
-draft: true
-menu:
-  main:
-    parent: cadre
-    name: Enseignement
-    weight: 30
-    pre: vert
----

content/cadredevie/histoireetculture.md

@@ -1,10 +0,0 @@
----
-title: Histoire et Culture
-draft: true
-menu:
-  main:
-    parent: cadre
-    name: Histoire et Culture
-    weight: 40
-    pre: vert
----

content/cadredevie/leterritoire.md

@@ -1,10 +0,0 @@
----
-title: Le territoire
-draft: true
-menu:
-  main:
-    parent: cadre
-    name: Le territoire
-    weight: 10
-    pre: vert
----

content/cadredevie/santeetsoins.md

@@ -1,10 +0,0 @@
----
-title: Accueil
-draft: true
-menu:
-  main:
-    parent: cadre
-    name: Santé et soins
-    weight: 20
-    pre: vert
----

content/economie/_index.md

@@ -9,7 +9,7 @@ menu:
     pre: jaune
 ---
 
-Cette page n'est pas encore faite.
+🚧 La page n'a pas encore été réalisée.
 
 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.
 

content/viemunicipale/leconseilmunicipal/index.md

@@ -5,7 +5,7 @@ menu:
     parent: municipale
     name: Le Conseil Municipal
     weight: 20
-image: anthony-choren-lYzap0eubDY-unsplash.jpg
+image: jonas-jacobsson-2xaF4TbjXT0-unsplash.jpg
 layout: conseil
 ---
 

content/viemunicipale/lemotdumaire/index.md

@@ -1,6 +1,6 @@
 ---
 title: Le mot du **Maire**
-image: mairie.jpg
+image: anthony-choren-lYzap0eubDY-unsplash.jpg
 menu:
   main:
     parent: municipale
@@ -12,21 +12,10 @@ menu:
 
 **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
+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.
-à ceux qui ont été malheureusement touchés de plein fouet par
+
-ce COVID 19. Pour notre commune, dans la conjoncture actuelle
+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.
-que nous connaissons tous, il nous semble important que la
+
-municipalité reste bien assurée. Nous allons poursuivre les dossiers
+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.
-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/actualites/list.html

@@ -3,13 +3,9 @@
     <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>
+        {{ partial "article-preview.html" . }}
       {{ end }}
-        {{ end }}
-      </ul>
     </div>
   </div>
 {{ end }}

layouts/actualites/single.html

@@ -2,7 +2,30 @@
   <div class="container">
     <h1>{{ .RenderString .Title }}</h1>
     <div class="container news md">
+      <small>
+        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
+      </small>
       {{ .Content }}
+      <aside>
+        <hr>
+        <h2>
+          {{ if and .NextInSection .PrevInSection }}
+          Les actualités suivant et précédent
+          {{ else if .NextInSection }}
+          L'actualité précédent
+          {{ else }}
+          L'actualité suivant
+          {{ end }}
+        </h2>
+        {{ with .NextInSection }}
+          {{ .Scratch.Set "big" false }}
+          {{ partial "article-preview.html" . }}
+        {{ end }}
+        {{ with .PrevInSection }}
+          {{ .Scratch.Set "big" false }}
+          {{ partial "article-preview.html" . }}
+        {{ end }}
+      </aside>
     </div>
   </div>
 {{ end }}

layouts/home.html

@@ -8,46 +8,15 @@
         {{ $first := index (first 1 $lastnews) 0 }}
         {{ $others := after 1 $lastnews }}
         {{ with $first }}
-        <div class="post last">
+          {{ .Scratch.Set "big" true }}
-          <div class="picture">
+          {{ partial "article-preview.html" . }}
-            {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
-            {{ $resized := $image.Fill "220x220 Center"}}
-            <a href="{{ .RelPermalink }}">
-              <img src="{{ $resized.RelPermalink }}" alt="{{ .RenderString .Title }}" />
-            </a>
-          </div>
-          <div class="details">
-            <div class="info">
-              <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
-            </div>
-            <h2 title="{{ .RenderString .Title }}"><a href="{{ .RelPermalink }}">{{ .RenderString .Title }}</a></h2>
-            <div class="text">
-              {{ .Content | truncate 280 }}
-            </div>
-          </div>
-        </div>
         {{ end }}
         {{ range $others }}
-        <div class="post ">
+          {{ partial "article-preview.html" . }}
-          <div class="picture">
-            {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
-            {{ if $image }}
-              {{ $resized := $image.Fill "100x100 Center"}}
-              <a href="{{ .RelPermalink }}">
-                <img src="{{ $resized.RelPermalink }}" alt="{{ .Title }}" />
-              </a>
-            {{ end }}
-          </div>
-          <div class="details">
-            <span><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time></span>
-            <h3 title="{{ .Title }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-            <div class="text">
-              {{ .Content | truncate 200 }}
-            </div>
-          </div>
-        </div>
         {{ end }}
+        <p>
           <a href="/actualites">Voir toutes les actualités</a>
+        </p>
       </div>
       <div class="opening">
         {{ .Content }}

layouts/partials/article-preview.html

@@ -0,0 +1,30 @@
+{{ $isBig := default false (.Scratch.Get "big") }}
+{{ $title := .RenderString .Title }}
+{{ $titleWithoutHTML := $title | plainify }}
+{{ $pictureSize := cond $isBig "220x220 Center" "100x100 Center" }}
+{{ $truncateSize := cond $isBig 180 90}}
+<div class="post{{ if $isBig }} big{{ end }}">
+  <div class="picture">
+    {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
+    <a href="{{ .RelPermalink }}">
+      {{ if $image }}
+      {{ $resized := $image.Fill $pictureSize}}
+      <img src="{{ $resized.RelPermalink }}" alt="{{ $titleWithoutHTML }}" />
+      {{ end }}
+    </a>
+  </div>
+  <div class="details">
+    <small>
+      <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
+    </small>
+    {{ if $isBig }}
+    <h2 title="{{ $titleWithoutHTML }}"><a href="{{ .RelPermalink }}">{{ $title }}</a></h2>
+    {{else}}
+    <h3 title="{{ $titleWithoutHTML }}"><a href="{{ .RelPermalink }}">{{ $title }}</a></h3>
+    {{ end }}
+    <div class="text">
+      {{ $ellipsis := print " <a href='" .RelPermalink "'>…</a>" | safeHTML }}
+      {{ .Content | plainify | htmlUnescape | truncate $truncateSize $ellipsis }}
+    </div>
+  </div>
+</div>

layouts/partials/footer.html

@@ -13,11 +13,11 @@
       </p>
     </div>
     <div class="logo">
-      <img width="135" height="163" src="/icons/logo-footer.png" alt="Commune de Crémeaux" />
+      <img width="130" height="160" src="/icons/logo-footer_blanc.svg" alt="Commune de Crémeaux" />
     </div>
     <div class="horaire">
       <h3>Horaire d'ouverture<br>au public :</h3>
-      <p>Lundi, mardi, jeudi et vendredi : 8h30 à 12h15</p>
+      <p>Lundi, mardi, jeudi et vendredi : <br>8h30 à 12h15</p>
       <p>Mercredi : 9h15 à 12h15</p>
     </div>
   </div>

layouts/partials/header.html

@@ -1,22 +1,18 @@
-{{ $imageSize := cond .IsHome "1920x850 Top" "1920x450 Center" }}
+{{ $imageSizeSmall := cond .IsHome "600x600 Top" "600x400 Center" }}
+{{ $imageSizeBig := cond .IsHome "1920x850 Top" "1920x450 Center" }}
 <header class="header{{ if .IsHome }} home{{ end }}">
-  {{ if .Resources.ByType "image" }}
-    {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
-    {{ if $image }}
-      {{ $resized := $image.Fill $imageSize }}
-      <img class="hero" src="{{ $resized.RelPermalink }}" />
-    {{ end }}
-  {{ else }}
   {{ $headless := .Site.GetPage "/" }}
-    {{ $image := $headless.Resources.GetMatch "*" }}
+  {{ $image := default ($headless.Resources.GetMatch "*") (.Resources.GetMatch (default "*" .Params.image)) }}
-    {{ $resized := $image.Fill $imageSize }}
+  {{ if $image }}
-    <img class="hero" src="{{ $resized.RelPermalink }}" />
+    {{ $resizedSmall := $image.Fill $imageSizeSmall }}
+    {{ $resizedBig := $image.Fill $imageSizeBig }}
+    <img class="hero no-print" src="{{ $resizedSmall.RelPermalink }}" srcset="{{ $resizedSmall.RelPermalink }} 600w, {{ $resizedBig.RelPermalink }} 1920w" sizes="(max-width: 600px) 500px, 1920px" />
   {{ end }}
   <nav class="nav">
     <div class="container">
       <div class="logo">
         <a href="/" class="">
-          <img src="/icons/logo-header.png" alt="Blason de Crémeaux" />
+          <img src="/icons/logo-entete-200x70.svg" alt="Blason de Crémeaux" />
         </a>
       </div>
       <button class="open-button">≡ Menu</button>

layouts/partials/maire.html

@@ -1,6 +1,6 @@
 {{ $headless := .Site.GetPage "/viemunicipale/lemotdumaire" }}
-<div class="maire">
+<p class="maire">
   {{ $image := $headless.Resources.GetMatch "maire.jpg" }}
   {{ $resized := $image.Resize "300x" }}
   <img class="round" src="{{ $resized.RelPermalink }}" alt="Didier PONCET" />
-</div>
+</p>

run

@@ -18,9 +18,15 @@ help() {
   echo "- ./run dev production     🚧 Lancement du serveur pour le développement sans les brouillons"
   echo "- ./run prod               🚀 Déploiement du site en mode production"
   echo "- ./run staging            🚀 Déploiement du site en mode staging"
+  echo "- ./run favicon            🎨 Création du favicon"
   echo
 }
 
+favicon() {
+  # https://stackoverflow.com/questions/39256104/how-to-convert-an-image-file-from-svg-to-a-multi-size-ico-without-blur-sharp
+  convert -density 300 -define icon:auto-resize=48,32,16 -background none static/icons/blason-512x512.png static/favicon.ico
+}
+
 prod() {
   echo
   echo "🚀 Déploiement du site en mode production 🚀"
@@ -69,6 +75,8 @@ if [ $# -ge 1 ]; then
     staging
   elif [ $1 == "install" ]; then
     install
+  elif [ $1 == "favicon" ]; then
+    favicon
   fi
 else
   help

static/fonts/source-sans-pro/LICENSE.md

@@ -1,93 +0,0 @@
-Copyright 2010-2018 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe in the United States and/or other countries.
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-
-This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

static/fonts/source-sans-pro/README.md

@@ -1,18 +0,0 @@
-# Source Sans Pro
-
-[Source Sans Pro](http://adobe-fonts.github.io/source-sans-pro/)
-is a set of OpenType fonts that have been designed to work well
-in user interface (UI) environments.
-
-## Open source files
-
-The fonts' source files and build instructions are available in the [repository's `master` branch](https://github.com/adobe-fonts/source-sans-pro/tree/master).
-
-## Getting involved
-
-[Open an issue](https://github.com/adobe-fonts/source-sans-pro/issues) or send a suggestion to Source Sans' designer [Paul D. Hunt](mailto:opensourcefonts@adobe.com?subject=[GitHub]%20Source%20Sans%20Pro), for consideration.
-
-## Releases
-
-* [Latest release](../../releases/latest)
-* [All releases](../../releases)