diff --git a/public/assets/icons/menu.svg b/public/assets/icons/menu.svg index 967ecdd2..e8200918 100644 --- a/public/assets/icons/menu.svg +++ b/public/assets/icons/menu.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/assets/mobile/about/background.png b/public/assets/mobile/about/background.png new file mode 100644 index 00000000..a0f1c8e2 Binary files /dev/null and b/public/assets/mobile/about/background.png differ diff --git a/public/assets/mobile/countdown/background.png b/public/assets/mobile/countdown/background.png new file mode 100644 index 00000000..1ff52b3a Binary files /dev/null and b/public/assets/mobile/countdown/background.png differ diff --git a/public/assets/mobile/countdown/background.svg b/public/assets/mobile/countdown/background.svg deleted file mode 100644 index 9c83004f..00000000 --- a/public/assets/mobile/countdown/background.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/countdown/foreground_tall.svg b/public/assets/mobile/countdown/foreground_tall.svg deleted file mode 100644 index ce891773..00000000 --- a/public/assets/mobile/countdown/foreground_tall.svg +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/hero/background.png b/public/assets/mobile/hero/background.png new file mode 100644 index 00000000..2229e212 Binary files /dev/null and b/public/assets/mobile/hero/background.png differ diff --git a/public/assets/mobile/hero/background.svg b/public/assets/mobile/hero/background.svg deleted file mode 100644 index 99e1a8c0..00000000 --- a/public/assets/mobile/hero/background.svg +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/hero/foreground.svg b/public/assets/mobile/hero/foreground.svg deleted file mode 100644 index 4112db7e..00000000 --- a/public/assets/mobile/hero/foreground.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/hero/foreground_tall.svg b/public/assets/mobile/hero/foreground_tall.svg deleted file mode 100644 index 6779913c..00000000 --- a/public/assets/mobile/hero/foreground_tall.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/hero/midground.svg b/public/assets/mobile/hero/midground.svg deleted file mode 100644 index 2b9f22c0..00000000 --- a/public/assets/mobile/hero/midground.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/stats/background.png b/public/assets/mobile/stats/background.png new file mode 100644 index 00000000..12c2a2a5 Binary files /dev/null and b/public/assets/mobile/stats/background.png differ diff --git a/public/assets/mobile/stats/background.svg b/public/assets/mobile/stats/background.svg deleted file mode 100644 index d6fe5851..00000000 --- a/public/assets/mobile/stats/background.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/stats/flying.svg b/public/assets/mobile/stats/flying.svg deleted file mode 100644 index 89c7988b..00000000 --- a/public/assets/mobile/stats/flying.svg +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/stats/foreground.png b/public/assets/mobile/stats/foreground.png new file mode 100644 index 00000000..e7978bf0 Binary files /dev/null and b/public/assets/mobile/stats/foreground.png differ diff --git a/public/assets/mobile/stats/static.svg b/public/assets/mobile/stats/static.svg deleted file mode 100644 index 84d01d3d..00000000 --- a/public/assets/mobile/stats/static.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/mobile/stats/stems.svg b/public/assets/mobile/stats/stems.svg new file mode 100644 index 00000000..6aeebb3a --- /dev/null +++ b/public/assets/mobile/stats/stems.svg @@ -0,0 +1,477 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index f8bde9f6..6c07ca9a 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -112,7 +112,7 @@ const DropDownContentContainer = styled.div` align-items: center; gap: 24px; width: 100%; - background: #002F4D; + background: #150C27; ` const PortalButtonContainer = styled.div` diff --git a/src/components/Stats.jsx b/src/components/Stats.jsx index 61a07ea7..6bd35f51 100644 --- a/src/components/Stats.jsx +++ b/src/components/Stats.jsx @@ -24,10 +24,8 @@ const BgSectionContainer = styled(SectionContainer)` z-index: 15; overflow: hidden; - ${p => p.theme.mediaQueries.mobile} { - background: url('assets/mobile/stats/static.svg'); - - aspect-ratio: 428/1129; + ${p => p.theme.mediaQueries.mobile} { + aspect-ratio: 412/709; } ` @@ -45,7 +43,9 @@ const BgScroll = styled(SectionContainer)` z-index: 10; ${(p) => p.theme.mediaQueries.mobile} { - background: none; + background: url('assets/mobile/stats/background.png'); + background-repeat: no-repeat; + background-size: 100vw; } ` @@ -63,8 +63,12 @@ const Stems = styled(SectionContainer)` z-index: 12; ${(p) => p.theme.mediaQueries.mobile} { - background: none; - z-index: -1; + background: url('assets/mobile/stats/stems.svg'); + background-repeat: no-repeat; + background-size: 100vw; + transform: scale(1.4); + left: 5px; + top: 67%; } ` @@ -81,7 +85,10 @@ const FgScroll = styled(SectionContainer)` z-index: 98; ${(p) => p.theme.mediaQueries.mobile} { - display: none; + background: url('assets/mobile/stats/foreground.png'); + background-repeat: no-repeat; + background-size: 100vw; + background-position: center bottom; } ` @@ -95,6 +102,10 @@ const ContentInner = styled.div` padding-top: 4.5rem; overflow-x: hidden; z-index: 99; + + ${(p) => p.theme.mediaQueries.mobile} { + padding-top: 2.5rem; + } ` const StyledTitle = styled(Header2)` @@ -103,8 +114,7 @@ const StyledTitle = styled(Header2)` font-size: 3.75vw; ${(p) => p.theme.mediaQueries.mobile} { - font-size: 2em; - display: none; + font-size: 1.5rem; } ` @@ -113,6 +123,11 @@ const StatsGrid = styled.div` grid-template-columns: repeat(2, 1fr); margin: 4rem 40% 0; gap: 2rem; + + ${(p) => p.theme.mediaQueries.mobile} { + margin: 3.5rem 35% 0; + gap: 2.5rem; + } ` const StatTop = styled.div` @@ -124,6 +139,11 @@ const StatTop = styled.div` word-spacing: 200px; max-width: 200px; line-height: 33px; + + ${(p) => p.theme.mediaQueries.mobile} { + font-size: 0.55rem; + line-height: 10px; + } ` const StatBottom = styled.div` @@ -135,12 +155,21 @@ const StatBottom = styled.div` word-spacing: 200px; max-width: 200px; line-height: 33px; + + ${(p) => p.theme.mediaQueries.mobile} { + font-size: 0.55rem; + line-height: 10px; + } ` const Number = styled.div` font-size: 3.75vw; font-weight: 900; margin-bottom: 0.5rem; + + ${(p) => p.theme.mediaQueries.mobile} { + font-size: 1.5rem; + } ` const scroll = keyframes` @@ -151,6 +180,15 @@ const scroll = keyframes` transform: translateX(-2568.38px); } ` + +const mobileScroll = keyframes` + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-1120.92px); + } +` // animation translation matches full width of images + gap const Gallery = styled.div` @@ -160,6 +198,12 @@ const Gallery = styled.div` position: absolute; top: 73.5%; z-index: 97; + + ${(p) => p.theme.mediaQueries.mobile} { + height: 20%; + top: 80%; + animation: ${mobileScroll} 40s linear infinite; + } ` const GalleryImage = styled.img` diff --git a/src/sections/Count.jsx b/src/sections/Count.jsx index 1d6f8d2b..a9d4c29b 100644 --- a/src/sections/Count.jsx +++ b/src/sections/Count.jsx @@ -14,9 +14,8 @@ const InfoContainer = styled.div` overflow: hidden; ${(p) => p.theme.mediaQueries.mobile} { - background: linear-gradient(to bottom, #FEFFCA 0%, #83F6F7 100%); background-repeat: no-repeat; - aspect-ratio: 428/860; + aspect-ratio: 428/724; } ` @@ -32,8 +31,9 @@ const BgScroll = styled(SectionContainer)` height: 100%; ${(p) => p.theme.mediaQueries.mobile} { - background: url('assets/mobile/countdown/background.svg'); + background: url('assets/mobile/countdown/background.png'); background-repeat: no-repeat; + background-size: 100vw; } ` @@ -49,6 +49,12 @@ const Mascots = styled(SectionContainer)` left: 0px; width: 100%; height: 100%; + + ${(p) => p.theme.mediaQueries.mobile} { + background-size: 120vw; + left: 10vw; + top: 60vw; + } ` const TextContainer = styled.div` @@ -63,8 +69,7 @@ const TextContainer = styled.div` padding: 0em 50vw 47.5vw 7vw; ${(p) => p.theme.mediaQueries.mobile} { - margin: 0em 1em; - padding: 5em 0em 0em; + padding: 0; } ` @@ -80,6 +85,12 @@ const StyledTitle = styled(Header2)` ${(p) => p.theme.mediaQueries.mobile} { font-size: 2em; padding-bottom: 3rem; + line-height: 36px; + max-width: 50vw; + text-align: center; + position: absolute; + top: 25px; + left: 25%; } ` @@ -91,6 +102,11 @@ const DaysTextContainer = styled.div` left: 43%; transform: rotate(-10.92deg); + ${(p) => p.theme.mediaQueries.mobile} { + transform: rotate(15.53deg); + top: 19%; + left: 7.5%; + } ` const HoursTextContainer = styled.div` @@ -100,6 +116,12 @@ const HoursTextContainer = styled.div` top: 37.5%; left: 53.5%; transform: rotate(17.73deg); + + ${(p) => p.theme.mediaQueries.mobile} { + transform: rotate(21.61deg); + top: 57.5%; + left: 30%; + } ` const MinutesTextContainer = styled.div` @@ -109,6 +131,11 @@ const MinutesTextContainer = styled.div` top: 20%; left: 83.5%; transform: rotate(-23.75deg); + + ${(p) => p.theme.mediaQueries.mobile} { + top: 30%; + left: 52.5%; + } ` const ShadowText = styled.div` @@ -122,7 +149,7 @@ const ShadowText = styled.div` letter-spacing: 1px; ${(p) => p.theme.mediaQueries.mobile} { - font-size: 3rem; + font-size: 2rem; } ` diff --git a/src/sections/Info.jsx b/src/sections/Info.jsx index 63e5df28..261b3d34 100644 --- a/src/sections/Info.jsx +++ b/src/sections/Info.jsx @@ -16,9 +16,8 @@ const InfoContainer = styled.div` ${(p) => p.theme.mediaQueries.mobile} { - background: url('assets/mobile/about/foreground_frame.svg'), linear-gradient(to bottom, #83F6F7, #A9D7EF); background-repeat: no-repeat; - aspect-ratio: 428/1450; + aspect-ratio: 412/871; } ` @@ -36,7 +35,9 @@ const BgScroll = styled(SectionContainer)` ${(p) => p.theme.mediaQueries.mobile} { - background: none; + background: url('assets/mobile/about/background.png'); + background-repeat: no-repeat; + background-size: 100vw; } ` @@ -55,9 +56,9 @@ const TextContainer = styled.div` z-index: 2; ${(p) => p.theme.mediaQueries.mobile} { - margin: 0em 3em; - padding: 5em 0em 0em; - display: none; + margin: 0 3.2em; + padding: 0; + height: 50%; } ` @@ -68,13 +69,19 @@ const StyledTitle = styled(Header2)` line-height: 100%; ${(p) => p.theme.mediaQueries.mobile} { - font-size: 2em; + font-size: 1.75em; + width: 100%; + text-align: center; } ` const PushinP = styled.p` color: #F0EEF2; font-size: 1.45vw; + + ${(p) => p.theme.mediaQueries.mobile} { + font-size: 1rem; + } ` const FishingBear = styled.div` @@ -88,6 +95,12 @@ const FishingBear = styled.div` left 4.75vw; width: 100%; height: 100%; + + ${(p) => p.theme.mediaQueries.mobile} { + background-size: 67.5vw; + left: -30px; + top: -25px; + } ` const Info = () => { diff --git a/src/sections/Register.jsx b/src/sections/Register.jsx index 17183f2d..b31c11fd 100644 --- a/src/sections/Register.jsx +++ b/src/sections/Register.jsx @@ -20,7 +20,7 @@ const BgSectionContainer = styled(SectionContainer)` background: #150C27; background-repeat: no-repeat; text-align: center; - aspect-ratio: 428/1082; + aspect-ratio: 412/843; } ` const BgScroll = styled(SectionContainer)` @@ -36,8 +36,9 @@ const BgScroll = styled(SectionContainer)` z-index: 1; ${p => p.theme.mediaQueries.mobile} { - background: url('assets/mobile/hero/background.svg'); + background: url('assets/mobile/hero/background.png'); background-repeat: no-repeat; + background-size: 100vw; z-index: -1; } ` @@ -55,9 +56,10 @@ const Portal = styled(SectionContainer)` z-index: 2; ${p => p.theme.mediaQueries.mobile} { - background: url('assets/mobile/hero/midground.svg'); - background-position: center top; - background-repeat: no-repeat; + background-position: center center; + background-size: 150vw; + left: 0; + top: 175px; } ` @@ -77,7 +79,8 @@ const MediaContainer = styled.div` height: 100%; align-items: center; justify-content: center; - transform: translateY(-7rem); + transform: translateY(-8rem); + padding: 0; } ` @@ -93,6 +96,10 @@ const BodyContainer = styled.div` const ButtonContainer = styled.div` display: flex; margin-top: 20px; + ${p => p.theme.mediaQueries.mobile} { + flex-direction: column; + margin-top: 5px; + } ` const GridContainer = styled.div` @@ -116,7 +123,9 @@ const HackCampHeader = styled(Header2)` padding-bottom: 0.5vw; ${p => p.theme.mediaQueries.mobile} { - font-size: 4rem; + font-size: 3.5rem; + padding-top: 1.5rem; + padding-bottom: 0; } ` @@ -126,8 +135,11 @@ const HackCampSubheader = styled.div` font-weight: 600; color: #D5D7FD; padding-top: 1rem; + ${p => p.theme.mediaQueries.mobile} { - font-size: 1.2rem; + font-size: 1rem; + padding-top: 0; + line-height: 1.5rem; } ` @@ -137,7 +149,9 @@ const HCSub = styled.div` font-weight: 700; padding-top: 1rem; ${p => p.theme.mediaQueries.mobile} { - font-size: 1rem; + font-size: 0.8rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } `