feat: Ajout des sections

.gitignore

@@ -1,2 +1,3 @@
 resources
 public
+node_modules

assets/fonts/source-sans-pro.css

@@ -0,0 +1,131 @@
+@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/header.sass

@@ -1,53 +1,28 @@
-.header
+.container-header
-  background-color: white
+  box-shadow: 0 3px 7px 0 rgba(0,0,0,0.1)
-  margin-bottom: 90px
+  background: white
 
-  .container
+  .navbar-main
-    display: flex
+    min-height: 80px
-    justify-content: space-between
-    align-items: end
-    height: 100%
-    position: relative
-    padding-top: 1rem
-    border-bottom: 1px $gris dashed
 
-    &::after
+  .navbar-submenu
-      content: ""
+    border-top: 1px solid #e5e9eb
-      border-top: 1px $gris dashed
+    justify-content: center
-      height: 1px
-      bottom: -40px
-      width: 100%
-      position: absolute
 
-  .title
+    .btn
-    color: $gris
+      border-radius: 0
-    text-align: center
-    text-decoration: none
 
-    h1
+      &:first-child
-      font-size: 4rem
+        border-left-width: 0
-      font-family: subscriber
-      word-wrap: break-word
-      padding: 0
-      margin: 0
 
-    &::before
+.rouge .navbar-submenu .btn-link
-      background: url(/Blason_ville_Cremeaux_42.svg)
+  border-left-color: $rouge
-      background-size: contain
-      background-repeat: no-repeat
-      background-position: center
-      width: 100%
-      height: 70px
-      display: block
 
+.vert .navbar-submenu .btn-link
+  border-left-color: $vert
 
-.home .header
+.jaune .navbar-submenu .btn-link
-  margin-bottom: 58px
+  border-left-color: $jaune
 
-@media screen and (min-width: 800px)
+.bleu .navbar-submenu .btn-link
-  .home .title::before
+  border-left-color: $bleu
-    content: ""
-
-@media screen and (min-width: 800px)
-  .header button
-    display: none

assets/styles/header2.sass

@@ -0,0 +1,59 @@
+.container-header
+  border-bottom: 1px solid #e5e9eb
+
+  .navbar
+    min-height: 79px
+
+.header
+  background-color: white
+  margin-bottom: 90px
+
+  .container
+    display: flex
+    justify-content: space-between
+    align-items: end
+    height: 100%
+    position: relative
+    padding-top: 1rem
+    border-bottom: 1px $gris dashed
+
+    &::after
+      content: ""
+      border-top: 1px $gris dashed
+      height: 1px
+      bottom: -40px
+      width: 100%
+      position: absolute
+
+  .title
+    color: $gris
+    text-align: center
+    text-decoration: none
+
+    h1
+      font-size: 4rem
+      font-family: subscriber
+      word-wrap: break-word
+      padding: 0
+      margin: 0
+
+    &::before
+      background: url(/Blason_ville_Cremeaux_42.svg)
+      background-size: contain
+      background-repeat: no-repeat
+      background-position: center
+      width: 100%
+      height: 70px
+      display: block
+
+
+.home .header
+  margin-bottom: 58px
+
+@media screen and (min-width: 800px)
+  .home .title::before
+    content: ""
+
+@media screen and (min-width: 800px)
+  .header button
+    display: none

assets/styles/index.sass

@@ -0,0 +1,9 @@
+.hero-image
+  background-position: center
+  background-size: cover
+  color: white
+
+.hero h2
+  font-size: 3rem
+  line-height: 3rem
+  font-weight: 400

assets/styles/main.sass

@@ -1,296 +1,122 @@
 @import "./variables"
-@import "./reset"
+// @import "./reset"
-@import "./html"
+// @import "./html"
+// @import "./menu"
+@import "./spectre.css/spectre"
+// @import "./header"
+@import "../fonts/source-sans-pro"
 @import "./header"
-@import "./menu"
+@import "./index"
 
-@font-face
+/* Make images easier to work with */
- font-family: "subscriber"
+img
- src: url("/fonts/subscriber.woff") format("woff")
+  max-width: 100%
+  display: block
+  &.round
+    border-radius: 100%
 
-h1, h2
+.maire
-  font-family: subscriber
+  img
+    margin: 2rem auto
 
-h2
+.person
-  text-transform: uppercase
+  text-align: center
+  width: 250px
+  margin: 0 auto 2rem
+
+body
+  font-family: 'Source Sans Pro', sans-serif
+  background-color: #f7f4f1
+
+.card
+  border: 0
+  box-shadow: 0 .25rem 1rem rgba(48,55,66,.15)
+
+.hero.hero-lg
+  padding: 12rem 0
+
+h1
+  font-size: 3rem
+  font-weight: 500
+  line-height: 1
   text-align: center
 
-html, body
+.cover
-  min-height: 100%
+  width: 100%
-  background-color: white
+  height: 40vh
-  padding: 0
+  object-fit: cover
-  margin: 0
+  z-index: 2
+  position: relative
 
-.container
+.contenu
-  width: $content-width
+  background: white
-  margin: 0 auto
+  margin: 2rem auto
+  padding: 2rem
+  z-index: 3
+  position: relative
 
-@media screen and (max-width: 800px)
+  &.contenu-image
-  .container
+    margin-top: -4rem
-    width: inherit
 
