refactor: improve top position calculation in stylesheets

- Update the top position calculation in the `_collection.scss` file
This commit is contained in:
Spedon Wen
2024-03-17 15:43:17 +08:00
committed by Sped0n
parent 7b637637a1
commit f56bc882db
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())