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
2020-11-25 18:00:03 +01:00 · 2020-11-25 18:00:03 +01:00 · f2a78d7375
parent 1d59996608
commit f2a78d7375
157 changed files with 530 additions and 3745 deletions
--- a/assets/blason.xcf
+++ b/assets/blason.xcf
--- a/assets/fonts/source-sans-pro.css
+++ b/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');
-}
--- a/assets/styles/fonts.sass
+++ b/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
--- a/assets/styles/header.sass
+++ b/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
--- a/assets/styles/html.sass
+++ b/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
--- a/assets/styles/main.sass
+++ b/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"

-img
-  display: block
+body
+  color: $color-primary
+  background-color: $color-secondary

-  &.round
-    border-radius: 100%
-
-.maire
-  padding-bottom: 3rem
+.md p
  img
+    margin: 3rem auto
+  &:first-child img
+    margin: 0 auto 3rem
+  &:last-child img
+    margin: 3rem auto 0
+  &:first-child:last-child 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
-        font-weight: bold
+        text-transform: inherit

      p
-        font-size: .8rem
+        margin-top: 0

-        &:last-child
-          margin-bottom: 0
+      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
--- a/assets/styles/posts.sass
+++ b/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
--- a/assets/styles/print.sass
+++ b/assets/styles/print.sass
@ -1,84 +1,80 @@
 /* Print */

@media print
-*
-  background: transparent !important
-  box-shadow: none !important
-  text-shadow: none !important
+  *
+    background: transparent !important
+    box-shadow: none !important
+    text-shadow: none !important

-body
-  width: auto
-  margin: auto
-  font-family: serif
-  font-size: 12pt
+  body
+    width: auto
+    margin: auto
+    font-family: serif
+    font-size: 12pt

-nav,
-footer
-  display: none
+  p,
+  .p-like,
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  h4,
+  .h4-like,
+  h5,
+  .h5-like,
+  h6,
+  .h6-like,
+  blockquote,
+  ul,
+  ol
+    color: #000
+    margin: auto

-p,
-.p-like,
-h1,
-.h1-like,
-h2,
-.h2-like,
-h3,
-.h3-like,
-h4,
-.h4-like,
-h5,
-.h5-like,
-h6,
-.h6-like,
-blockquote,
-ul,
-ol
-  color: #000
-  margin: auto
+  img
+    max-width: 100% !important

-img
- max-width: 100% !important
+  .print
+    display: block

-.print
-  display: block
+  .no-print
+    display: none

-.no-print
-  display: none
+  p,
+  .p-like,
+  blockquote
+    orphans: 3
+    widows: 3

-p,
-.p-like,
-blockquote
-  orphans: 3
-  widows: 3
+  blockquote,
+  ul,
+  ol,
+  img
+    page-break-inside: avoid

-blockquote,
-ul,
-ol,
-img
-  page-break-inside: avoid
+  h1,
+  .h1-like
+    page-break-before: always

-h1,
-.h1-like
-  page-break-before: always
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  caption
+    page-break-after: avoid

-h1,
-.h1-like,
-h2,
-.h2-like,
-h3,
-.h3-like,
-caption
-  page-break-after: avoid
+  a
+    color: #000

-a
-  color: #000
+  a[href^="http"]:not([href*="cremeaux.fr"]):after
+    content: " (" attr(href) ")"

-a[href^="http"]:not([href*="pikselkraft.com"]):after
-  content: " (" attr(href) ")"
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after
+    content: ""

-a[href^="javascript:"]::after,
-a[href^="#"]::after
-  content: ""
-
-abbr[title]:after
-  content: " (" attr(title) ")"
+  abbr[title]:after
+    content: " (" attr(title) ")"
--- a/assets/styles/reset.css
+++ b/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,
--- a/config/production/config.yml
+++ b/config/production/config.yml
@ -1 +1,2 @@
 baseURL: https://cremeaux.fr/
+enableRobotsTXT: true
--- a/config/staging/config.yml
+++ b/config/staging/config.yml
@ -1 +1,2 @@
 baseURL: https://staging.cremeaux.fr/
