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 { body[data-template="index"] {
cursor: pointer; .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 { button.active {
display: none; 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-face {
font-family: "neue-haas-grotesk-display"; font-family: "neue-haas-grotesk-display";
src: src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
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"),
@ -17,8 +16,7 @@
@font-face { @font-face {
font-family: "neue-haas-grotesk-display"; font-family: "neue-haas-grotesk-display";
src: src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
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"),
@ -105,25 +103,6 @@ ul {
z-index: 0; 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 */
.project-slideshow { .project-slideshow {
@ -210,9 +189,6 @@ button.next {
mix-blend-mode: difference; mix-blend-mode: difference;
} }
.fix:hover .slide-number {
}
.toggle { .toggle {
display: none; display: none;
} }
@ -293,9 +269,8 @@ 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( calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(1 / 6 *
1 / 6 * var(--index-width) - var(--body-margin) 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);

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

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

73
assets/css/style.css
View file

@ -106,23 +106,6 @@ ul {
z-index: 0; 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 */
.project-slideshow { .project-slideshow {
width: -moz-fit-content; width: -moz-fit-content;
@ -606,11 +589,26 @@ dialog#mobile-menu-content::backdrop {
float: left; 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; cursor: pointer;
} }
body[data-template=index] .projects-index li.filtered-out {
.projects-index li.filtered-out {
display: none; display: none;
} }
@ -667,7 +665,6 @@ dialog#mobile-menu-content::backdrop {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow: auto;
width: calc(100% - var(--body-margin)); width: calc(100% - var(--body-margin));
padding-top: var(--font-size-XL); padding-top: var(--font-size-XL);
} }
@ -675,30 +672,34 @@ dialog#mobile-menu-content::backdrop {
top: var(--slider-height); top: var(--slider-height);
padding-top: 0; padding-top: 0;
} }
nav.filter-menu { body[data-template=index] ul.filter-menu {
position: sticky; position: fixed;
top: 0; top: var(--slider-height);
padding-top: var(--line-height-S);
margin: 0;
width: 100%; width: 100%;
} margin: 0;
nav.projects-index {
padding-top: var(--line-height-S); 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; display: block;
} }
.fix:hover + .toggle { body[data-template=index] .fix:hover + .toggle {
display: none; display: none;
} }
.selected .fix:hover .slide-number { body[data-template=index] .selected .fix:hover .slide-number {
display: block; display: block;
} }
.slide-number { body[data-template=index] .slide-number {
position: fixed; position: fixed;
top: var(--slider-height); top: var(--slider-height);
margin-top: calc(-2 * (var(--line-height-S))); 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') ?> <?php snippet('header') ?>
<nav class="filter-menu"> <ul class="filter-menu">
<?php foreach ($categories as $key => $category): ?> <?php foreach ($categories as $key => $category): ?>
<li>
<button data-filter="<?= Str::slug($category) ?>"><?= $category ?></button> <button data-filter="<?= Str::slug($category) ?>"><?= $category ?></button>
</li>
<?php endforeach; ?> <?php endforeach; ?>
</nav> </ul>
<nav class="projects-index">
<ul class="projects-index">
<?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?> <?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
<li data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>"> <li data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
<div class="fix"> <div class="fix">
@ -39,7 +42,7 @@
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>
<button class="all-projects-closer"></button> <button class="all-projects-closer"></button>
</nav> </ul>
<script src="/assets/js/router.js"></script> <script src="/assets/js/router.js"></script>
<script src="/assets/js/project-slideshow.js"></script> <script src="/assets/js/project-slideshow.js"></script>