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

mobile > index > slideshow : fix layout Safari problem
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
Details

Browse source
This commit is contained in:
isUnknown 2026-06-05 14:15:10 +02:00
parent 0badd67b46
commit 06fc040f80
6 changed files with 111 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,26 @@
.projects-index summary {
cursor: pointer;
}
body[data-template="index"] {
.filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
line-height: normal;
.projects-index li.filtered-out {
display: none;
button.active {
text-decoration: underline;
}
}
.projects-index summary {
cursor: pointer;
}
.projects-index li.filtered-out {
display: none;
}
}

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

@ -2,8 +2,7 @@
@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"),
@ -17,8 +16,7 @@
@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"),
@ -105,25 +103,6 @@ ul {
z-index: 0;
}
nav {
&.filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
line-height: normal;
a {
text-decoration: none;
}
}
}
/* PROJECT SLIDESHOW */
.project-slideshow {
@ -210,9 +189,6 @@ button.next {
mix-blend-mode: difference;
}
.fix:hover .slide-number {
}
.toggle {
display: none;
}
@ -293,9 +269,8 @@ 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);

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

@ -6,9 +6,6 @@
--font-size-S: 0.75rem;
}
body {
}
.project-slideshow-container {
position: fixed;
top: 0;
@ -46,9 +43,6 @@
line-height: 0.75;
}
.project-index :has(.selected) {
}
.project-toggler.grid {
grid-template-columns: 2fr 2fr 1fr;
width: 100%;
@ -62,7 +56,7 @@
position: fixed;
top: 0;
bottom: 0;
overflow: auto;
width: calc(100% - var(--body-margin));
padding-top: var(--font-size-XL);
}
@ -72,43 +66,49 @@
padding-top: 0;
}
nav.filter-menu {
position: sticky;
top: 0;
padding-top: var(--line-height-S);
margin: 0;
width: 100%;
}
body[data-template="index"] {
ul.filter-menu {
position: fixed;
top: var(--slider-height);
width: 100%;
nav.filter-menu:has(+ ul li.selected) {
}
margin: 0;
padding-top: var(--line-height-S);
}
nav.projects-index {
padding-top: var(--line-height-S);
position: absolute;
width: calc(100vw - (var(--body-margin) * 3));
overflow: auto;
padding-bottom: var(--font-size-XL);
}
ul.projects-index {
position: absolute;
top: var(--slider-height);
.selected .fix:hover + .toggle {
display: block;
}
box-sizing: border-box;
width: calc(100vw - calc(var(--body-margin) * 2));
height: calc(100vh - var(--slider-height));
overflow: auto;
.fix:hover + .toggle {
display: none;
}
padding-right: 1.5rem;
padding-top: calc((var(--line-height-S) * 5));
padding-bottom: calc(var(--font-size-XL));
}
.selected .fix:hover .slide-number {
display: block;
}
.selected .fix:hover + .toggle {
display: block;
}
.slide-number {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2 * (var(--line-height-S)));
left: var(--body-margin);
padding-right: 0;
.fix:hover + .toggle {
display: none;
}
.selected .fix:hover .slide-number {
display: block;
}
.slide-number {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2 * (var(--line-height-S)));
left: var(--body-margin);
padding-right: 0;
}
}
.main-menu {

73
assets/css/style.css
View file

@ -106,23 +106,6 @@ ul {
z-index: 0;
}
nav.filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
-moz-column-gap: calc(2 * var(--body-margin));
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
line-height: normal;
}
nav.filter-menu a {
text-decoration: none;
}
/* PROJECT SLIDESHOW */
.project-slideshow {
width: -moz-fit-content;
@ -606,11 +589,26 @@ dialog#mobile-menu-content::backdrop {
float: left;
}
.projects-index summary {
body[data-template=index] .filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
-moz-column-gap: calc(2 * var(--body-margin));
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
line-height: normal;
}
body[data-template=index] .filter-menu button.active {
text-decoration: underline;
}
body[data-template=index] .projects-index summary {
cursor: pointer;
}
.projects-index li.filtered-out {
body[data-template=index] .projects-index li.filtered-out {
display: none;
}
@ -667,7 +665,6 @@ dialog#mobile-menu-content::backdrop {
position: fixed;
top: 0;
bottom: 0;
overflow: auto;
width: calc(100% - var(--body-margin));
padding-top: var(--font-size-XL);
}
@ -675,30 +672,34 @@ dialog#mobile-menu-content::backdrop {
top: var(--slider-height);
padding-top: 0;
}
nav.filter-menu {
position: sticky;
top: 0;
padding-top: var(--line-height-S);
margin: 0;
body[data-template=index] ul.filter-menu {
position: fixed;
top: var(--slider-height);
width: 100%;
}
nav.projects-index {
margin: 0;
padding-top: var(--line-height-S);
position: absolute;
width: calc(100vw - var(--body-margin) * 3);
overflow: auto;
padding-bottom: var(--font-size-XL);
}
.selected .fix:hover + .toggle {
body[data-template=index] ul.projects-index {
position: absolute;
top: var(--slider-height);
box-sizing: border-box;
width: calc(100vw - var(--body-margin) * 2);
height: calc(100vh - var(--slider-height));
overflow: auto;
padding-right: 1.5rem;
padding-top: calc(var(--line-height-S) * 5);
padding-bottom: calc(var(--font-size-XL));
}
body[data-template=index] .selected .fix:hover + .toggle {
display: block;
}
.fix:hover + .toggle {
body[data-template=index] .fix:hover + .toggle {
display: none;
}
.selected .fix:hover .slide-number {
body[data-template=index] .selected .fix:hover .slide-number {
display: block;
}
.slide-number {
body[data-template=index] .slide-number {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2 * (var(--line-height-S)));

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

File diff suppressed because one or more lines are too long

11
site/templates/index.php
View file

@ -1,11 +1,14 @@
<?php snippet('header') ?>
<nav class="filter-menu">
<ul class="filter-menu">
<?php foreach ($categories as $key => $category): ?>
<li>
<button data-filter="<?= Str::slug($category) ?>"><?= $category ?></button>
</li>
<?php endforeach; ?>
</nav>
<nav class="projects-index">
</ul>
<ul class="projects-index">
<?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
<li data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
<div class="fix">
@ -39,7 +42,7 @@
</li>
<?php endforeach; ?>
<button class="all-projects-closer"></button>
</nav>
</ul>
<script src="/assets/js/router.js"></script>
<script src="/assets/js/project-slideshow.js"></script>