feat: Nouveau design

assets/styles/main.sass

@@ -1,111 +1,100 @@
-@import "./variables"
-// @import "./reset"
-// @import "./html"
-// @import "./menu"
-@import "./spectre.css/spectre"
-// @import "./header"
-@import "../fonts/source-sans-pro"
-@import "./header"
-@import "./footer"
-@import "./index"
+// VARIABLE
+$font-size: 18px
+
+$vert: #03874b
+$color-primary: black
+$color-secondary: white
+
+$size-xs: 480px
+$size-sm: 600px
+$size-md: 840px
+$size-lg: 960px
+$size-xl: 1280px
+
+@import "./reset"
+@import "./html"
 
-/* Make images easier to work with */
 img
-  max-width: 100%
   display: block
-  &.round
-    border-radius: 100%
 
-.maire
-  img
-    margin: 2rem auto
+// HEADER
 
-.person
-  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
-
-.cover
-  width: 100%
-  height: 40vh
-  object-fit: cover
-  z-index: 2
+.header
+  height: 80vh
   position: relative
 
-.contenu
-  background: white
-  margin: 2rem auto
-  padding: 2rem
-  z-index: 3
-  position: relative
+  .hero
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    z-index: -1
+    object-fit: cover
+    min-width: 100%
+    min-height: 100%
 
-  &.contenu-image
-    margin-top: -4rem
+  .nav
+    position: absolute
+    top: 50px
+    bottom: 0
+    left: 0
+    right: 0
 
-.btn.jaune
-  color: $jaune
-  &:hover, &.active, &.focus
-    color: darken($jaune, 10%)
-  &.btn-primary
-    background-color: $jaune
-    border-color: $jaune
-    color: black
-    &:hover, &.active, &.focus
-      background-color: darken($jaune, 10%)
-      border-color: $jaune
-.btn.rouge
-  color: $rouge
-  &:hover, &.active, &.focus
-    color: darken($rouge, 10%)
-  &.btn-primary
-    background-color: $rouge
-    border-color: $rouge
-    color: white
-    &:hover, &.active, &.focus
-      background-color: darken($rouge, 10%)
-      border-color: $rouge
-.btn.vert
-  color: $vert
-  &:hover
-    color: darken($vert, 10%)
-  &:active
-    color: darken($vert, 10%)
-  &:focus
-    color: darken($vert, 10%)
-  &.btn-primary
     background-color: $vert
-    border-color: $vert
-    color: white
-    &:hover, &.active, &.focus
-      background-color: darken($vert, 10%)
-      border-color: $vert
-.btn.bleu
-  color: $bleu
-  &:hover
-  &.active
-  &.focus
-    color: darken($bleu, 10%)
-  &.btn-primary
-    background-color: $bleu
-    border-color: $bleu
-    color: white
-    &:hover, &.active, &.focus
-      background-color: darken($bleu, 10%)
-      border-color: $bleu
+    height: 70px
+
+    ol
+      list-style-type: none
+      margin: 0 auto
+      padding: 0
+      width: $size-xl
+      display: flex
+      align-items: center
+
+      li
+        display: inline-block
+
+      .logo
+        $size-border-logo: 20px
+        position: relative
+        padding-left: $size-border-logo
+        z-index: 20
+        margin-right: 40px
+
+        &::after
+          position: absolute
+          content: ""
+          top: -70px
+          bottom: -$size-border-logo
+          left: 0
+          right: -$size-border-logo
+          background-color: white
+          z-index: 10
+        img
+          position: relative
+          height: 70px
+          z-index: 30
+
+
+      .link
+        display: flex
+        align-items: center
+
+        &:last-child::after
+          content: none
+
+        &::after
+          content: ""
+          border-right: 2px white solid
+          height: 20px
+
+        a
+          color: white
+          display: flex
+          align-items: center
+          padding: 10px
+          text-decoration: none
+
+          img
+            padding: 0 10px