diff --git a/src/features/navigation/components/Navigation.tsx b/src/features/navigation/components/Navigation.tsx index 067e470..30e6b6a 100644 --- a/src/features/navigation/components/Navigation.tsx +++ b/src/features/navigation/components/Navigation.tsx @@ -24,18 +24,18 @@ const Navigation = () => ( - + - + - + diff --git a/src/features/shows/components/card/TallCardCollection.tsx b/src/features/shows/components/card/TallCardCollection.tsx index 4f3dca5..ef16af1 100644 --- a/src/features/shows/components/card/TallCardCollection.tsx +++ b/src/features/shows/components/card/TallCardCollection.tsx @@ -15,6 +15,18 @@ const StyledWrapper = styled(({ scroll, ...props }: WrapperProps) => ( padding: ${({ theme }) => theme.spacing(1)}; border-radius: ${({ theme }) => theme.shape.borderRadius}px; margin-inline: -${({ theme }) => theme.spacing(0.75)}; + background-image: linear-gradient(to right, white, white), + linear-gradient(to right, white, white), + linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)), + linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)); + + background-position: left center, right center, left center, right center; + background-repeat: no-repeat; + background-color: white; + background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%; + + /* Opera doesn't support this in the shorthand */ + background-attachment: local, local, scroll, scroll; ${({ theme, scroll }) => scroll