feat: Ajout du menu mobile
This commit is contained in:
parent
d93ab68476
commit
c4de87fe49
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 |
Loading…
Reference in New Issue