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

nav>Fix underline problem in active link

Browse source
This commit is contained in:
camille 2026-06-30 19:00:58 +02:00
parent fc474b5ba9
commit a6d958e5de
4 changed files with 137 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

114
assets/css/src/_index.scss
View file

@ -1,8 +1,12 @@
body[data-template="index"] {
main {
grid-template-columns: 8;
}
grid-template-columns: 8;
}
a.nav-item-index {
text-decoration: underline;
}
.filter-menu {
font-size: var(--font-size-L);
@ -185,66 +189,66 @@ body[data-template="index"] {
}
/* PROJECT SLIDESHOW */
/* PROJECT SLIDESHOW */
.project-slideshow {
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
box-sizing: border-box;
max-width: 100%;
right: 0;
position: absolute;
picture img,
video.slide {
.project-slideshow {
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
box-sizing: border-box;
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
vertical-align: bottom;
width: auto;
height: auto;
right: 0;
position: absolute;
picture img,
video.slide {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
vertical-align: bottom;
width: auto;
height: auto;
}
}
}
picture {
inset: 0;
}
picture {
inset: 0;
}
.project-slideshow-container {
display: block;
position: fixed;
height: 100%;
background-color: white;
top: var(--body-margin);
right: var(--body-margin);
bottom: var(--body-margin);
left: calc(var(--index-width) + var(--body-margin));
}
.project-slideshow-container {
display: block;
position: fixed;
height: 100%;
background-color: white;
top: var(--body-margin);
right: var(--body-margin);
bottom: var(--body-margin);
left: calc(var(--index-width) + var(--body-margin));
}
button.prev {
position: absolute;
top: 0;
height: 100%;
border: none;
cursor: w-resize;
z-index: 1;
width: 50%;
left: 0;
padding: 0;
}
button.prev {
position: absolute;
top: 0;
height: 100%;
border: none;
cursor: w-resize;
z-index: 1;
width: 50%;
left: 0;
padding: 0;
}
button.next {
position: absolute;
top: 0;
right: 0;
height: 100%;
border: none;
cursor: e-resize;
z-index: 1;
width: 50%;
padding: 0;
}
button.next {
position: absolute;
top: 0;
right: 0;
height: 100%;
border: none;
cursor: e-resize;
z-index: 1;
width: 50%;
padding: 0;
}
}

13
assets/css/src/_infos.scss
View file

@ -26,6 +26,10 @@
opacity: 0;
}
a.nav-item-infos {
text-decoration: underline;
}
main {
position: relative;
padding-top: calc(var(--line-height-S) + 0.35rem);
@ -43,13 +47,16 @@
margin-top: calc(var(--font-size-L) + var(--line-height-S));
max-width: 1700px;
h3{
h3 {
text-decoration: underline;
}
.presentation, .clients{
.presentation,
.clients {
margin-top: var(--line-height-S);
}
.presentation{
.presentation {
font-size: var(--font-size-L);
line-height: 1.2;
}

128
assets/css/style.css
View file

@ -342,6 +342,9 @@ button#mobile-menu-toggle {
body[data-template=index] main {
grid-template-columns: 8;
}
body[data-template=index] a.nav-item-index {
text-decoration: underline;
}
body[data-template=index] .filter-menu {
font-size: var(--font-size-L);
position: sticky;
@ -555,6 +558,9 @@ body[data-template=index] button.next {
[data-template=infos] .title-nav {
opacity: 0;
}
[data-template=infos] a.nav-item-infos {
text-decoration: underline;
}
[data-template=infos] main {
position: relative;
padding-top: calc(var(--line-height-S) + 0.35rem);
@ -574,7 +580,8 @@ body[data-template=index] button.next {
[data-template=infos] .info-grid h3 {
text-decoration: underline;
}
[data-template=infos] .info-grid .presentation, [data-template=infos] .info-grid .clients {
[data-template=infos] .info-grid .presentation,
[data-template=infos] .info-grid .clients {
margin-top: var(--line-height-S);
}
[data-template=infos] .info-grid .presentation {
@ -589,37 +596,6 @@ body[data-template=index] button.next {
--font-size-L: 1.5rem;
--font-size-S: 0.75rem;
}
header:has(+ main > .projects-index > .selected) {
display: none;
}
.project-slideshow-container {
position: fixed;
top: 0;
width: 100vw;
left: 0;
margin: 0;
height: var(--slider-height);
}
.project-slideshow-container button.all-projects-closer {
display: none;
}
.project-slideshow {
inset: 0;
width: auto;
height: auto;
}
.project-slideshow picture,
.project-slideshow video.slide {
inset: 0;
position: absolute;
}
.project-slideshow picture img,
.project-slideshow video.slide {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.main-title {
font-size: var(--font-size-XL);
line-break: strict;
@ -629,13 +605,6 @@ body[data-template=index] button.next {
margin-top: var(--body-margin);
line-height: 0.75;
}
.project-toggler.grid {
grid-template-columns: 2fr 2fr 1fr;
width: 100%;
}
.fix {
display: block;
}
main {
position: fixed;
top: 0;
@ -719,22 +688,6 @@ body[data-template=index] button.next {
#home-slideshow .slide.portrait-pair.active {
display: block;
}
.close-button.closer {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2.3 * (var(--line-height-S)));
right: var(--body-margin);
font-size: var(--font-size-L);
cursor: pointer;
mix-blend-mode: difference;
color: var(--mix-blend-color);
}
.close-button.closer::before {
content: "Fermer";
}
.selected .toggle {
display: block;
}
.mix-blend-bg {
inset: 0;
background-color: white;
@ -745,13 +698,7 @@ body[data-template=index] button.next {
nav ul li a {
text-decoration: none;
}
[data-template=home] nav ul li .nav-item-home {
text-decoration: underline;
}
[data-template=index] nav ul li .nav-item-projects {
text-decoration: underline;
}
[data-template=infos] nav ul li .nav-item-about {
body[data-template=home] .nav-item-home {
text-decoration: underline;
}
body[data-template=home] #mobile-menu-wrapper {
@ -761,6 +708,63 @@ body[data-template=index] button.next {
body[data-template=home] header:has(+ main > #mobile-menu.visible) {
display: none;
}
body[data-template=index] .close-button.closer {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2.3 * (var(--line-height-S)));
right: var(--body-margin);
font-size: var(--font-size-L);
cursor: pointer;
mix-blend-mode: difference;
color: var(--mix-blend-color);
}
body[data-template=index] .close-button.closer::before {
content: "Fermer";
}
body[data-template=index] .selected .toggle {
display: block;
}
body[data-template=index] .project-toggler.grid {
grid-template-columns: 2fr 2fr 1fr;
width: 100%;
}
body[data-template=index] .fix {
display: block;
}
body[data-template=index] .fix:hover + .toggle .project-slideshow-container {
display: none;
}
body[data-template=index] header:has(+ main > .projects-index > .selected) {
display: none;
}
body[data-template=index] .project-slideshow-container {
position: fixed;
top: 0;
width: 100vw;
left: 0;
margin: 0;
height: var(--slider-height);
}
body[data-template=index] .project-slideshow-container button.all-projects-closer {
display: none;
}
body[data-template=index] .project-slideshow {
inset: 0;
width: auto;
height: auto;
}
body[data-template=index] .project-slideshow picture,
body[data-template=index] .project-slideshow video.slide {
inset: 0;
position: absolute;
}
body[data-template=index] .project-slideshow picture img,
body[data-template=index] .project-slideshow video.slide {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
body[data-template=index] main {
z-index: 2;
}

4
site/snippets/nav.php
View file

@ -12,10 +12,10 @@
<a class="nav-item-home" href="<?= page('home')->url() ?>"><?= page('home')->title() ?></a>,&nbsp;
</li>
<li>
<a class="nav-item-projects" href="<?= page('index')->url() ?>"><?= page('index')->title() ?></a>,&nbsp;
<a class="nav-item-index" href="<?= page('index')->url() ?>"><?= page('index')->title() ?></a>,&nbsp;
</li>
<li>
<a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
<a class="nav-item-infos" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
</li>
</ul>
</nav>