Skip to content

Commit ec8eef8

Browse files
enric4000enric4000
authored
Ocultat ministeri i taller de so (#209)
1 parent ba11498 commit ec8eef8

2 files changed

Lines changed: 95 additions & 26 deletions

File tree

‎src/app/components/During.tsx‎

Lines changed: 93 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const TextWrapper = styled.div`
3131
justify-content: center;
3232
gap: ${SpacingS};
3333
display: inline-flex;
34-
margin-top: ${SpacingM};
34+
margin-top: ${SpacingS};
3535
margin-bottom: ${SpacingS};
3636
`;
3737

@@ -46,6 +46,15 @@ const TheMission = styled.div`
4646
flex-direction: column;
4747
position: relative;
4848
text-align: center;
49+
padding: 0 150px 0 150px;
50+
51+
@media (min-width: ${MobileBreakpoint}) and (max-width: 1000px) {
52+
padding: 0 15% 0 15%;
53+
}
54+
55+
@media (max-width: ${MobileBreakpoint}) {
56+
padding: 0;
57+
}
4958
`;
5059

5160
const MapImageBase = styled.img`
@@ -79,6 +88,76 @@ const DesktopMapImage = styled(MapImageBase)`
7988
}
8089
`;
8190

91+
export const RibbonTitle = styled(SectionTitle)`
92+
position: relative;
93+
color: #000000;
94+
width: fit-content;
95+
margin: 0 auto 45px auto;
96+
padding: 8px 32px 24px 32px;
97+
font-size: 32px;
98+
background-color: rgba(238, 228, 194, 1);
99+
text-align: center;
100+
justify-content: center;
101+
align-items: center;
102+
103+
/* Left */
104+
&::before {
105+
content: "";
106+
position: absolute;
107+
bottom: -20px;
108+
left: -100px;
109+
width: 40%;
110+
height: 80%;
111+
background-color: #a19673ff;
112+
z-index: -1;
113+
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20% 50%);
114+
}
115+
116+
/* Right */
117+
&::after {
118+
content: "";
119+
position: absolute;
120+
bottom: -20px;
121+
right: -100px;
122+
width: 40%;
123+
height: 80%;
124+
background-color: #a19673ff;
125+
z-index: -1;
126+
clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%);
127+
}
128+
129+
@media (max-width: 1000px and min-width: ${MobileBreakpoint}) {
130+
&::before {
131+
left: -100px;
132+
width: 50%;
133+
height: 50%;
134+
}
135+
136+
/* Right */
137+
&::after {
138+
right: -100px;
139+
width: 50%;
140+
height: 50%;
141+
}
142+
}
143+
@media (max-width: ${MobileBreakpoint}) {
144+
&::before {
145+
display: none;
146+
left: -75px;
147+
width: 50%;
148+
height: 60%;
149+
}
150+
151+
/* Right */
152+
&::after {
153+
display: none;
154+
right: -75px;
155+
width: 50%;
156+
height: 60%;
157+
}
158+
}
159+
`;
160+
82161
export default function During() {
83162
return (
84163
<DuringContainer id="during">
@@ -93,17 +172,19 @@ export default function During() {
93172
<DesktopMapImage src="/map_desktop.svg" alt="Map Desktop" />
94173

95174
<TheMission>
96-
<TextWrapper>
97-
<StyledTitle className={lora.className}>
98-
THE MISSION: HACKUPC
99-
</StyledTitle>
100-
</TextWrapper>
101-
<Body>
102-
Your weekend quest awaits! This year, HackUPC becomes a medieval
103-
adventure filled with challenges to conquer. Forge your own path by
104-
overcoming mighty trials, and see if you can rise as a true hero. Will
105-
your legend be told in generations?
106-
</Body>
175+
<RibbonTitle className={lora.className}>
176+
<TextWrapper>
177+
<StyledTitle className={lora.className}>
178+
THE MISSION: HACKUPC
179+
</StyledTitle>
180+
</TextWrapper>
181+
<Body>
182+
Your weekend quest awaits! This year, HackUPC becomes a medieval
183+
adventure filled with challenges to conquer. Forge your own path by
184+
overcoming mighty trials, and see if you can rise as a true hero.
185+
Will your legend be told in generations?
186+
</Body>
187+
</RibbonTitle>
107188
</TheMission>
108189
</DuringContainer>
109190
);

‎src/app/components/SponsorsAndPartners.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -191,24 +191,12 @@ export default function SponsorsAndPartners() {
191191
/>
192192
</MiliBox>
193193
<MiliBox>
194-
<SponsorLogo
195-
imageSrc={"/Partners/tallerdeso.png"}
196-
imageAlt={"Taller De So"}
197-
sponsorLink={"https://www.instagram.com/tallerdeso"}
198-
smallPadding
199-
/>
194+
<SponsorUnrevealed />
200195
</MiliBox>
201196
</SponsorRow>
202197
<SponsorRow>
203198
<MiliBox>
204-
<SponsorLogo
205-
imageSrc={"/Partners/ministerio.png"}
206-
imageAlt={"Ministerio"}
207-
sponsorLink={
208-
"https://www.www.siemens-energy.com/global/en/home.html"
209-
}
210-
smallPadding
211-
/>
199+
<SponsorUnrevealed />
212200
</MiliBox>
213201
<MiliBox>
214202
<SponsorUnrevealed />

0 commit comments

Comments
 (0)