Skip to content

Commit f31e672

Browse files
polmfpolmf
authored
Fixes hero + marges during (#203)
1 parent b67a4e1 commit f31e672

3 files changed

Lines changed: 119 additions & 119 deletions

File tree

‎src/app/components/During.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Section } from "@/app/genericComponents/General";
33
import { Body, SectionTitle } from "@/app/genericComponents/Typography";
44
import {
55
MobileBreakpoint,
6+
MaxScreenSize,
67
SpacingM,
78
SpacingS,
89
} from "@/app/genericComponents/tokens";
@@ -54,6 +55,11 @@ const MapImageBase = styled.img`
5455
max-width: 100vw;
5556
left: 50%;
5657
transform: translateX(-50%);
58+
59+
@media (min-width: ${MaxScreenSize}) {
60+
width: ${MaxScreenSize};
61+
max-width: ${MaxScreenSize};
62+
}
5763
`;
5864

5965
const MobileMapImage = styled(MapImageBase)`

‎src/app/components/Hero.tsx‎

Lines changed: 107 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Image from "next/image";
22
import styled, { keyframes } from "styled-components";
33
import {
4+
MaxScreenSize,
45
MobileBreakpoint,
56
MobileTitleS,
67
SpacingL,
@@ -49,38 +50,40 @@ const flapHidden = keyframes`
4950

5051
const HeroContainer = styled.div`
5152
position: relative;
52-
width: 100vw;
53-
min-height: 180vh;
54-
overflow-x: hidden;
53+
width: 100%;
54+
max-width: ${MaxScreenSize};
55+
margin: 0 auto;
56+
`;
57+
58+
const DragonViewport = styled.div`
59+
position: absolute;
60+
top: 10%;
61+
left: 50%;
62+
width: 0;
63+
height: 0;
64+
z-index: 2;
5565
5666
@media (max-width: ${MobileBreakpoint}) {
57-
min-height: 100vh;
67+
top: 120px;
5868
}
5969
`;
6070

6171
const DragonWrapper = styled.div`
62-
position: absolute;
63-
z-index: 2;
64-
top: 10%;
65-
right: 10%;
72+
position: relative;
6673
width: 250px;
6774
height: 180px;
6875
animation: ${flyRoundTrip} 40s linear infinite;
76+
will-change: transform;
6977
7078
@media (max-width: ${MobileBreakpoint}) {
71-
top: 120px;
72-
right: 10px;
7379
width: 100px;
7480
height: 80px;
7581
}
7682
`;
7783

7884
const DragonFrame = styled.div`
7985
position: absolute;
80-
top: 0;
81-
left: 0;
82-
width: 100%;
83-
height: 100%;
86+
inset: 0;
8487
8588
img {
8689
object-fit: contain;
@@ -114,10 +117,8 @@ const LeftCloud = styled(BaseCloud)`
114117
height: 100px;
115118
116119
@media (max-width: ${MobileBreakpoint}) {
117-
top: 10%;
118-
left: 2%;
119-
width: 120px;
120-
height: 70px;
120+
top: 20%;
121+
left: 3%;
121122
}
122123
`;
123124

@@ -128,10 +129,7 @@ const RightCloud = styled(BaseCloud)`
128129
height: 110px;
129130
130131
@media (max-width: ${MobileBreakpoint}) {
131-
top: 20%;
132-
right: 2%;
133-
width: 100px;
134-
height: 60px;
132+
right: 1%;
135133
}
136134
`;
137135

@@ -166,7 +164,6 @@ const LogoContainer = styled.div`
166164

167165
const DesktopLogo = styled.div`
168166
margin-top: 260px;
169-
display: block;
170167
171168
@media (max-width: ${MobileBreakpoint}) {
172169
display: none;
@@ -184,7 +181,7 @@ const MobileLogo = styled.div`
184181

185182
const CharactersSection = styled.div`
186183
position: relative;
187-
margin-top: 620px;
184+
margin-top: 520px;
188185
margin-bottom: ${SpacingL};
189186
z-index: 3;
190187
@@ -304,102 +301,93 @@ const CharacterLabel = styled.div`
304301

