diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx index e779dd1..e7ef3c0 100644 --- a/src/components/Header/styles.tsx +++ b/src/components/Header/styles.tsx @@ -11,10 +11,10 @@ export const HeaderWrapper = styled.header` position: relative; min-height: auto; background: #121240; - overflow: hidden; &.is-home { min-height: 100vh; + overflow: hidden; } ` @@ -60,6 +60,7 @@ export const FadedBottomWave = styled.div` right: 0; transition: opacity 0.5s, transform 0.5s; opacity: 0; + pointer-events: none; svg { position: static; diff --git a/src/components/Waves/styles.tsx b/src/components/Waves/styles.tsx index 64efb91..8d798cb 100644 --- a/src/components/Waves/styles.tsx +++ b/src/components/Waves/styles.tsx @@ -1,19 +1,21 @@ -import styled from "styled-components" +import styled, { css } from "styled-components" import WavesBottom from "../../images/waves-bot.svg" import WavesTop from "../../images/waves-top.svg" -export const StyledWavesTop = styled(WavesTop)` +const waves = css` opacity: 0.5; width: 100vw; max-width: 100%; position: absolute; + pointer-events: none; +` + +export const StyledWavesTop = styled(WavesTop)` + ${waves}; top: 0; ` export const StyledWavesBottom = styled(WavesBottom)` - opacity: 0.5; - width: 100vw; - max-width: 100%; - position: absolute; + ${waves}; bottom: 0; `