From 8bcbb64a01fb70697514a410014f6bd188a290d3 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 12 Dec 2018 17:14:53 +0100
Subject: Fix full width slider

---
 packages/website/ts/@next/components/slider/slider.tsx |  1 -
 packages/website/ts/@next/pages/why.tsx                | 15 ++++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx
index 61e80ebd2..710351566 100644
--- a/packages/website/ts/@next/components/slider/slider.tsx
+++ b/packages/website/ts/@next/components/slider/slider.tsx
@@ -65,7 +65,6 @@ const StyledSlider = styled.div`
     }
 
     .carousel {
-        position: relative;
         display: block;
         user-select: none;
         touch-action: pan-y;
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 11b8928d9..7b30cd25a 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -150,7 +150,7 @@ export class NextWhy extends React.PureComponent {
                                 ))}
                             </SectionWrap>
 
-                            <SectionWrap id="cases">
+                            <SectionWrap id="cases" isNotRelative={true}>
                                 <Heading size="medium">Use Cases</Heading>
                                 <Slider>
                                     {_.map(useCaseSlides, (item, index) => (
@@ -192,8 +192,12 @@ export class NextWhy extends React.PureComponent {
     }
 }
 
-const SectionWrap = styled.div`
-    position: relative;
+interface SectionProps {
+    isNotRelative?: boolean;
+}
+
+const SectionWrap = styled.div<SectionProps>`
+    position: ${props => !props.isNotRelative && 'relative'};
 
     & + & {
         padding-top: 60px;
@@ -236,11 +240,12 @@ const NavStickyWrap = styled(WrapSticky)`
 const ChapterLink = styled(AnchorLink)`
     color: ${props => props.theme.textColor};
     font-size: 22px;
-    margin-bottom: 15px;
+    margin-bottom: 25px;
     display: block;
     opacity: 0.8;
 
-    &:hover {
+    &:hover,
+    &:active {
         opacity: 1;
     }
 `;
-- 
cgit