Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-05 23:43:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: fix header waves being cut

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2019-10-08 23:34:54 -04:00
parent 09a56b03dc
commit df46c3e802
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/styles.tsx
+2 -1
View File
@@ -11,10 +11,10 @@ export const HeaderWrapper = styled.header`
position: relative; position: relative;
min-height: auto; min-height: auto;
background: #121240; background: #121240;
overflow: hidden;
&.is-home { &.is-home {
min-height: 100vh; min-height: 100vh;
overflow: hidden;
} }
` `
@@ -60,6 +60,7 @@ export const FadedBottomWave = styled.div`
right: 0; right: 0;
transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s;
opacity: 0; opacity: 0;
pointer-events: none;
svg { svg {
position: static; position: static;
src/components/Waves/styles.tsx
+8 -6
View File
@@ -1,19 +1,21 @@
import styled from "styled-components" import styled, { css } from "styled-components"
import WavesBottom from "../../images/waves-bot.svg" import WavesBottom from "../../images/waves-bot.svg"
import WavesTop from "../../images/waves-top.svg" import WavesTop from "../../images/waves-top.svg"
export const StyledWavesTop = styled(WavesTop)` const waves = css`
opacity: 0.5; opacity: 0.5;
width: 100vw; width: 100vw;
max-width: 100%; max-width: 100%;
position: absolute; position: absolute;
pointer-events: none;
`
export const StyledWavesTop = styled(WavesTop)`
${waves};
top: 0; top: 0;
` `
export const StyledWavesBottom = styled(WavesBottom)` export const StyledWavesBottom = styled(WavesBottom)`
opacity: 0.5; ${waves};
width: 100vw;
max-width: 100%;
position: absolute;
bottom: 0; bottom: 0;
` `