System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 19:45:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

optimizing the carousel

Browse source
This commit is contained in:
Toby Brown 2024-01-24 21:01:34 +00:00
parent feb25dfe8e
commit 0810b4d7aa
3 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/slack/arrows.js
View file

@ -51,8 +51,7 @@ export default function Arrows() {
display: 'flex',
marginTop: 32,
marginBottom: 32,
position: 'relative',
left: 'calc(26vw + 63rem)'
position: 'relative'
}}
>
<div style={{ display: 'flex' }}>

5
components/slack/project.js
View file

@ -18,12 +18,11 @@ export default function Project({ title, description, color, img, itemId }) {
`linear-gradient(to bottom, ${color[0]}, ${color[1]})`,
color: 'white',
overflow: 'clip',
width: '70rem',
width: ['100vw', '50rem', '70rem'],
height: '100%',
transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
transformOrigin: 'center',
mx: 16,
ml: `${itemId === 0 ? '26vw' : '0'}`
mx: 16
}}
itemId={itemId}
>

26
pages/slack.js
View file

@ -87,18 +87,20 @@ const SlackPage = () => {
onMouseEnter={disableScroll}
onMouseLeave={enableScroll}
>
<ScrollMenu Footer={Arrows} onWheel={onWheel}>
{projects.map(project => (
<Project
title={project.title}
description={project.description}
img={project.img}
color={project.color}
itemId={project.itemId}
key={project.itemId}
/>
))}
</ScrollMenu>
<Box sx={{ ml: ['2vw', '25vw'] }}>
<ScrollMenu Footer={Arrows} onWheel={onWheel}>
{projects.map(project => (
<Project
title={project.title}
description={project.description}
img={project.img}
color={project.color}
itemId={project.itemId}
key={project.itemId}
/>
))}
</ScrollMenu>
</Box>
</Box>
<Container sx={{ py: [4, 5] }}>
<Box sx={{ gap: '2rem', display: ['grid', 'flex'] }}>