refactor: improve top position calculation in stylesheets (#302)

* refactor: improve top position calculation in stylesheets

- Update the top position calculation in the `_collection.scss` file

* refactor: tweak it harder

* Revert "refactor: tweak it harder"

This reverts commit b7bf7e50f8.
This commit is contained in:
Spedon
2024-03-17 16:15:13 +08:00
committed by GitHub
parent 7b637637a1
commit d7e7fc68ba
2 changed files with 4 additions and 4 deletions

View File

@@ -3,12 +3,12 @@
flex-direction: column; flex-direction: column;
gap: 20vh; gap: 20vh;
padding-top: 50vh; padding-top: calc(var(--window-height) * 0.4);
margin-top: calc(var(--nav-height) * -1); margin-top: calc(var(--nav-height) * -1);
img { img {
position: sticky; position: sticky;
top: 50vh; top: calc(var(--window-height) * 0.4);
width: 60vw; width: 60vw;
height: 20vh; height: 20vh;
@@ -19,7 +19,7 @@
align-self: center; align-self: center;
&:last-child { &:last-child {
margin-bottom: 20vh; margin-bottom: calc(var(--window-height) * 0.35);
} }
} }
} }

View File

@@ -116,7 +116,7 @@ export default function Collection(props: {
data-src={ij.loUrl} data-src={ij.loUrl}
alt={ij.alt} alt={ij.alt}
style={{ style={{
transform: `translate3d(${i() !== 0 ? getRandom(-25, 25) : 0}%, ${i() !== 0 ? getRandom(-30, 30) : 0}%, 0)` transform: `translate3d(${i() !== 0 ? getRandom(-25, 25) : 0}%, ${i() !== 0 ? getRandom(-35, 35) : 0}%, 0)`
}} }}
onClick={() => { onClick={() => {
handleClick(i()) handleClick(i())