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

project-closer (en cours)
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-04 18:33:08 +02:00
parent 62623d095e
commit c569fa0140
4 changed files with 96 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

70
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"),
@ -119,34 +121,35 @@ nav {
a { a {
text-decoration: none; text-decoration: none;
} }
button.active {
text-decoration: underline;
}
} }
} }
/* PROJECT SLIDESHOW */ /* PROJECT SLIDESHOW */
.project-slideshow { .project-slideshow {
position: fixed; width: -moz-fit-content;
right: 0; width: fit-content;
top: 0; height: -moz-fit-content;
/*! width: calc(50vw - var(--body-margin)); */
height: fit-content; height: fit-content;
z-index: 0;
overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
margin: var(--body-margin) var(--body-margin) var(--body-margin) 0; max-width: 100%;
left: calc(var(--index-width) + var(--body-margin)); right: 0;
text-align: right; position: absolute;
picture {
display: contents;
}
} }
.mix-blend-bg { picture {
inset: 0;
}
picture img {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
vertical-align: bottom;
width: auto;
height: fit-content;
}
.project-slideshow-container {
display: block; display: block;
position: fixed; position: fixed;
height: 100%; height: 100%;
@ -155,7 +158,20 @@ nav {
right: var(--body-margin); right: var(--body-margin);
bottom: var(--body-margin); bottom: var(--body-margin);
left: calc(var(--index-width) + var(--body-margin)); left: calc(var(--index-width) + var(--body-margin));
z-index: -1; }
.project-slideshow-container .all-projects-closer {
background-color: red;
inset: 0;
display: block;
position: absolute;
width: auto;
}
.mix-blend-bg.all-projects-closer {
width: var(--index-width);
cursor: var(--close-cursor);
display: none;
} }
button.prev { button.prev {
@ -182,13 +198,6 @@ button.next {
padding: 0; padding: 0;
} }
.project-slideshow img {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
/* text-align: inherit; */
vertical-align: bottom;
}
/* PROJECT TOGGLE */ /* PROJECT TOGGLE */
.fix { .fix {
@ -285,8 +294,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);

57
assets/css/style.css
View file

@ -118,30 +118,33 @@ nav.filter-menu {
nav.filter-menu a { nav.filter-menu a {
text-decoration: none; text-decoration: none;
} }
nav.filter-menu button.active {
text-decoration: underline;
}
/* PROJECT SLIDESHOW */ /* PROJECT SLIDESHOW */
.project-slideshow { .project-slideshow {
position: fixed; width: -moz-fit-content;
right: 0; width: fit-content;
top: 0;
/*! width: calc(50vw - var(--body-margin)); */
height: -moz-fit-content; height: -moz-fit-content;
height: fit-content; height: fit-content;
z-index: 0;
overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
margin: var(--body-margin) var(--body-margin) var(--body-margin) 0; max-width: 100%;
left: calc(var(--index-width) + var(--body-margin)); right: 0;
text-align: right; position: absolute;
}
.project-slideshow picture {
display: contents;
} }
.mix-blend-bg { picture {
inset: 0;
}
picture img {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
vertical-align: bottom;
width: auto;
height: -moz-fit-content;
height: fit-content;
}
.project-slideshow-container {
display: block; display: block;
position: fixed; position: fixed;
height: 100%; height: 100%;
@ -150,7 +153,20 @@ nav.filter-menu button.active {
right: var(--body-margin); right: var(--body-margin);
bottom: var(--body-margin); bottom: var(--body-margin);
left: calc(var(--index-width) + var(--body-margin)); left: calc(var(--index-width) + var(--body-margin));
z-index: -1; }
.project-slideshow-container .all-projects-closer {
background-color: red;
inset: 0;
display: block;
position: absolute;
width: auto;
}
.mix-blend-bg.all-projects-closer {
width: var(--index-width);
cursor: var(--close-cursor);
display: none;
} }
button.prev { button.prev {
@ -177,13 +193,6 @@ button.next {
padding: 0; padding: 0;
} }
.project-slideshow img {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
/* text-align: inherit; */
vertical-align: bottom;
}
/* PROJECT TOGGLE */ /* PROJECT TOGGLE */
.fix { .fix {
width: 100%; width: 100%;

14
assets/js/project-toggle.js
View file

@ -41,13 +41,15 @@ projectTogglers.forEach((button) => {
}); });
}); });
const allProjectsCloser = document.querySelector(".all-projects-closer"); const allProjectsCloser = document.querySelectorAll(".all-projects-closer");
allProjectsCloser.forEach((projectCloser) => {
allProjectsCloser.addEventListener("click", () => { projectCloser.addEventListener("click", () => {
allProjects.forEach((p) => p.classList.remove("selected", "unselected")); window.location = "/index";
Router.setParam("project", null); });
}); });
window.addEventListener("routechange", () => selectProject(Router.getParam("project"))); window.addEventListener("routechange", () =>
selectProject(Router.getParam("project")),
);
selectProject(Router.getParam("project")); selectProject(Router.getParam("project"));

28
site/templates/index.php
View file

@ -17,19 +17,21 @@
<span class="slide-number">slide number/total slides</span> <span class="slide-number">slide number/total slides</span>
</div> </div>
<section class="toggle"> <section class="toggle">
<div class="project-slideshow"> <div class= "project-slideshow-container">
<button class="mix-blend-bg all-projects-closer"></button> <button class="all-projects-closer"></button>
<?php foreach ($project->images() as $image): ?> <div class="project-slideshow">
<?php snippet('picture', [ <?php foreach ($project->images() as $image): ?>
'file' => $image, <?php snippet('picture', [
'srcsetName' => 'project-slideshow', 'file' => $image,
'sizes' => '(min-width: 1000px) 50vw, 100vw', 'srcsetName' => 'project-slideshow',
'lazy' => $image->indexOf() !== 0, 'sizes' => '(min-width: 1000px) 50vw, 100vw',
'class' => $image->indexOf() === 0 ? 'active' : null, 'lazy' => $image->indexOf() !== 0,
]) ?> 'class' => $image->indexOf() === 0 ? 'active' : null,
<?php endforeach; ?> ]) ?>
<button class="prev"></button> <?php endforeach; ?>
<button class="next"></button> <button class="prev"></button>
<button class="next"></button>
</div>
</div> </div>
<div class="project-description"><?= $project->description() ?></div> <div class="project-description"><?= $project->description() ?></div>
<button class="project-toggler closer"></button> <button class="project-toggler closer"></button>