mobile > index > slideshow : fix layout Safari problem
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
This commit is contained in:
isUnknown
parent
0badd67b46
commit
06fc040f80
6 changed files with 111 additions and 113 deletions
|
|
@ -1,3 +1,21 @@
|
|||
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;
|
||||
|
||||
button.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.projects-index summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -5,3 +23,4 @@
|
|||
.projects-index li.filtered-out {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,23 +66,28 @@
|
|||
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.filter-menu:has(+ ul li.selected) {
|
||||
}
|
||||
|
||||
nav.projects-index {
|
||||
margin: 0;
|
||||
padding-top: var(--line-height-S);
|
||||
}
|
||||
|
||||
ul.projects-index {
|
||||
position: absolute;
|
||||
width: calc(100vw - (var(--body-margin) * 3));
|
||||
top: var(--slider-height);
|
||||
|
||||
box-sizing: border-box;
|
||||
width: calc(100vw - calc(var(--body-margin) * 2));
|
||||
height: calc(100vh - var(--slider-height));
|
||||
overflow: auto;
|
||||
padding-bottom: var(--font-size-XL);
|
||||
|
||||
padding-right: 1.5rem;
|
||||
padding-top: calc((var(--line-height-S) * 5));
|
||||
padding-bottom: calc(var(--font-size-XL));
|
||||
}
|
||||
|
||||
.selected .fix:hover + .toggle {
|
||||
|
|
@ -110,6 +109,7 @@
|
|||
left: var(--body-margin);
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -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)));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue