studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

save before redesign mobile nav
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-09 16:36:12 +02:00
parent e349e642cb
commit c8066906f2
9 changed files with 135 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

15
assets/css/src/_main.scss
View file

@ -2,7 +2,8 @@
@font-face {
font-family: "neue-haas-grotesk-display";
src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
src:
url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
format("woff2"),
url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
format("woff"),
@ -16,7 +17,8 @@
@font-face {
font-family: "neue-haas-grotesk-display";
src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
src:
url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
format("woff2"),
url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
format("woff"),
@ -103,6 +105,10 @@ ul {
z-index: 0;
}
#mobile-menu {
display: none;
}
/* PROJECT SLIDESHOW */
.project-slideshow {
@ -269,8 +275,9 @@ button.next {
display: grid;
grid-template-columns:
calc(3 / 6 * var(--index-width) - var(--body-margin))
calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(1 / 6 *
var(--index-width) - var(--body-margin));
calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(
1 / 6 * var(--index-width) - var(--body-margin)
);
gap: var(--body-margin);
pointer-events: all;
padding-bottom: var(--line-height-S);

45
assets/css/src/_mobile.scss
View file

@ -122,21 +122,58 @@
display: none;
}
.mobile-menu {
display: flex;
z-index: 2;
#mobile-menu {
z-index: 3;
position: fixed;
inset: 0;
display: block;
pointer-events: none;
ul {
font-size: var(--font-size-L);
a {
text-decoration: none;
}
}
.toggle-mobile-menu {
#mobile-menu-toggle {
pointer-events: none;
font-size: var(--font-size-XL);
width: 100%;
position: absolute;
bottom: 0;
height: var(--font-size-XL);
line-height: var(--font-size-XL);
display: flex;
justify-content: center;
z-index: 1;
span {
pointer-events: all;
height: fit-content;
}
}
#mobile-menu-content {
display: none;
justify-content: center;
align-items: center;
inset: 0;
position: absolute;
pointer-events: all;
ul,
h1 {
z-index: 1;
}
.backdrop {
inset: 0;
background-color: white;
opacity: calc(1 - var(--low-opacity));
position: absolute;
z-index: 0;
cursor: pointer;
}
}
#mobile-menu-content.visible {
display: flex;
}
}
header:hover ~ main {

65
assets/css/style.css
View file

@ -106,6 +106,10 @@ ul {
z-index: 0;
}
#mobile-menu {
display: none;
}
/* PROJECT SLIDESHOW */
.project-slideshow {
width: -moz-fit-content;
@ -719,21 +723,58 @@ body[data-template=index] .projects-index li section.toggle .project-slideshow p
.main-menu {
display: none;
}
.mobile-menu {
display: flex;
z-index: 2;
}
.mobile-menu ul {
font-size: var(--font-size-L);
}
.mobile-menu ul a {
text-decoration: none;
}
.mobile-menu .toggle-mobile-menu {
#mobile-menu {
z-index: 3;
position: fixed;
inset: 0;
display: block;
pointer-events: none;
}
.mobile-menu .toggle-mobile-menu span {
#mobile-menu ul {
font-size: var(--font-size-L);
}
#mobile-menu ul a {
text-decoration: none;
}
#mobile-menu #mobile-menu-toggle {
pointer-events: none;
font-size: var(--font-size-XL);
width: 100%;
position: absolute;
bottom: 0;
height: var(--font-size-XL);
line-height: var(--font-size-XL);
display: flex;
justify-content: center;
z-index: 1;
}
#mobile-menu #mobile-menu-toggle span {
pointer-events: all;
height: -moz-fit-content;
height: fit-content;
}
#mobile-menu #mobile-menu-content {
display: none;
justify-content: center;
align-items: center;
inset: 0;
position: absolute;
pointer-events: all;
}
#mobile-menu #mobile-menu-content ul,
#mobile-menu #mobile-menu-content h1 {
z-index: 1;
}
#mobile-menu #mobile-menu-content .backdrop {
inset: 0;
background-color: white;
opacity: calc(1 - var(--low-opacity));
position: absolute;
z-index: 0;
cursor: pointer;
}
#mobile-menu #mobile-menu-content.visible {
display: flex;
}
header:hover ~ main {
opacity: 1;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

BIN
assets/images/._close-cursor.svg
View file

Binary file not shown.

15
assets/js/mobile-menu-toggle.js Normal file
View file

@ -0,0 +1,15 @@
document.addEventListener("DOMContentLoaded", () => {
const mobileMenuToggle = document.querySelector("button#mobile-menu-toggle");
const mobileMenuContent = document.querySelector("#mobile-menu-content");
const mobileMenuBackdrop = document.querySelector(
"#mobile-menu-content > .backdrop",
);
mobileMenuToggle.addEventListener("click", () => {
mobileMenuContent.classList.toggle("visible");
});
mobileMenuBackdrop.addEventListener("click", () => {
mobileMenuContent.classList.remove("visible");
});
});

4
assets/js/project-slideshow.js
View file

@ -4,7 +4,9 @@ document.addEventListener("DOMContentLoaded", () => {
nextButtons.forEach((nextButton) => {
nextButton.addEventListener("click", () => {
const activePicture = nextButton.closest(".project-slideshow").querySelector("picture.active");
const activePicture = nextButton
.closest(".project-slideshow")
.querySelector("picture.active");
const targetPicture =
activePicture.nextElementSibling &&
activePicture.nextElementSibling.tagName === "PICTURE"

20
site/snippets/mobile-menu.php
View file

@ -1,12 +1,12 @@
<nav class="mobile-menu">
<div id="mobile-menu">
<button popovertarget="mobile-menu-content">
<h1 class="toggle-mobile-menu">
<span>Menu</span>
</h1>
<div class="mobile-menu-toggle-wrapper">
<button id="mobile-menu-toggle">
Menu
</button>
</div>
<dialog id="mobile-menu-content" popover>
<nav id="mobile-menu-content" >
<h1 class="title-nav">
<a href="<?= page('home')->url() ?>">
Hic&nbsp;et&nbsp;Nunc&nbsp;Studio
@ -23,9 +23,7 @@
<a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
</li>
</ul>
<button popovertarget="mobile-menu-content" popovertargetaction="hide" class="toggle-mobile-menu">
Fermer
</button>
</dialog>
<div class="backdrop"></div>
</nav>
</div>

1
site/templates/index.php
View file

@ -52,5 +52,6 @@
<script src="/assets/js/project-slideshow.js"></script>
<script src="/assets/js/project-toggle.js"></script>
<script src="/assets/js/filter-menu.js"></script>
<script src="/assets/js/mobile-menu-toggle.js"></script>
<?php snippet('footer') ?>