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

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

@ -122,21 +122,58 @@
display: none; display: none;
} }
.mobile-menu { #mobile-menu {
display: flex; z-index: 3;
z-index: 2; position: fixed;
inset: 0;
display: block;
pointer-events: none;
ul { ul {
font-size: var(--font-size-L); font-size: var(--font-size-L);
a { a {
text-decoration: none; text-decoration: none;
} }
} }
.toggle-mobile-menu { #mobile-menu-toggle {
pointer-events: none; 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 { span {
pointer-events: all; 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 { header:hover ~ main {

65
assets/css/style.css
View file

@ -106,6 +106,10 @@ ul {
z-index: 0; z-index: 0;
} }
#mobile-menu {
display: none;
}
/* PROJECT SLIDESHOW */ /* PROJECT SLIDESHOW */
.project-slideshow { .project-slideshow {
width: -moz-fit-content; width: -moz-fit-content;
@ -719,21 +723,58 @@ body[data-template=index] .projects-index li section.toggle .project-slideshow p
.main-menu { .main-menu {
display: none; display: none;
} }
.mobile-menu { #mobile-menu {
display: flex; z-index: 3;
z-index: 2; position: fixed;
} inset: 0;
.mobile-menu ul { display: block;
font-size: var(--font-size-L);
}
.mobile-menu ul a {
text-decoration: none;
}
.mobile-menu .toggle-mobile-menu {
pointer-events: none; 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; 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 { header:hover ~ main {
opacity: 1; 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) => { nextButtons.forEach((nextButton) => {
nextButton.addEventListener("click", () => { nextButton.addEventListener("click", () => {
const activePicture = nextButton.closest(".project-slideshow").querySelector("picture.active"); const activePicture = nextButton
.closest(".project-slideshow")
.querySelector("picture.active");
const targetPicture = const targetPicture =
activePicture.nextElementSibling && activePicture.nextElementSibling &&
activePicture.nextElementSibling.tagName === "PICTURE" activePicture.nextElementSibling.tagName === "PICTURE"

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

@ -1,12 +1,12 @@
<nav class="mobile-menu"> <div id="mobile-menu">
<button popovertarget="mobile-menu-content"> <div class="mobile-menu-toggle-wrapper">
<h1 class="toggle-mobile-menu"> <button id="mobile-menu-toggle">
<span>Menu</span> Menu
</h1> </button>
</button> </div>
<dialog id="mobile-menu-content" popover> <nav id="mobile-menu-content" >
<h1 class="title-nav"> <h1 class="title-nav">
<a href="<?= page('home')->url() ?>"> <a href="<?= page('home')->url() ?>">
Hic&nbsp;et&nbsp;Nunc&nbsp;Studio Hic&nbsp;et&nbsp;Nunc&nbsp;Studio
@ -23,9 +23,7 @@
<a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a> <a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
</li> </li>
</ul> </ul>
<button popovertarget="mobile-menu-content" popovertargetaction="hide" class="toggle-mobile-menu"> <div class="backdrop"></div>
Fermer </nav>
</button>
</dialog>
</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-slideshow.js"></script>
<script src="/assets/js/project-toggle.js"></script> <script src="/assets/js/project-toggle.js"></script>
<script src="/assets/js/filter-menu.js"></script> <script src="/assets/js/filter-menu.js"></script>
<script src="/assets/js/mobile-menu-toggle.js"></script>
<?php snippet('footer') ?> <?php snippet('footer') ?>