etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity Actions

feat: burger menu

Browse source
This commit is contained in:
Matthieu Bessat 2023-04-10 19:25:39 +02:00
parent 6f34c7fc55
commit 0fd50a397a
5 changed files with 345 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

39
layouts/index.html
View file

@ -7,27 +7,36 @@
</div>
<div class="cover__content">
<div class="page-container">
<h1 class="cover__title">
Sauvons la chapelle<br>
de Bethléem !
</h1>
<div class="cover__title-container">
<h1 class="cover__title">
Sauvons la chapelle
de Bethléem !
</h1>
<div class="cover__backdrop">
</div>
</div>
</div>
</div>
</div>
<div class="accent-separator">
</div>
<div class="big-animation" style="margin-top: 1em; margin-left: 1em">
<div class="burger">
<div class="bar-group bar1">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="bar-group bar2"></div>
<div class="bar-group bar3"></div>
</div>
</div>
<!-- <div class="big-animation" style="margin-top: 1em; margin-left: 1em"> -->
<!-- <div class="burger"> -->
<!-- <div class="bar-group bar1"> -->
<!-- <div class="bar"><div></div></div> -->
<!-- <div class="bar"><div></div></div> -->
<!-- </div> -->
<!-- <div class="bar-group bar2"> -->
<!-- <div class="bar"><div></div></div> -->
<!-- <div class="bar"><div></div></div> -->
<!-- </div> -->
<!-- <div class="bar-group bar3"> -->
<!-- <div class="bar"><div></div></div> -->
<!-- <div class="bar"><div></div></div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="page-container" style="margin-top: 2rem">
<button class="button">Adhérer !</button>

26
layouts/partials/header.html
View file

@ -7,7 +7,7 @@
alt="Logo l'étoile de bethléem"
/>
</a>
<nav class="site-header__nav">
<nav class="site-header__nav desktop-nav">
<a href="/actualites">Actualités</a>.
<a href="/association">L'association</a>.
<a href="/histoires">Histoire</a>.
@ -16,12 +16,22 @@
<a href="{{ .URL | relURL }}"><b>{{ .Name }}</b></a>.
{{ end }}
</nav>
<!-- <div class="site-header__nav-button"> -->
<!-- <div class="burger-button"> -->
<!-- <div></div> -->
<!-- <div></div> -->
<!-- <div></div> -->
<!-- </div> -->
<!-- </div> -->
<div class="burger-menu">
<div class="burger-button-container">
<input type="checkbox" id="navi-toggle" class="checkbox" />
<label for="navi-toggle" class="burger-button">
<span class="icon">&nbsp;</span>
</label>
<div class="background">&nbsp;</div>
<nav class="nav">
<ul class="list">
<li><a href="/actualites">Actualités</a></li>
<li><a href="/association">L'association</a></li>
<li><a href="/histoires">Histoire</a></li>
<li><a href="/images">Gallerie</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>