diff --git a/src/components/Background.js b/src/components/Background.js index 192290b..61c6037 100644 --- a/src/components/Background.js +++ b/src/components/Background.js @@ -1,8 +1,9 @@ import styled from "styled-components"; import FlagRight from "../images/FlagRight.svg"; -import FlagLeft from "../images/FlagRight.svg"; +import FlagLeft from "../images/FlagLeft.svg"; import VoteSignRight from "../images/VoteSignRight.svg"; -import VoteSignLeft from "../images/VoteSignLeft.svg"; +import VoteSignLeft1 from "../images/VoteSignLeft1.svg"; +import VoteSignLeft2 from "../images/VoteSignLeft2.svg"; import FlagHighLow from "../images/FlagHighLow.svg"; import FlagLowHigh from "../images/FlagLowHigh.svg"; @@ -22,10 +23,11 @@ const LeftFlag = styled.div` left: 0; width: 21vw; height: 100%; - background-image: url(${FlagLeft}); - background-repeat: repeat-y; - background-size: 100% 150em; - background-position: left 0; + background-image: url(${FlagLeft}), url(${FlagLeft}); /* Two instances */ + background-repeat: no-repeat, no-repeat; + background-size: 100% 55vh, 100% 55vh; /* Adjusts each flag's size */ + background-position: left 10vh, left 700vh; /* Creates spacing for zig-zag pattern */ + z-index: 20; `; // Right Flag @@ -35,92 +37,109 @@ const RightFlag = styled.div` right: 0; width: 21vw; height: 100%; - background-image: url(${FlagRight}); - background-repeat: repeat-y; - background-size: 100% 150em; - background-position: right 10vh; + background-image: url(${FlagRight}), url(${FlagRight}); /* Two instances */ + background-repeat: no-repeat, no-repeat; + background-size: 100% 55vh, 100% 55vh; /* Adjusts each flag's size */ + background-position: right 50vh, right 850vh; /* Creates spacing for zig-zag pattern */ transform: scaleX(-1); + z-index: 20; `; // Left Vote Sign -const LeftVoteSign = styled.div` +const LeftVoteSign1 = styled.div` position: absolute; - top: 0; + top: 400vh; /* Adjusted to provide spacing and ensure visibility */ left: 0; - width: 20vw; - height: 100%; - background-image: url(${VoteSignLeft}); + width: 20vw; + height: auto; + min-height: 160vh; + background-image: url(${VoteSignLeft1}); background-repeat: repeat-y; - background-size: 100% 160em; - background-position: left 100em; - z-index: 3; /* Set to 3 to be on top of everything */ + background-size: 100% 160vh; /* Scales to maintain spacing */ + background-position: left 10vh; + z-index: 20; /* Above background flags and below article cards */ +`; + +const LeftVoteSign2 = styled.div` + position: absolute; + top: 20vh; /* Adjusted to provide spacing and ensure visibility */ + left: -20vh; + width: 30vw; + height: auto; + min-height: 160vh; + background-image: url(${VoteSignLeft2}); + background-repeat: repeat-y; + background-size: 100% 160vh; /* Scales to maintain spacing */ + background-position: left 10vh; + z-index: 20; /* Above background flags and below article cards */ `; // Right Vote Sign const RightVoteSign = styled.div` position: absolute; - top: 0; + top: 150vh; right: 0; width: 20vw; - height: 100%; + height: auto; + min-height: 160vh; background-image: url(${VoteSignRight}); background-repeat: repeat-y; - background-size: 100% 150em; - background-position: right 200em; + background-size: 100% 160vh; + background-position: right 20vh; + z-index: 20; `; -// Horizontal Flag Strings +// Horizontal Flag Strings (Background layer) const HighLowFlag1 = styled.div` position: absolute; - top: 100em; /* Adjust based on desired layout placement */ + top: 200vh; left: 0; width: 100%; - height: 150vh; /* Adjust to control flag height */ + height: 150vh; background-image: url(${FlagHighLow}); background-repeat: repeat-y; - background-size: cover; - background-position: center; - z-index: 0; /* Set to 1 to be above the background */ + background-size: cover; + background-position: center; + z-index: 0; `; const HighLowFlag2 = styled.div` position: absolute; - bottom: -20em; /* Adjust based on desired layout placement */ + bottom: -20vh; left: 0; width: 100%; - height: 150vh; /* Adjust to control flag height */ + height: 150vh; background-image: url(${FlagHighLow}); background-repeat: repeat-y; - background-size: cover; - background-position: center; - z-index: 0; /* Set to 1 to be above the background */ - + background-size: cover; + background-position: center; + z-index: 0; `; const LowHighFlag1 = styled.div` position: absolute; - top: -5%; + top: -5vh; left: 0; width: 100%; - height: 150vh; /* Adjust to control flag height */ + height: calc(200vh + 300px); background-image: url(${FlagLowHigh}); background-repeat: repeat-y; - background-size: cover; - background-position: center; - z-index: 0; /* Set to 0 to be at the back */ + background-size: cover; + background-position: center; + z-index: 0; `; const LowHighFlag2 = styled.div` position: absolute; - top: 340em; /* Adjust based on desired layout placement */ + top: 400vh; left: 0; width: 100%; - height: 150vh; /* Adjust to control flag height */ + height: calc(200vh + 300px); background-image: url(${FlagLowHigh}); background-repeat: repeat-y; - background-size: cover; - background-position: center; - z-index: 0; /* Set to 1 to be above the background */ + background-size: cover; + background-position: center; + z-index: 0; `; const Background = () => { @@ -128,11 +147,12 @@ const Background = () => { - - + + - - + + + ); diff --git a/src/images/VoteSignLeft1.svg b/src/images/VoteSignLeft1.svg new file mode 100644 index 0000000..ef90cb0 --- /dev/null +++ b/src/images/VoteSignLeft1.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/VoteSignLeft2.svg b/src/images/VoteSignLeft2.svg new file mode 100644 index 0000000..1c113ac --- /dev/null +++ b/src/images/VoteSignLeft2.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file