feat: first version

assets/css/main.sass

@@ -0,0 +1,226 @@
+@import "../../themes/hugo-theme-lowtech/assets/styles/main"
+
+// Couleur
+$color-initial: #fff
+$color-primary: #1d70b7
+$color-secondary: #f29100
+$color-tertiary: #f4f5f6
+$color-quaternary: #d1d1d1
+$color-quinary: #e1e1e1
+
+body
+  margin: 0
+  font-family: $font-family-serif2
+  font-size: 18px
+  color: hsla(0,0%,0%,0.8)
+
+h1
+  font-size: 1.4rem
+
+h2
+  font-size: 2rem
+
+h2, h3
+  font-family: $font-family-sans-serif7
+  color: $color-primary
+
+blockquote
+  border-left: 4px solid $color-primary
+  font-style: italic
+  margin-left: 0
+  padding-left: 2rem
+
+a
+  color: $color-primary
+  text-decoration-color: $color-primary
+
+@mixin container
+  max-width: $size-lg
+  margin: 0 auto
+  padding: 0 20px
+
+.container, #content
+  @include container
+
+
+// HEADER
+
+.header
+  margin-top: 52px
+  background-color: $color-primary
+  color: white
+
+  a
+    color: white
+
+  .container
+    padding: 0 0 2rem
+    display: flex
+    align-items: center
+
+  .titleContainer
+    flex: 1
+    text-align: center
+    margin: 2rem 0 0 2rem
+
+  .logo
+    border-bottom-left-radius: 10px
+    border-bottom-right-radius: 10px
+    padding: 10px
+    background-color: white
+
+  h1
+    font-size: 3rem
+    line-height: 1.1
+    margin: 0
+    padding: 0
+
+  cite
+    font-size: 1.4rem
+
+
+// NAV
+
+.nav
+  position: fixed
+  z-index: 10
+  top: 0
+  background-color: white
+  width: 100%
+
+  nav
+    left: 0
+    right: 0
+
+  ul
+    list-style: none
+    margin: 0
+    padding: 0
+
+    li
+      display: inline
+      border-right: 1px solid $color-primary
+
+      &:last-child
+        border-right: none
+
+      a
+        display: inline-block
+        padding: 1rem
+        font-size: 1rem
+        font-weight: bold
+
+#content
+  // https://freefrontend.com/css-link-styles/
+  // https://codepen.io/markmead/pen/drORWG
+  a
+    position: relative
+
+    &::after
+      content: ""
+      background: rgba($color-primary, 0.25)
+      position: absolute
+      left: 6px
+      bottom: -6px
+      width: calc(100% - 8px)
+      height: calc(100% - 8px)
+      z-index: -1
+
+// FOOTER
+
+.footer
+  border: 1px dotted $color-primary
+  border-top: 0.2rem solid $color-primary
+  margin: 2rem auto
+  padding: 2rem
+
+// ACTUALITES
+$space: 20px
+#content .actualites
+  margin: 0 -$space
+  padding: 0
+
+  > .cell
+    height: 300px
+    padding: $space
+    position: relative
+
+    a
+      display: flex
+      width: 100%
+      height: 100%
+      text-decoration-color: rgba($color-primary, 0)
+      box-sizing: border-box
+      padding: 1rem
+
+      &:hover
+        background: rgba($color-primary, 0.5)
+
+      &::after
+        content: inherit
+
+    .info
+      padding: 2rem
+      background: rgba($color-primary, 0.25)
+      border: 1rem solid rgba(255,255,255,.25)
+      box-sizing: border-box
+      width: 100%
+      height: 100%
+      align-content: center
+      text-align: center
+
+      h3
+        color: white
+        font-size: 2rem
+        text-align: center
+        margin: 0
+        padding: 0
+        flex: 0
+
+      time
+        color: white
+        font-size: 1rem
+        flex: 0
+
+
+    .image
+      position: absolute
+      top: $space
+      bottom: $space
+      left: $space
+      right: $space
+      z-index: -2
+      overflow: hidden
+
+      img
+        height: 100%
+        object-fit: cover
+
+figure.center
+  text-align: center
+
+$imageBorder: 2px
+.actu-image
+  text-align: center
+  padding: 2rem
+
+  div
+    position: relative
+    display: inline-block
+
+    &:before
+      content: ""
+      position: absolute
+      top: -$imageBorder
+      bottom: -$imageBorder
+      left: -$imageBorder
+      right: -$imageBorder
+      width: 100%
+      height: 100%
+      z-index: -1
+      border: $imageBorder solid rgba($color-primary, 0.25)
+
+  img
+    padding: 10px
+    margin: 10px 10px 6px // Pourquoi ?
+    border: $imageBorder solid rgba($color-primary, 0.25)