feat: Ajout du menu mobile

This commit is contained in:
Simon 2020-11-05 14:14:55 +01:00
parent d93ab68476
commit c4de87fe49
5 changed files with 176 additions and 105 deletions

151
assets/styles/header.sass Normal file
View File

@ -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

View File

@ -13,88 +13,14 @@ $size-xl: 1280px
@import "./reset"
@import "./html"
@import "./header"
img
display: block
// HEADER
// CONTAINER
.header
height: 80vh
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
.container
max-width: $size-xl
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
padding: 0 20px

View File

@ -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">

View File

@ -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>
<li class="logo">
<div class="container">
<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">
<a href="{{ .URL }}" class="m-2 btn btn-primary {{ .Pre }}">
<li>
<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>

1
static/icons/burger.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB