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

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