Ajout de page et du style principal

assets/styles/main.sass

@@ -1,18 +1,296 @@
+@import "./variables"
+@import "./reset"
+@import "./html"
+@import "./header"
+@import "./menu"
+
+@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: #d5d5d5
-  text-align: center
+  background-color: white
+  padding: 0
+  margin: 0
 
-h1
-  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif
-  font-size: 92px
-  padding: 80px 50px
-  text-align: center
-  text-transform: uppercase
-  text-rendering: optimizeLegibility
+.container
+  width: $content-width
+  margin: 0 auto
 
-  color: #2c2c2c
+@media screen and (max-width: 800px)
+  .container
+    width: inherit
 
-  letter-spacing: .05em
-  text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2)
-  word-wrap: break-word
+.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