feat: Modification des couleurs

assets/styles/main.sass

@@ -1,9 +1,3 @@
-$vert: #04874b
-$orange: #f0833c
-$grey: #e5e5e5
-$color-primary: black
-$color-secondary: white
-
 $size-xs: 480px
 $size-sm: 600px
 $size-md: 840px
@@ -19,8 +13,16 @@ $size-xl: 1280px
 @import "./css-masonry"
 
 body
-  color: $color-primary
-  background-color: $color-secondary
+  --color-green: #04874B
+  --color-blue: #586994
+  --color-orange: #F0833C
+  --color-purple: #4C1036
+  --color-grey: #E8E9ED
+  --color-primary: black
+  --color-secondary: white
+
+  color: var(--color-primary)
+  background-color: var(--color-secondary)
 
 .open-button, .close-button
   border-radius: 0
@@ -62,7 +64,7 @@ body
   width: 30px
 
 .container
-  max-width: $size-lg
+  max-width: $size-xl
   margin: 0 auto
   padding: 0 1rem
   @media screen and (max-width: $size-xs)
@@ -78,7 +80,7 @@ body
     min-height: inherit
 
   a
-    color: $color-primary
+    color: var(--color-primary)
 
   > .container
     background-color: white
@@ -111,7 +113,7 @@ body
         margin: 0
 
     .opening
-      background: $orange
+      background: var(--color-orange)
       width: 35%
       padding: 20px
       color: black
@@ -151,7 +153,7 @@ body
 
 hr
   margin: 3rem auto
-  border: 1px dashed $vert
+  border: 1px dashed var(--color-green)
   @media screen and (max-width: $size-xs)
     margin: 2rem auto
 // FOOTER
@@ -159,7 +161,7 @@ hr
 .explain
   text-align: center
   font-size: .6rem
-  background-color: $vert
+  background-color: var(--color-green)
   color: white
 
   a
@@ -167,7 +169,7 @@ hr
 
 #content .commissions
   h3, h4
-    color: $vert
+    color: var(--color-green)
 
 #content .conseilmunicipal
   display: flex
@@ -182,7 +184,7 @@ hr
       margin-bottom: 1rem
 
     h2
-      color: $vert
+      color: var(--color-green)
       font-size: 1.1rem
       padding: 0
       margin: 0 0 .3rem
@@ -214,12 +216,6 @@ details > summary
   cursor: pointer
   padding: .5rem 0
 
-// $vert: #04874b
-// $orange: #f0833c
-// $grey: #e5e5e5
-// $color-primary: black
-// $color-secondary: white
-
 #content .cards
   margin: 0 -1rem
   padding: 0
@@ -229,7 +225,7 @@ details > summary
   justify-content: center
   .card
     flex: 0 0 calc(100% * 3 / 12)
-    background-color: #f0833c
+    background-color: var(--color-purple)
     margin: 1rem
     padding: 1rem
     border-radius: 4px
@@ -247,7 +243,7 @@ details > summary
 
     &:hover
       box-shadow: none
-      color: $vert
+      color: var(--color-purple)
       background-color: white
 
 blockquote
@@ -258,9 +254,9 @@ blockquote
   font-style: italic
   color: #555555
   padding: 1.5rem
-  border-left: 8px solid $vert
+  border-left: 8px solid var(--color-green)
   line-height: 1.4
-  background: #EDEDED
+  background: var(--color-grey)
 
   position: relative
 
@@ -275,7 +271,7 @@ blockquote
   &::before
     font-family: Arial
     content: "\201C"
-    color: $vert
+    color: var(--color-green)
     font-size: 10rem
     position: absolute
     left: 1rem