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

Add scroll-snapping to projects gallery

Browse source
This commit is contained in:
Caleb Denio 2024-06-06 15:06:43 -04:00
parent dce2a75568
commit 97c212f639
No known key found for this signature in database
2 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/slack/project.js
View file

@ -16,7 +16,8 @@ export default function Project({ title, description, color, img, itemId }) {
transformOrigin: 'center',
mr: 16,
// this is v janky please ignore, thank you.
ml: ['1rem', '1rem', '1rem', `${itemId === 0 && 'calc(50vw - 36.5rem)'}`]
ml: ['1rem', '1rem', '1rem', `${itemId === 0 && 'calc(50vw - 36.5rem)'}`],
scrollSnapAlign: 'center'
}}
itemId={itemId}
>

3
pages/slack.js
View file

@ -27,6 +27,7 @@ const SlackPage = () => {
{`
.react-horizontal-scrolling-menu--scroll-container {
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
@ -97,7 +98,7 @@ const SlackPage = () => {
}}
>
<Box onMouseEnter={disableScroll} onMouseLeave={enableScroll}>
<ScrollMenu Footer={Arrows} transitionDuration={900}>
<ScrollMenu Footer={Arrows} transitionBehavior="smooth" noPolyfill>
{projects.map((project, i) => (
<Project
title={project.title}