305302
export default function Hero() {
306303
return (
307-
<HeroContainer>
308-
<LeftCloud>
309-
<Image src="/cloud.svg" fill alt="Cloud" />
310-
</LeftCloud>
311-
312-
<CenterCloudLeft>
313-
<Image src="/cloud.svg" fill alt="Cloud" />
314-
</CenterCloudLeft>
315-
316-
<CenterCloudRight>
317-
<Image src="/cloud.svg" fill alt="Cloud" />
318-
</CenterCloudRight>
319-
320-
<RightCloud>
321-
<Image src="/cloud.svg" fill alt="Cloud" />
322-
</RightCloud>
323-
324-
<DragonWrapper>
325-
<DragonFrame>
326-
<Image src="/drac_1.svg" fill alt="Dragon Frame 1" />
327-
</DragonFrame>
328-
<DragonFrame>
329-
<Image src="/drac_2.svg" fill alt="Dragon Frame 2" />
330-
</DragonFrame>
331-
</DragonWrapper>
332-
333-
<LogoContainer>
334-
<DesktopLogo>
335-
<Image
336-
src="/main_logo_desktop.svg"
337-
width={700}
338-
height={260}
339-
alt="Hack UPC"
340-
priority
341-
style={{ maxWidth: "90vw", height: "auto" }}
342-
/>
343-
</DesktopLogo>
344-
345-
<MobileLogo>
346-
<Image
347-
src="/main_logo.svg"
348-
width={550}
349-
height={250}
350-
alt="Hack UPC"
351-
priority
352-
style={{ maxWidth: "90vw", height: "auto" }}
353-
/>
354-
</MobileLogo>
355-
</LogoContainer>
356-
357-
<CharactersSection>
358-
<RibbonContainer>
359-
<RibbonImageWrapper>
304+
<>
305+
<DragonViewport>
306+
<DragonWrapper>
307+
<DragonFrame>
308+
<Image src="/drac_1.svg" fill alt="Dragon Frame 1" />
309+
</DragonFrame>
310+
<DragonFrame>
311+
<Image src="/drac_2.svg" fill alt="Dragon Frame 2" />
312+
</DragonFrame>
313+
</DragonWrapper>
314+
</DragonViewport>
315+
316+
<HeroContainer>
317+
<LeftCloud>
318+
<Image src="/cloud.svg" fill alt="Cloud" />
319+
</LeftCloud>
320+
321+
<CenterCloudLeft>
322+
<Image src="/cloud.svg" fill alt="Cloud" />
323+
</CenterCloudLeft>
324+
325+
<CenterCloudRight>
326+
<Image src="/cloud.svg" fill alt="Cloud" />
327+
</CenterCloudRight>
328+
329+
<RightCloud>
330+
<Image src="/cloud.svg" fill alt="Cloud" />
331+
</RightCloud>
332+
333+
<LogoContainer>
334+
<DesktopLogo>
335+
<Image
336+
src="/main_logo_desktop.svg"
337+
width={700}
338+
height={260}
339+
alt="Hack UPC"
340+
priority
341+
/>
342+
</DesktopLogo>
343+
344+
<MobileLogo>
360345
<Image
361-
src="/choose_character.svg"
362-
fill
363-
alt="Choose Your Character"
364-
style={{ objectFit: "contain" }}
346+
src="/main_logo.svg"
347+
width={374}
348+
height={170}
349+
alt="Hack UPC"
350+
priority
365351
/>
366-
</RibbonImageWrapper>
367-
</RibbonContainer>
368-
369-
<CharacterGrid>
370-
<CharacterCard
371-
href="https://my.hackupc.com/user/signup/hacker/"
372-
target="_blank"
373-
>
374-
<StackedImages>
375-
<ArchBg src="/arch.svg" fill alt="Arch" />
376-
<CharacterImg
377-
src="/cavaller.svg"
378-
width={150}
379-
height={150}
380-
alt="Hacker"
381-
/>
382-
</StackedImages>
383-
<CharacterLabel>HACKER</CharacterLabel>
384-
</CharacterCard>
385-
386-
<CharacterCard
387-
href="https://my.hackupc.com/user/signup/volunteer/"
388-
target="_blank"
389-
>
390-
<StackedImages>
391-
<ArchBg src="/arch.svg" fill alt="Arch" />
392-
<CharacterImg
393-
src="/princesa.svg"
394-
width={150}
395-
height={150}
396-
alt="Volunteer"
397-
/>
398-
</StackedImages>
399-
<CharacterLabel>VOLUNTEER</CharacterLabel>
400-
</CharacterCard>
401-
</CharacterGrid>
402-
</CharactersSection>
403-
</HeroContainer>
352+
</MobileLogo>
353+
</LogoContainer>
354+
355+
<CharactersSection>
356+
<RibbonContainer>
357+
<RibbonImageWrapper>
358+
<Image src="/choose_character.svg" fill alt="Choose character" />
359+
</RibbonImageWrapper>
360+
</RibbonContainer>
361+
362+
<CharacterGrid>
363+
<CharacterCard href="#" target="_blank">
364+
<StackedImages>
365+
<ArchBg src="/arch.svg" fill alt="Arch" />
366+
<CharacterImg
367+
src="/cavaller.svg"
368+
width={150}
369+
height={150}
370+
alt=""
371+
/>
372+
</StackedImages>
373+
<CharacterLabel>HACKER</CharacterLabel>
374+
</CharacterCard>
375+
376+
<CharacterCard href="#" target="_blank">
377+
<StackedImages>
378+
<ArchBg src="/arch.svg" fill alt="Arch" />
379+
<CharacterImg
380+
src="/princesa.svg"
381+
width={150}
382+
height={150}
383+
alt=""
384+
/>
385+
</StackedImages>
386+
<CharacterLabel>VOLUNTEER</CharacterLabel>
387+
</CharacterCard>
388+
</CharacterGrid>
389+
</CharactersSection>
390+
</HeroContainer>
391+
</>
404392
);
405393
}

‎src/app/globals.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ body {
1818
background-image: url("/maons.svg");
1919
background-repeat: repeat;
2020

21+
@media (min-width: 2300px) {
22+
background-repeat: no-repeat;
23+
background-position: center top;
24+
background-size: cover;
25+
}
26+
2127
@media (max-width: 640px) {
2228
background-image: url("/maons_mobile.svg");
2329
}

0 commit comments

Comments
 (0)