-.jaune
+.btn.jaune
-  h2
+  color: $jaune
-    color: $jaune
+  &:hover, &.active, &.focus
-.rouge
+    color: darken($jaune, 10%)
-  h2
+  &.btn-primary
-    color: $rouge
+    background-color: $jaune
-.vert
+    border-color: $jaune
-  h2
+    color: black
-    color: $vert
+    &:hover, &.active, &.focus
-.bleu
+      background-color: darken($jaune, 10%)
-  h2
+      border-color: $jaune
-    color: $bleu
+.btn.rouge
-
+  color: $rouge
-@media screen and (max-width: 800px)
+  &:hover, &.active, &.focus
-  .header .title
+    color: darken($rouge, 10%)
-    z-index: 20000
+  &.btn-primary
-    display: block
+    background-color: $rouge
-    top: 1rem
+    border-color: $rouge
-    position: absolute
+    color: white
-    left: 0
+    &:hover, &.active, &.focus
-    right: 0
+      background-color: darken($rouge, 10%)
-    background: white
+      border-color: $rouge
-
+.btn.vert
-  .nav
+  color: $vert
-    // display: none
+  &:hover
-    display: flex
+    color: darken($vert, 10%)
-    position: absolute
+  &:active
-    top: 100px
+    color: darken($vert, 10%)
-    bottom: 0
+  &:focus
-    left: 0
+    color: darken($vert, 10%)
-    right: 0
+  &.btn-primary
-    z-index: 1000
+    background-color: $vert
-    background-color: white
+    border-color: $vert
-    width: 100vw
+    color: white
-    height: calc(100vh - 100px)
+    &:hover, &.active, &.focus
-    justify-content: center
+      background-color: darken($vert, 10%)
-    align-items: center
+      border-color: $vert
-
+.btn.bleu
-    .menu
+  color: $bleu
-      margin: 0
+  &:hover
-      padding: 0
+  &.active
-      list-style: none
+  &.focus
-
+    color: darken($bleu, 10%)
-      > li
+  &.btn-primary
-        padding: .5rem 1rem
+    background-color: $bleu
-        text-align: center
+    border-color: $bleu
-
+    color: white
-        > a
+    &:hover, &.active, &.focus
-          margin: 0 auto
+      background-color: darken($bleu, 10%)
-          padding: .2rem
+      border-color: $bleu
-          color: red
-          border: 2px solid red
-          width: 200px
-          display: block
-
-        &.vert
-          a
-            color: $vert
-            border-color: $vert
-            background-color: scale-color($vert, $lightness: +50%)
-
-        &.jaune
-          a
-            color: $jaune
-            border-color: $jaune
-            background-color: scale-color($jaune, $lightness: +50%)
-
-        &.rouge
-          a
-            color: $rouge
-            border-color: $rouge
-            background-color: scale-color($rouge, $lightness: +50%)
-
-        &.bleu
-          a
-            color: $bleu
-            border-color: $bleu
-            background-color: scale-color($bleu, $lightness: +50%)
-
-    .sousmenu
-      padding: 0
-      li
-        display: inline
-        a
-          background-color: white!important
-
-  .header button
-    display: block
-
-@media screen and (min-width: 800px)
-  .nav
-    margin-bottom: 22px
-
-    ul
-      display: flex
-      margin: 0
-      padding: 0
-      list-style: none
-
-    ul.menu
-
-      .sousmenu
-        position: absolute
-        display: none
-        padding-top: 20px
-        top: calc(100% - 18px)
-        left: 0
-        right: 0
-        justify-content: space-around
-        background-color: white
-
-        &::before,
-        &::after
-          content: ""
-          border-top: 1px $gris dashed
-          height: 1px
-          width: 100%
-          position: absolute
-
-        &::after
-          bottom: -1px
-
-        &::before
-          top: 18px
-
-        a
-          border: 0
-          color: $gris!important
-
-      .sousmenu.active
-        display: flex
-
-
-      li
-        margin: .2rem
-
-        &:hover ul
-          display: flex
-          z-index: 20
-
-
-        &:last-child
-          margin-right: 0
-
-      a
-        padding: .5rem
-        border: 2px solid white
-        text-decoration: none
-        font-size: 1rem
-        color: white
-
-        &:hover
-          opacity: .8
-
-      .vert
-        a
-          color: $vert
-          border-color: $vert
-
-      .jaune
-        a
-          color: $jaune
-          border-color: $jaune
-
-      .rouge
-        a
-          color: $rouge
-          border-color: $rouge
-
-      .bleu
-        a
-          color: $bleu
-          border-color: $bleu
-
-      .active
-        a
-          background-color: white
-          border-style: dashed
-          border-color: white!important
-
-        &.jaune
-          a
-            color: $jaune
-            border-bottom-color: $jaune
-
-        &.rouge
-          a
-            color: $rouge
-            border-bottom-color: $rouge
-
-        &.vert
-          a
-            color: $vert
-            border-bottom-color: $vert
-
-        &.bleu
-          a
-            color: $bleu
-            border-bottom-color: $bleu
-
-#content
-  width: 800px
-  margin: 0 auto
-  margin-bottom: 2rem
 
 .footer
-  background-color: #222
+  margin: 2rem
-  color: white
 
-  h4
+  .card
-    text-align: center
+    margin: 0 2rem
 
