feat: Ajout du menu mobile

assets/styles/header.sass

@@ -0,0 +1,151 @@
+// HEADER
+
+.header
+  height: 80vh
+  position: relative
+
+  .hero
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    z-index: -1
+    object-fit: cover
+    width: 100%
+    height: 100%
+
+  .nav
+    position: absolute
+    top: 50px
+    bottom: 0
+    left: 0
+    right: 0
+    background-color: $vert
+    height: 70px
+
+    @media screen and (max-width: $size-md)
+      top: 30px
+      height: 50px
+
+  .container
+    display: flex
+    align-items: center
+    justify-content: center
+
+    @media screen and (max-width: $size-md)
+      justify-content: space-between
+
+  .logo
+    $size-border-logo: 20px
+    position: relative
+    padding-left: $size-border-logo
+    z-index: 20
+    margin-right: 40px
+
+    &::after
+      position: absolute
+      content: ""
+      top: -$size-border-logo
+      bottom: -$size-border-logo
+      left: 0
+      right: -$size-border-logo
+      background-color: white
+      z-index: 10
+
+    a
+      display: block
+
+    img
+      position: relative
+      height: 70px
+      z-index: 30
+
+      @media screen and (max-width: $size-md)
+        height: 50px
+
+  #menu
+    list-style-type: none
+    display: flex
+    align-items: center
+    padding: 0
+    margin: 0
+
+    @media screen and (max-width: $size-xl)
+      font-size: .95rem
+
+    @media screen and (max-width: $size-md)
+      display: none
+      position: fixed
+      top: 0
+      bottom: 0
+      left: 0
+      right: 0
+      z-index: 100
+      background: $vert
+      flex-direction: column
+      justify-content: center
+
+      &:hover
+        display: inherit
+
+      &:hover + .close-button
+        display: inherit
+
+      img
+        display: inherit
+
+    li
+      display: flex
+      align-items: center
+
+      &:last-child::after
+        content: none
+
+      &::after
+        content: ""
+        border-right: 2px white solid
+        height: 20px
+
+        @media screen and (max-width: $size-md)
+          content: none
+
+    a
+      color: white
+      display: flex
+      align-items: center
+      padding: 10px
+      text-decoration: none
+      border-top: 1px dashed transparent
+      border-bottom: 1px dashed transparent
+
+      &:hover
+        border-top-color: white
+        border-bottom-color: white
+
+    img
+      padding: 0 10px
+
+      @media screen and (max-width: $size-lg) and (min-width: $size-md)
+        display: none
+
+    span
+      white-space: nowrap
+
+  .open-button
+    display: none
+    white-space: nowrap
+
+    &:focus + #menu
+      display: inherit
+
+    &:focus + #menu + .close-button
+      display: inherit
+
+    @media screen and (max-width: $size-md)
+      display: inherit
+
+  .close-button
+    white-space: nowrap
+    display: none
+    z-index: 200

assets/styles/main.sass

@@ -13,88 +13,14 @@ $size-xl: 1280px
 
 @import "./reset"
 @import "./html"
+@import "./header"
 
 img
   display: block
 
-// HEADER
+// CONTAINER
 
-.header
+.container
-  height: 80vh
+  max-width: $size-xl
-  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%
-
-  .nav
-    position: absolute
-    top: 50px
-    bottom: 0
-    left: 0
-    right: 0
-
-    background-color: $vert
-    height: 70px
-
-    ol
-      list-style-type: none
   margin: 0 auto
-      padding: 0
+  padding: 0 20px
-      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

layouts/index.html

@@ -1,18 +1,6 @@
 {{ define "all" }}
 
-  {{ $image := .Resources.GetMatch "*" }}
+
-  {{ $resized := $image.Fill "1400x600 Top"}}
-<div class="hero hero-lg hero-image" style="background-image:linear-gradient(to bottom, #003f89, rgba(216,216,216,0)),url({{ $resized.RelPermalink }})">
-  <div class="hero-body">
-    <div class="container grid-xl">
-      <div class="columns">
-        <div class="column col-7">
-          <h2>Bienvenue sur le nouveau site de Crémeaux</h2>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 <div class="container grid-lg contenu {{ if .Params.Image }}contenu-image{{end}}">
   <h1>{{ .Title }}</h1>
   <div class="container grid-sm">

layouts/partials/header.html

@@ -1,23 +1,28 @@
+
 <header class="header">
   {{ $headless := .Site.GetPage "/" }}
   {{ $image := $headless.Resources.GetMatch "*" }}
   {{ $resized := $image.Fill "1400x600 Top"}}
   <img class="hero" src="{{ $resized.RelPermalink }}" alt="{{ .Title }}" />
   <nav class="nav">
-    <ol>
+    <div class="container">
-      <li class="logo">
+      <div class="logo">
         <a href="/" class="">
           <img src="/icons/logo.jpg" alt="Blason de Crémeaux" />
         </a>
-      <li>
+      </div>
+      <button class="open-button">≡ Menu</button>
+      <ol id="menu">
         {{ range .Site.Menus.main }}
-      <li class="link">
+        <li>
-        <a href="{{ .URL }}" class="m-2 btn btn-primary {{ .Pre }}">
+          <a href="{{ .URL }}">
             <img src="/icons/{{ .Identifier }}.jpg" alt="{{ .Name }}" />
             <span>{{ .Name }}</span>
           </a>
         </li>
         {{ end }}
       </ol>
+      <button class="close-button">✖ Fermer</button>
+    </div>
   </nav>
 </header>

static/icons/burger.svg

@@ -0,0 +1 @@
+<svg height="300px" width="300px" fill="#03874b" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 59.002 48.465" enable-background="new 0 0 59.002 48.465" xml:space="preserve"><switch><foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self"><g><g><path fill="#03874b" d="M3.161,6.322C1.416,6.322,0,4.906,0,3.161l0,0C0,1.415,1.416,0,3.161,0l0,0h52.68      c1.745,0,3.161,1.415,3.161,3.161l0,0c0,1.745-1.416,3.161-3.161,3.161l0,0H3.161L3.161,6.322z"/></g><g><path fill="#03874b" d="M3.162,27.394C1.415,27.394,0,25.979,0,24.232l0,0c0-1.745,1.415-3.161,3.161-3.161l0,0h52.679      c1.745,0,3.16,1.416,3.16,3.161l0,0c0,1.746-1.415,3.161-3.16,3.161l0,0H3.162L3.162,27.394z"/></g><g><path fill="#03874b" d="M3.162,48.465C1.415,48.465,0,47.049,0,45.303l0,0c0-1.745,1.415-3.16,3.162-3.16l0,0H55.84      c1.746,0,3.162,1.415,3.162,3.16l0,0c0,1.746-1.416,3.162-3.162,3.162l0,0H3.162L3.162,48.465z"/></g></g></g></switch></svg>