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

57
assets/css/style.css
View file

@ -118,30 +118,33 @@ nav.filter-menu {
nav.filter-menu a {
text-decoration: none;
}
nav.filter-menu button.active {
text-decoration: underline;
}
/* PROJECT SLIDESHOW */
.project-slideshow {
position: fixed;
right: 0;
top: 0;
/*! width: calc(50vw - var(--body-margin)); */
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
z-index: 0;
overflow: hidden;
box-sizing: border-box;
margin: var(--body-margin) var(--body-margin) var(--body-margin) 0;
left: calc(var(--index-width) + var(--body-margin));
text-align: right;
}
.project-slideshow picture {
display: contents;
max-width: 100%;
right: 0;
position: absolute;
}
.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;
position: fixed;
height: 100%;
@ -150,7 +153,20 @@ nav.filter-menu button.active {
right: var(--body-margin);
bottom: 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 {
@ -177,13 +193,6 @@ button.next {
padding: 0;
}
.project-slideshow img {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
/* text-align: inherit; */
vertical-align: bottom;
}
/* PROJECT TOGGLE */
.fix {
width: 100%;

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

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