-  .container
+    button
-    padding: 2rem 0
+      overflow-wrap: anywhere
-    display: flex
+      word-break: break-all
-
+      white-space: normal
-    > div
+      user-select: inherit
-      margin: 0 10px
-      padding: 10px
-      background-color: scale-color(#222, $lightness: +15%)
-
-    div:first-child
-      margin-left: 0
-
-    div:last-child
-      margin-right: 0
-
-    .title
-      height: 130px
-      display: flex
-      align-items: flex-end
-      justify-content: center
-
-.conseilmunicipal
-  display: flex
-  margin: 0 auto
-  padding: 0 10px 10px
-  list-style: none
-  flex-wrap: wrap
-  max-width: 1300px
-  justify-content: space-around
-
-  li
-    width: 250px
-    padding: 10px
-
-    figcaption
-      text-align: center
-
-      h3
-        margin: 10px 0
-        font-size: 1em
-
-      p
-        margin: 0
-        font-size: .8em
-        line-height: 1em
-
-img.round
-  border-radius: 100%
-
-img.paysage
-  width: 100%
-  height: 600px
-  object-fit: cover

assets/styles/spectre.css/spectre-icons.css

@@ -0,0 +1,597 @@
+/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */
+.icon {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: inherit;
+  font-style: normal;
+  height: 1em;
+  position: relative;
+  text-indent: -9999px;
+  vertical-align: middle;
+  width: 1em;
+}
+
+.icon::before,
+.icon::after {
+  content: "";
+  display: block;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.icon.icon-2x {
+  font-size: 1.6rem;
+}
+
+.icon.icon-3x {
+  font-size: 2.4rem;
+}
+
+.icon.icon-4x {
+  font-size: 3.2rem;
+}
+
+.accordion .icon,
+.btn .icon,
+.toast .icon,
+.menu .icon {
+  vertical-align: -10%;
+}
+
+.btn-lg .icon {
+  vertical-align: -15%;
+}
+
+.icon-arrow-down::before,
+.icon-arrow-left::before,
+.icon-arrow-right::before,
+.icon-arrow-up::before,
+.icon-downward::before,
+.icon-back::before,
+.icon-forward::before,
+.icon-upward::before {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  height: .65em;
+  width: .65em;
+}
+
+.icon-arrow-down::before {
+  transform: translate(-50%, -75%) rotate(225deg);
+}
+
+.icon-arrow-left::before {
+  transform: translate(-25%, -50%) rotate(-45deg);
+}
+
+.icon-arrow-right::before {
+  transform: translate(-75%, -50%) rotate(135deg);
+}
+
+.icon-arrow-up::before {
+  transform: translate(-50%, -25%) rotate(45deg);
+}
+
+.icon-back::after,
+.icon-forward::after {
+  background: currentColor;
+  height: .1rem;
+  width: .8em;
+}
+
+.icon-downward::after,
+.icon-upward::after {
+  background: currentColor;
+  height: .8em;
+  width: .1rem;
+}
+
+.icon-back::after {
+  left: 55%;
+}
+
+.icon-back::before {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.icon-downward::after {
+  top: 45%;
+}
+
+.icon-downward::before {
+  transform: translate(-50%, -50%) rotate(-135deg);
+}
+
+.icon-forward::after {
+  left: 45%;
+}
+
+.icon-forward::before {
+  transform: translate(-50%, -50%) rotate(135deg);
+}
+
+.icon-upward::after {
+  top: 55%;
+}
+
+.icon-upward::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.icon-caret::before {
+  border-left: .3em solid transparent;
+  border-right: .3em solid transparent;
+  border-top: .3em solid currentColor;
+  height: 0;
+  transform: translate(-50%, -25%);
+  width: 0;
+}
+
+.icon-menu::before {
+  background: currentColor;
+  box-shadow: 0 -.35em, 0 .35em;
+  height: .1rem;
+  width: 100%;
+}
+
+.icon-apps::before {
+  background: currentColor;
+  box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+  height: 3px;
+  width: 3px;
+}
+
+.icon-resize-horiz::before,
+.icon-resize-horiz::after,
+.icon-resize-vert::before,
+.icon-resize-vert::after {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  height: .45em;
+  width: .45em;
+}
+
+.icon-resize-horiz::before,
+.icon-resize-vert::before {
+  transform: translate(-50%, -90%) rotate(45deg);
+}
+
+.icon-resize-horiz::after,
+.icon-resize-vert::after {
+  transform: translate(-50%, -10%) rotate(225deg);
+}
+
+.icon-resize-horiz::before {
+  transform: translate(-90%, -50%) rotate(-45deg);
+}
+
+.icon-resize-horiz::after {
+  transform: translate(-10%, -50%) rotate(135deg);
+}
+
+.icon-more-horiz::before,
+.icon-more-vert::before {
+  background: currentColor;
+  border-radius: 50%;
+  box-shadow: -.4em 0, .4em 0;
+  height: 3px;
+  width: 3px;
+}
+
+.icon-more-vert::before {
+  box-shadow: 0 -.4em, 0 .4em;
+}
+
+.icon-plus::before,
+.icon-minus::before,
+.icon-cross::before {
+  background: currentColor;
+  height: .1rem;
+  width: 100%;
+}
+
+.icon-plus::after,
+.icon-cross::after {
+  background: currentColor;
+  height: 100%;
+  width: .1rem;
+}
+
+.icon-cross::before {
+  width: 100%;
+}
+
+.icon-cross::after {
+  height: 100%;
+}
+
+.icon-cross::before,
+.icon-cross::after {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.icon-check::before {
+  border: .1rem solid currentColor;
+  border-right: 0;
+  border-top: 0;
+  height: .5em;
+  transform: translate(-50%, -75%) rotate(-45deg); 
+  width: .9em;
+}
+
+.icon-stop {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+}
+
+.icon-stop::before {
+  background: currentColor;
+  height: .1rem;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 1em;
+}
+
+.icon-shutdown {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+
+.icon-shutdown::before {
+  background: currentColor;
+  content: "";
+  height: .5em;
+  top: .1em;
+  width: .1rem;
+}
+
+.icon-refresh::before {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+  border-right-color: transparent;
+  height: 1em;
+  width: 1em;
+}
+
+.icon-refresh::after {
+  border: .2em solid currentColor;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  height: 0;
+  left: 80%;
+  top: 20%;
+  width: 0;
+}
+
+.icon-search::before {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+  height: .75em;
+  left: 5%;
+  top: 5%;
+  transform: translate(0, 0) rotate(45deg);
+  width: .75em;
+}
+
+.icon-search::after {
+  background: currentColor;
+  height: .1rem;
+  left: 80%;
+  top: 80%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: .4em;
+}
+
+.icon-edit::before {
+  border: .1rem solid currentColor;
+  height: .4em;
+  transform: translate(-40%, -60%) rotate(-45deg);
+  width: .85em;
+}
+
+.icon-edit::after {
+  border: .15em solid currentColor;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  height: 0;
+  left: 5%;
+  top: 95%;
+  transform: translate(0, -100%);
+  width: 0;
+}
+
+.icon-delete::before {
+  border: .1rem solid currentColor;
+  border-bottom-left-radius: .1rem;
+  border-bottom-right-radius: .1rem;
+  border-top: 0;
+  height: .75em;
+  top: 60%;
+  width: .75em;
+}
+
+.icon-delete::after {
+  background: currentColor;
+  box-shadow: -.25em .2em, .25em .2em;
+  height: .1rem;
+  top: .05rem;
+  width: .5em;
+}
+
+.icon-share {
+  border: .1rem solid currentColor;
+  border-radius: .1rem;
+  border-right: 0;
+  border-top: 0;
+}
+
+.icon-share::before {
+  border: .1rem solid currentColor;
+  border-left: 0;
+  border-top: 0;
+  height: .4em;
+  left: 100%;
+  top: .25em;
+  transform: translate(-125%, -50%) rotate(-45deg);
+  width: .4em;
+}
+
+.icon-share::after {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-radius: 75% 0;
+  border-right: 0;
+  height: .5em;
+  width: .6em;
+}
+
+.icon-flag::before {
+  background: currentColor;
+  height: 1em;
+  left: 15%;
+  width: .1rem;
+}
+
+.icon-flag::after {
+  border: .1rem solid currentColor;
+  border-bottom-right-radius: .1rem;
+  border-left: 0;
+  border-top-right-radius: .1rem;
+  height: .65em;
+  left: 60%;
+  top: 35%;
+  width: .8em;
+}
+
+.icon-bookmark::before {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-top-left-radius: .1rem;
+  border-top-right-radius: .1rem;
+  height: .9em;
+  width: .8em;
+}
+
+.icon-bookmark::after {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-left: 0;
+  border-radius: .1rem;
+  height: .5em;
+  transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+  width: .5em;
+}
+
+.icon-download,
+.icon-upload {
+  border-bottom: .1rem solid currentColor;
+}
+
+.icon-download::before,
+.icon-upload::before {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  height: .5em;
+  transform: translate(-50%, -60%) rotate(-135deg); 
+  width: .5em;
+}
+
+.icon-download::after,
+.icon-upload::after {
+  background: currentColor;
+  height: .6em;
+  top: 40%;
+  width: .1rem;
+}
+
+.icon-upload::before {
+  transform: translate(-50%, -60%) rotate(45deg);
+}
+
+.icon-upload::after {
+  top: 50%;
+}
+
+.icon-copy::before {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-radius: .1rem;
+  border-right: 0;
+  height: .8em;
+  left: 40%;
+  top: 35%;
+  width: .8em;
+}
+
+.icon-copy::after {
+  border: .1rem solid currentColor;
+  border-radius: .1rem;
+  height: .8em;
+  left: 60%;
+  top: 60%;
+  width: .8em;
+}
+
+.icon-time {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+}
+
+.icon-time::before {
+  background: currentColor;
+  height: .4em;
+  transform: translate(-50%, -75%);
+  width: .1rem;
+}
+
+.icon-time::after {
+  background: currentColor;
+  height: .3em;
+  transform: translate(-50%, -75%) rotate(90deg);
+  transform-origin: 50% 90%;
+  width: .1rem;
+}
+
+.icon-mail::before {
+  border: .1rem solid currentColor;
+  border-radius: .1rem;
+  height: .8em;
+  width: 1em;
+}
+
+.icon-mail::after {
+  border: .1rem solid currentColor;
+  border-right: 0;
+  border-top: 0;
+  height: .5em;
+  transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
+  width: .5em;
+}
+
+.icon-people::before {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+  height: .45em;
+  top: 25%;
+  width: .45em;
+}
+
+.icon-people::after {
+  border: .1rem solid currentColor;
+  border-radius: 50% 50% 0 0;
+  height: .4em;
+  top: 75%;
+  width: .9em;
+}
+
+.icon-message {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-radius: .1rem;
+  border-right: 0;
+}
+
+.icon-message::before {
+  border: .1rem solid currentColor;
+  border-bottom-right-radius: .1rem;
+  border-left: 0;
+  border-top: 0;
+  height: .8em;
+  left: 65%;
+  top: 40%;
+  width: .7em;
+}
+
+.icon-message::after {
+  background: currentColor;
+  border-radius: .1rem;
+  height: .3em;
+  left: 10%;
+  top: 100%;
+  transform: translate(0, -90%) rotate(45deg);
+  width: .1rem;
+}
+
+.icon-photo {
+  border: .1rem solid currentColor;
+  border-radius: .1rem;
+}
+
+.icon-photo::before {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+  height: .25em;
+  left: 35%;
+  top: 35%;
+  width: .25em;
+}
+
+.icon-photo::after {
+  border: .1rem solid currentColor;
+  border-bottom: 0;
+  border-left: 0;
+  height: .5em;
+  left: 60%;
+  transform: translate(-50%, 25%) rotate(-45deg);
+  width: .5em;
+}
+
+.icon-link::before,
+.icon-link::after {
+  border: .1rem solid currentColor;
+  border-radius: 5em 0 0 5em;
+  border-right: 0;
+  height: .5em;
+  width: .75em;
+}
+
+.icon-link::before {
+  transform: translate(-70%, -45%) rotate(-45deg);
+}
+
+.icon-link::after {
+  transform: translate(-30%, -55%) rotate(135deg);
+}
+
+.icon-location::before {
+  border: .1rem solid currentColor;
+  border-radius: 50% 50% 50% 0;
+  height: .8em;
+  transform: translate(-50%, -60%) rotate(-45deg);
+  width: .8em;
+}
+
+.icon-location::after {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+  height: .2em;
+  transform: translate(-50%, -80%);
+  width: .2em;
+}
+
+.icon-emoji {
+  border: .1rem solid currentColor;
+  border-radius: 50%;
+}
+
+.icon-emoji::before {
+  border-radius: 50%;
+  box-shadow: -.17em -.1em, .17em -.1em;
+  height: .15em;
+  width: .15em;
+}
+
+.icon-emoji::after {
+  border: .1rem solid currentColor;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  border-right-color: transparent;
+  height: .5em;
+  transform: translate(-50%, -40%) rotate(-135deg);
+  width: .5em;
+}

assets/styles/v1.sass

@@ -0,0 +1,291 @@
+
+@font-face
+ font-family: "subscriber"
+ src: url("/fonts/subscriber.woff") format("woff")
+
+h1, h2
+  font-family: subscriber
+
+h2
+  text-transform: uppercase
+  text-align: center
+
+html, body
+  min-height: 100%
+  background-color: white
+  padding: 0
+  margin: 0
+
+.container
+  width: $content-width
+  margin: 0 auto
+
+@media screen and (max-width: 800px)
+  .container
+    width: inherit
+
+.jaune
+  h2
+    color: $jaune
+.rouge
+  h2
+    color: $rouge
+.vert
+  h2
+    color: $vert
+.bleu
+  h2
+    color: $bleu
+
+@media screen and (max-width: 800px)
+  .header .title
+    z-index: 20000
+    display: block
+    top: 1rem
+    position: absolute
+    left: 0
+    right: 0
+    background: white
+
+  .nav
+    // display: none
+    display: flex
+    position: absolute
+    top: 100px
+    bottom: 0
+    left: 0
+    right: 0
+    z-index: 1000
+    background-color: white
+    width: 100vw
+    height: calc(100vh - 100px)
+    justify-content: center
+    align-items: center
+
+    .menu
+      margin: 0
+      padding: 0
+      list-style: none
+
+      > li
+        padding: .5rem 1rem
+        text-align: center
+
+        > a
+          margin: 0 auto
+          padding: .2rem
+          color: red
+          border: 2px solid red
+          width: 200px
+          display: block
+
+        &.vert
+          a
+            color: $vert
+            border-color: $vert
+            background-color: scale-color($vert, $lightness: +50%)
+
+        &.jaune
+          a
+            color: $jaune
+            border-color: $jaune
+            background-color: scale-color($jaune, $lightness: +50%)
+
+        &.rouge
+          a
+            color: $rouge
+            border-color: $rouge
+            background-color: scale-color($rouge, $lightness: +50%)
+
+        &.bleu
+          a
+            color: $bleu
+            border-color: $bleu
+            background-color: scale-color($bleu, $lightness: +50%)
+
+    .sousmenu
+      padding: 0
+      li
+        display: inline
+        a
+          background-color: white!important
+
+  .header button
+    display: block
+
+@media screen and (min-width: 800px)
+  .nav
+    margin-bottom: 22px
+
+    ul
+      display: flex
+      margin: 0
+      padding: 0
+      list-style: none
+
+    ul.menu
+
+      .sousmenu
+        position: absolute
+        display: none
+        padding-top: 20px
+        top: calc(100% - 18px)
+        left: 0
+        right: 0
+        justify-content: space-around
+        background-color: white
+
+        &::before,
+        &::after
+          content: ""
+          border-top: 1px $gris dashed
+          height: 1px
+          width: 100%
+          position: absolute
+
+        &::after
+          bottom: -1px
+
+        &::before
+          top: 18px
+
+        a
+          border: 0
+          color: $gris!important
+
+      .sousmenu.active
+        display: flex
+
+
+      li
+        margin: .2rem
+
+        &:hover ul
+          display: flex
+          z-index: 20
+
+
+        &:last-child
+          margin-right: 0
+
+      a
+        padding: .5rem
+        border: 2px solid white
+        text-decoration: none
+        font-size: 1rem
+        color: white
+
+        &:hover
+          opacity: .8
+
+      .vert
+        a
+          color: $vert
+          border-color: $vert
+
+      .jaune
+        a
+          color: $jaune
+          border-color: $jaune
+
+      .rouge
+        a
+          color: $rouge
+          border-color: $rouge
+
+      .bleu
+        a
+          color: $bleu
+          border-color: $bleu
+
+      .active
+        a
+          background-color: white
+          border-style: dashed
+          border-color: white!important
+
+        &.jaune
+          a
+            color: $jaune
+            border-bottom-color: $jaune
+
+        &.rouge
+          a
+            color: $rouge
+            border-bottom-color: $rouge
+
+        &.vert
+          a
+            color: $vert
+            border-bottom-color: $vert
+
+        &.bleu
+          a
+            color: $bleu
+            border-bottom-color: $bleu
+
+#content
+  width: 800px
+  margin: 0 auto
+  margin-bottom: 2rem
+
+.footer
+  background-color: #222
+  color: white
+
+  h4
+    text-align: center
+
+  .container
+    padding: 2rem 0
+    display: flex
+
+    > div
+      margin: 0 10px
+      padding: 10px
+      background-color: scale-color(#222, $lightness: +15%)
+
+    div:first-child
+      margin-left: 0
+
+    div:last-child
+      margin-right: 0
+
+    .title
+      height: 130px
+      display: flex
+      align-items: flex-end
+      justify-content: center
+
+.conseilmunicipal
+  display: flex
+  margin: 0 auto
+  padding: 0 10px 10px
+  list-style: none
+  flex-wrap: wrap
+  max-width: 1300px
+  justify-content: space-around
+
+  li
+    width: 250px
+    padding: 10px
+
+    figcaption
+      text-align: center
+
+      h3
+        margin: 10px 0
+        font-size: 1em
+
+      p
+        margin: 0
+        font-size: .8em
+        line-height: 1em
+
+img.round
+  border-radius: 100%
+
+img.paysage
+  width: 100%
+  height: 600px
+  object-fit: cover

content/_index.html

@@ -1,2 +0,0 @@
----
----

content/_index.md

@@ -1 +1,5 @@
-Site en construction
+---
+title: Actualités
+---
+
+Nous venons de mettre le site internet de Crémeaux en ligne. Comme vous pouvez le voir il y a encore peu d'information. Nous compléterons au fur et à mesure de l'année. Il y aura par la suite une section spécifique sur l'économie, les associations et le cadre de vie de Crémeaux.

content/associations/_index.md

@@ -1,5 +1,6 @@
 ---
-title: Le conseil municipal
+title: Les associations
+draft: true
 menu:
   main:
     identifier: associations
@@ -8,8 +9,6 @@ menu:
     pre: bleu
 ---
 
-## Les Associations
-
 ![Les associations](/associations.png)
 
 La page n'est pas encore réalisé, nous voulons ajouter ici l'ensemble des informations des différentes associations de Crémeaux.

content/cadredevie/_index.md

@@ -1,5 +1,6 @@
 ---
-title: Le mot du Maire
+title: Cadre de vie
+draft: true
 menu:
   main:
     identifier: cadre

content/cadredevie/enseignement.md

@@ -1,5 +1,6 @@
 ---
-title: Accueil
+title: Enseignement
+draft: true
 menu:
   main:
     parent: cadre
@@ -7,5 +8,3 @@ menu:
     weight: 30
     pre: vert
 ---
-
-## Enseignement

content/cadredevie/histoireetculture.md

@@ -1,5 +1,6 @@
 ---
-title: Accueil
+title: Histoire et Culture
+draft: true
 menu:
   main:
     parent: cadre
@@ -7,5 +8,3 @@ menu:
     weight: 40
     pre: vert
 ---
-
-## Histoire et Culture

content/cadredevie/leterritoire.md

@@ -1,5 +1,6 @@
 ---
-title: Accueil
+title: Le territoire
+draft: true
 menu:
   main:
     parent: cadre
@@ -7,5 +8,3 @@ menu:
     weight: 10
     pre: vert
 ---
-
-## Le territoire

content/cadredevie/santeetsoins.md

@@ -1,5 +1,6 @@
 ---
 title: Accueil
+draft: true
 menu:
   main:
     parent: cadre
@@ -7,5 +8,3 @@ menu:
     weight: 20
     pre: vert
 ---
-
-## Santé et soins

content/economie/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Le conseil municipal
+draft: true
 menu:
   main:
     identifier: economie
@@ -8,8 +9,6 @@ menu:
     pre: jaune
 ---
 
-## Économie
-
 ![](/market.svg)
 
 Liste des commerces et entreprises avec des catégories

content/viemunicipale/_index.md

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

content/viemunicipale/leconseilmunicipal/_index.md

@@ -1,12 +0,0 @@
----
-title: Accueil
-menu:
-  main:
-    parent: municipale
-    name: Le Conseil Municipal
-    weight: 20
-    pre: rouge
-layout: conseil
----
-
-## Le Conseil Municipal

content/viemunicipale/leconseilmunicipal/index.md

@@ -0,0 +1,13 @@
+---
+title: Le Conseil Municipal
+menu:
+  main:
+    parent: municipale
+    name: Le Conseil Municipal
+    weight: 20
+    pre: rouge
+layout: conseil
+---
+
+Le conseil municipal règle par ses délibérations les affaires de la commune.
+Le nombre de conseillers municipaux, fixé par la loi, est fonction de [la population de la commune](https://www.collectivites-locales.gouv.fr/conseil-municipal#compositioncm). Dans notre cas nous avons le droit à 15 conseillers composé : du maire, 4 adjoints et de 10 conseillers municipaux.

content/viemunicipale/lemotdumaire/index.md

@@ -1,5 +1,6 @@
 ---
-title: Accueil
+title: Le mot du Maire
+image: homepage.jpg
 menu:
   main:
     parent: municipale
@@ -10,8 +11,6 @@ menu:
 
 {{< maire >}}
 
-## Le mot du 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

content/viemunicipale/locations.md

@@ -1,11 +0,0 @@
----
-title: Accueil
-menu:
-  main:
-    parent: municipale
-    name: Location
-    weight: 60
-    pre: rouge
----
-
-## Location

data/conseilmunicipal.yml

@@ -2,6 +2,7 @@
 conseilmunicipal:
   - prenom: Élodie
     nom: BOURG
+    fonction: Conseillère
     job: Technicienne contrôle qualité
     age: 29
     image: elodie_bourg.jpg
@@ -19,17 +20,19 @@ conseilmunicipal:
     image: thierry_clemencon.jpg
   - prenom: Simon
     nom: CONSTANS
+    fonction: Conseiller
     job: Informaticien
     age: 35
     image: simon_constans.jpg
   - prenom: Jean-Christophe
     nom: DUBOST
+    fonction: Conseiller
     job: Enseignant
     age: 50
     image: jeanchristophe_dubost.jpg
   - prenom: Sandra
     nom: GARRIVIER
-    fonction: Adjoint
+    fonction: Adjointe
     job: Chauffeur - livreur portage de repas
     age: 48
     image: sandra_garrivier.jpg
@@ -41,21 +44,25 @@ conseilmunicipal:
     image: laurent_loizzo.jpg
   - prenom: Aurélien
     nom: MAILLET-FEUGÈRE
+    fonction: Conseiller
     job: Agriculteur
     age: 38
     image: aurelien_mailletfeugere.jpg
   - prenom: Suzanne
     nom: MANISSOLLE
+    fonction: Conseillère
     job: Retraitée fonction publique territoriale
     age: 65
     image: suzanne_manissolle.jpg
   - prenom: Irène
     nom: MICHON
+    fonction: Conseillère
     job: Responsable d’exploitation informatique
     age: 48
     image: irene_michon.jpg
   - prenom: Patricia
     nom: SESSEGOLO
+    fonction: Conseillère
     job: Dessinatrice, styliste
     age: 53
     image: patricia_sessegolo.jpg
@@ -67,16 +74,19 @@ conseilmunicipal:
     image: didier_poncet.jpg
   - prenom: Stéphane
     nom: PRAS
+    fonction: Conseiller
     job: Agent de vérification
     age: 47
     image: stephane_pras.jpg
   - prenom: André
     nom: SANGLE
+    fonction: Conseiller
     job: Infirmier
     age: 30
     image: andre_sangle.jpg
   - prenom: Georges
     nom: TRAVARD
+    fonction: Conseiller
     job: Technicien RGRS (responsable de la gestion de la route et de la sécurité)
     age: 40
     image: georges_travard.jpg

layouts/_default/list.html

@@ -0,0 +1,11 @@
+{{ define "main" }}
+  {{ if .Params.Image }}
+    <img class="cover" src="{{ .Params.Image }}" alt="{{ .Title }}"/>
+  {{ end }}
+  <div class="container grid-lg contenu {{ if .Params.Image }}contenu-image{{end}}">
+    <h1>{{ .Title }}</h1>
+    <div class="container grid-sm">
+      {{ .Content }}
+    </div>
+  </div>
+{{ end }}

layouts/_default/single.html

@@ -0,0 +1,11 @@
+{{ define "main" }}
+  {{ if .Params.Image }}
+    <img class="cover" src="{{ .Params.Image }}" alt="{{ .Title }}"/>
+  {{ end }}
+  <div class="container grid-lg contenu {{ if .Params.Image }}contenu-image{{end}}">
+    <h1>{{ .Title }}</h1>
+    <div class="container grid-sm">
+      {{ .Content }}
+    </div>
+  </div>
+{{ end }}

layouts/index.html

@@ -1,5 +1,22 @@
 {{ define "all" }}
+
   {{ $image := .Resources.GetMatch "*" }}
   {{ $resized := $image.Fill "1400x600 Top"}}
-  <img class="paysage" alt="Vue sur Crémeaux" src="{{ $resized.RelPermalink }}" />
+<div class="hero hero-lg hero-image" style="background-image:linear-gradient(to bottom, #003f89, rgba(216,216,216,0)),url({{ $resized.RelPermalink }})">
+  <div class="hero-body">
+    <div class="container grid-xl">
+      <div class="columns">
+        <div class="column col-7">
+          <h2>Bienvenue sur le nouveau site de Crémeaux</h2>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container grid-lg contenu {{ if .Params.Image }}contenu-image{{end}}">
+  <h1>{{ .Title }}</h1>
+  <div class="container grid-sm">
+    {{ .Content }}
+  </div>
+</div>
 {{ end }}

layouts/partials/conseilmunicipal.html

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

layouts/partials/footer.html

@@ -1,27 +1,63 @@
+{{ $headless := .Site.GetPage "/viemunicipale" }}
 <footer class="footer">
-  <div class="container">
+  <div class="container grid-xl">
-    <div>
+    <div class="columns">
-      <div class="title">
+      <div class="column col-4">
-        <h4>Mairie</h4>
+        <div class="card">
+          <div class="card-image">
+            {{ $image := $headless.Resources.GetMatch "mairie.jpg" }}
+            {{ $resized := $image.Resize "500x" }}
+            <img src="{{ $resized.RelPermalink }}" class="img-responsive">
+          </div>
+          <div class="card-header">
+            <div class="card-title h5">Mairie</div>
+          </div>
+          <div class="card-body">
+            Ouverture : Lundi, mardi, jeudi et vendredi de 8h40 à 12h15, mercredi de 9h15 à 12h15.
+          </div>
+          <div class="card-footer">
+            <button class="btn btn-link vert">📞 04 77 62 50 67</button>
+            <button class="btn btn-link vert">📫 mairie@cremeaux.fr</button>
+          </div>
+        </div>
       </div>
-      <p>⏰ Lundi, mardi, jeudi et vendredi de 8h40 à 12h15, mercredi de 9h15 à 12h15.</p>
+      <div class="column col-4">
-      <p>📞 04 77 62 50 67</p>
+        <div class="card">
-      <p>📫 mairie@cremeaux.fr</p>
+          <div class="card-image">
-    </div>
+            {{ $image := $headless.Resources.GetMatch "bibliotheque.jpg" }}
-    <div>
+            {{ $resized := $image.Resize "500x" }}
-      <div class="title">
+            <img src="{{ $resized.RelPermalink }}" class="img-responsive">
-        <h4>Bibliothèque Municipale</h4>
+          </div>
+          <div class="card-header">
+            <div class="card-title h5">Bibliothèque Municipale</div>
+          </div>
+          <div class="card-body">
+            Ouverture : Mercredi de 16h40 à 18h40, vendredi et samedi de 10h à 12h.
+          </div>
+          <div class="card-footer">
+            <button class="btn btn-link vert">📞 04 77 62 82 66</button>
+            <button class="btn btn-link vert">📫 <span>bibliotheque</span><span>@cremeaux.fr</span></button>
+          </div>
+        </div>
       </div>
-      <p>⏰ Mercredi de 16h40 à 18h40, vendredi et samedi de 10h à 12h.</p>
+      <div class="column col-4">
-      <p>📞 04 77 62 82 66</p>
+        <div class="card">
-      <p>📫 biblio@cremeaux.fr</p>
+          <div class="card-image">
-    </div>
+            {{ $image := $headless.Resources.GetMatch "poste.jpg" }}
-    <div>
+            {{ $resized := $image.Resize "500x" }}
-      <div class="title">
+            <img src="{{ $resized.RelPermalink }}" class="img-responsive">
-        <h4>Agence Postale</h4>
+          </div>
+          <div class="card-header">
+            <div class="card-title h5">Agence Postale</div>
+          </div>
+          <div class="card-body">
+            Ouverture : Mardi, mercredi, jeudi, vendredi et samedi de 9h15 à 12h15.
+          </div>
+          <div class="card-footer">
+            <button class="btn btn-link vert">📞 04 77 62 56 49</button>
+          </div>
+        </div>
       </div>
-      <p>⏰ Mardi, mercredi, jeudi, vendredi et samedi de 9h15 à 12h15.</p>
-      <p>📞 04 77 62 56 49</p>
     </div>
   </div>
 </footer>

layouts/partials/header.html

@@ -1,29 +1,31 @@
-<header class="header">
+<div class="container-header">
-  <div class="container">
+  <div class="container grid-xl">
-    <a href="/" class="title">
+    <header class="navbar navbar-main">
-      <h1>Crémeaux</h1>
+      <section class="navbar-section">
-    </a>
+        <a href="/" class="">
-
+          <img src="logo.png" alt="Blason de Crémeaux" height="80" />
-    <nav class="nav">
+        </a>
-      {{ $currentPage := . }}
+      </section>
-      <ul class="menu">
+      <section class="navbar-center">
         {{ range .Site.Menus.main }}
-          <li class="{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}active{{ end }} {{ .Pre }}">
+          <a href="{{ .URL }}" class="m-2 btn btn-primary {{ .Identifier }} {{ .Pre }}">{{ .Name }}</a>
-          <a href="{{ .URL }}" class="{{ .Identifier }}">{{ .Name }}</a>
-          {{ if .HasChildren }}
-          <ul class="sousmenu {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}">
-              {{ range .Children }}
-              <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }} {{ .Pre }}">
-              <a href="{{ .URL }}">{{ .Name }}</a>
-              </li>
-              {{ end }}
-          </ul>
-          {{ end }}
-          </li>
         {{ end }}
-      </ul>
+      </section>
-    </nav>
+    </header>
-
-    <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i>Menu</i></button>
   </div>
-</header>
+  {{ $currentPage := . }}
+  {{ range .Site.Menus.main }}
+  {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
+  {{ if .HasChildren }}
+  <header class="navbar navbar-submenu">
+    <section class="navbar-center btn-group btn-group-block">
+      {{ $color := .Pre }}
+      {{ range .Children }}
+        <a class="btn {{if $currentPage.IsMenuCurrent "main" .}}btn-primary{{else}}btn-link{{end}} {{$color}}" href="{{ .URL }}">{{ .Name }}</a>
+      {{ end }}
+    </section>
+  </header>
+  {{ end }}
+  {{ end }}
+  {{ end }}
+</div>

layouts/partials/maire.html

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

layouts/partials/person.html

@@ -1,7 +1,15 @@
-<figure>
+<div class="card person">
-  <img src="{{ .image }}" alt="Photo de {{ .prenom }} {{ .nom }}"  />
+  <div class="card-image">
-  <figcaption>
+    <img src="{{ .image }}" alt="Photo de {{ .prenom }} {{ .nom }}"  />
-      <h3>{{ .prenom }} {{ .nom }}{{ if isset . "fonction" }} - <i>{{ .fonction }}</i>{{ end }}</h4>
+  </div>
-      <p>{{ .job }}, {{ .age }}&nbsp;ans</p>
+  <div class="card-header">
-  </figcaption>
+    <div class="card-title h5">{{ .prenom }} {{ .nom }}</div>
-</figure>
+    <div class="card-subtitle text-gray">{{ .fonction }}</div>
+  </div>
+  <div class="card-body">
+    {{ .job }}
+  </div>
+  <div class="card-footer">
+    <span class="label label-rounded label-primary">{{ .age }}&nbsp;ans</span>
+  </div>
+</div>

layouts/viemunicipale/conseil.html

@@ -1,7 +1,9 @@
-{{ define "all" }}
+{{ define "main" }}
-
+  <div class="container grid-lg contenu">
-  {{ .Content }}
+    <h1>{{ .Title }}</h1>
-<div class="conseil">
+    <div class="container grid-sm">
+      {{ .Content }}
+    </div>
+  </div>
   {{ partial "conseilmunicipal.html" . }}
-</div>
 {{ end }}

package-lock.json

@@ -0,0 +1,16 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "source-sans-pro": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/source-sans-pro/-/source-sans-pro-3.6.0.tgz",
+      "integrity": "sha512-C1RFUGu+YASuqpgDRInTM7Y6OwqeWNOuKn7v0P/4Kh66epTI4PYWwPWP5kdA4l/VqzBAWiqoz5dk0trof73R7w=="
+    },
+    "spectre.css": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/spectre.css/-/spectre.css-0.5.9.tgz",
+      "integrity": "sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw=="
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,18 @@
+# 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)