+enableRobotsTXT: true
--- a/content/actualites/2020_10_24-LAND_ART.md
+++ b/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.
--- a/content/actualites/2020_11_03-déchèterie_rouvre_ses_portes/index.md
+++ b/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 :
- 𝗠𝗮𝘀𝗾𝘂𝗲 𝗼𝗯𝗹𝗶𝗴𝗮𝘁𝗼𝗶𝗿𝗲
- Pas de prêt de matériel : 𝘃𝗼𝘂𝘀 𝗱𝗲𝘃𝗲𝘇 𝗽𝗿𝗲́𝘃𝗼𝗶𝗿 𝗱𝗲 𝗾𝘂𝗼𝗶 𝗱𝗲́𝗰𝗵𝗮𝗿𝗴𝗲𝗿 𝗲𝘁 𝗻𝗲𝘁𝘁𝗼𝘆𝗲𝗿 𝗹𝗲𝘀 𝗲𝗺𝗽𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁𝘀 avant votre départ (pelles, balais, etc)
- 𝗣𝗮𝘀 𝗱’𝗮𝗶𝗱𝗲 𝗮𝘂 𝗱𝗲́𝗰𝗵𝗮𝗿𝗴𝗲𝗺𝗲𝗻𝘁 par les agents de la déchèterie
+- **Masque obligatoire**
+- 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)
+- **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.
--- a/content/actualites/roman-kraft-_Zua2hyvTBk-unsplash.jpg
+++ b/content/actualites/roman-kraft-_Zua2hyvTBk-unsplash.jpg
--- a/content/actualites/test-typo.md
+++ b/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 >}}
--- a/content/associations/_index.md
+++ b/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.
--- a/content/associations/clay-banks-LjqARJaJotc-unsplash.jpg
+++ b/content/associations/clay-banks-LjqARJaJotc-unsplash.jpg
--- a/content/cadredevie/_index.md
+++ b/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.
--- a/content/cadredevie/enseignement.md
+++ b/content/cadredevie/enseignement.md
@ -1,10 +0,0 @@
---
-title: Enseignement
-draft: true
-menu:
-  main:
-    parent: cadre
-    name: Enseignement
-    weight: 30
-    pre: vert
---
--- a/content/cadredevie/histoireetculture.md
+++ b/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
---
--- a/content/cadredevie/johann-siemens-EPy0gBJzzZU-unsplash.jpg
+++ b/content/cadredevie/johann-siemens-EPy0gBJzzZU-unsplash.jpg
--- a/content/cadredevie/leterritoire.md
+++ b/content/cadredevie/leterritoire.md
@ -1,10 +0,0 @@
---
-title: Le territoire
-draft: true
-menu:
-  main:
-    parent: cadre
-    name: Le territoire
-    weight: 10
-    pre: vert
---
--- a/content/cadredevie/santeetsoins.md
+++ b/content/cadredevie/santeetsoins.md
@ -1,10 +0,0 @@
---
-title: Accueil
-draft: true
-menu:
-  main:
-    parent: cadre
-    name: Santé et soins
-    weight: 20
-    pre: vert
---
--- a/content/economie/_index.md
+++ b/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.

--- a/content/economie/toa-heftiba-W6sqUYlJRiw-unsplash.jpg
+++ b/content/economie/toa-heftiba-W6sqUYlJRiw-unsplash.jpg
--- a/content/viemunicipale/commissions/patrick-tomasso-QMDap1TAu0g-unsplash.jpg
+++ b/content/viemunicipale/commissions/patrick-tomasso-QMDap1TAu0g-unsplash.jpg
--- a/content/viemunicipale/dylan-gillis-KdeqA3aTnBY-unsplash.jpg
+++ b/content/viemunicipale/dylan-gillis-KdeqA3aTnBY-unsplash.jpg
--- a/content/viemunicipale/leconseilmunicipal/index.md
+++ b/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
 ---

--- a/content/viemunicipale/leconseilmunicipal/jonas-jacobsson-2xaF4TbjXT0-unsplash.jpg
+++ b/content/viemunicipale/leconseilmunicipal/jonas-jacobsson-2xaF4TbjXT0-unsplash.jpg
--- a/content/viemunicipale/leconseilmunicipal/anthony-choren-lYzap0eubDY-unsplash.jpg
+++ b/content/viemunicipale/leconseilmunicipal/anthony-choren-lYzap0eubDY-unsplash.jpg
--- a/content/viemunicipale/lemotdumaire/index.md
+++ b/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
-à 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.
+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**
--- a/content/viemunicipale/lemotdumaire/mairie.jpg
+++ b/content/viemunicipale/lemotdumaire/mairie.jpg
--- a/crea/maquette-site-cremeaux-sous
+++ b/crea/maquette-site-cremeaux-sous
--- a/crea/maquette-site-cremeaux.jpg
+++ b/crea/maquette-site-cremeaux.jpg
--- a/layouts/actualites/list.html
+++ b/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>
-        {{ end }}
-        {{ end }}
-      </ul>
+      {{ range .Pages }}
+        {{ partial "article-preview.html" . }}
+      {{ end }}
    </div>
  </div>
 {{ end }}
--- a/layouts/actualites/single.html
+++ b/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 }}
--- a/layouts/home.html
+++ b/layouts/home.html
@ -8,46 +8,15 @@
        {{ $first := index (first 1 $lastnews) 0 }}
        {{ $others := after 1 $lastnews }}
        {{ with $first }}
-        <div class="post last">
-          <div class="picture">
-            {{ $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>
+          {{ .Scratch.Set "big" true }}
+          {{ partial "article-preview.html" . }}
        {{ end }}
        {{ range $others }}
-        <div class="post ">
-          <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>
+          {{ partial "article-preview.html" . }}
        {{ end }}
-        <a href="/actualites">Voir toutes les actualités</a>
+        <p>
+          <a href="/actualites">Voir toutes les actualités</a>
+        </p>
      </div>
      <div class="opening">
        {{ .Content }}
--- a/layouts/partials/article-preview.html
+++ b/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>
--- a/layouts/partials/footer.html
+++ b/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>