Fixes mobile (#208)

Co-authored-by: enric4000 <enric.andujar@gmail.com>

Author: polmf

public/maons_mobile.svg

@@ -14,6 +14,10 @@ const DuringContainer = styled(Section)`
   z-index: 1;
 `;
 
+const StyledSectionTitle = styled(SectionTitle)`
+  margin-bottom: 0px;
+`;
+
 const StyledBody = styled(Body)`
   display: flex;
   flex-direction: column;
@@ -61,6 +65,12 @@ const MobileMapImage = styled(MapImageBase)`
   @media (min-width: ${MobileBreakpoint}) {
     display: none;
   }
+
+  @media (max-width: ${MobileBreakpoint}) {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+  }
 `;
 
 const DesktopMapImage = styled(MapImageBase)`
@@ -72,7 +82,9 @@ const DesktopMapImage = styled(MapImageBase)`
 export default function During() {
   return (
     <DuringContainer id="during">
-      <SectionTitle className={lora.className}>DURING THE EVENT</SectionTitle>
+      <StyledSectionTitle className={lora.className}>
+        DURING THE EVENT
+      </StyledSectionTitle>
       <StyledBody>
         Coding is the main part of HackUPC, but we have many more activities!
       </StyledBody>

src/app/components/During.tsx

@@ -76,6 +76,7 @@ const ColumnsQuestions = styled.div`
 
   @media (max-width: ${MobileBreakpoint}) {
     width: 100%;
+    gap: 0px;
   }
 `;
 
@@ -86,6 +87,12 @@ const QuestionsBlock = styled.div`
   gap: ${SpacingS};
 `;
 
+const ApplicationQuestionsBlock = styled(QuestionsBlock)`
+  @media (max-width: ${MobileBreakpoint}) {
+    padding-top: 0px;
+  }
+`;
+
 const Question = styled.div`
   display: flex;
   flex-direction: column;
@@ -404,10 +411,10 @@ export default function FAQs() {
         </ColumnsQuestions>
 
         <ColumnsQuestions>
-          <QuestionsBlock>
+          <ApplicationQuestionsBlock>
             <BlockTitleStyled>Applications</BlockTitleStyled>
             {applications_faqs.map(renderFaq)}
-          </QuestionsBlock>
+          </ApplicationQuestionsBlock>
 
           <QuestionsBlock>
             <BlockTitleStyled>Teams</BlockTitleStyled>

src/app/components/FAQs.tsx

@@ -22,8 +22,9 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 
 const FooterWrapper = styled.div`
-  width: 100vw;
+  width: 100%;
   background-color: #65936d;
+  margin-top: -1px;
 `;
 
 const SocialsAndOthers = styled.div`

src/app/components/Footer.tsx

@@ -174,18 +174,27 @@ const CharactersSection = styled.div`
 
 const RibbonContainer = styled.div`
   position: absolute;
-  top: -120px;
+  top: -130px;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   display: flex;
   justify-content: center;
+
+  @media (max-width: ${MobileBreakpoint}) {
+    top: -70px;
+  }
 `;
 
 const RibbonImageWrapper = styled.div`
   position: relative;
   width: clamp(320px, 95vw, 620px);
   aspect-ratio: 45 / 8;
+
+  @media (max-width: ${MobileBreakpoint}) {
+    width: clamp(360px, 100vw, 620px);
+    aspect-ratio: 45 / 6;
+  }
 `;
 
 const CharacterGrid = styled.div`
@@ -195,7 +204,7 @@ const CharacterGrid = styled.div`
   justify-content: center;
 
   @media (max-width: ${MobileBreakpoint}) {
-    gap: 70px;
+    gap: 40px;
     margin-top: 220px;
   }
 `;
@@ -218,8 +227,8 @@ const CharacterCard = styled.div`
   }
 
   @media (max-width: ${MobileBreakpoint}) {
-    width: 42%;
-    max-width: 150px;
+    width: 150px;
+    flex: 0 0 150px;
   }
 `;
 
@@ -252,12 +261,22 @@ const ComingSoon = styled.div`
     25% 0%,
     10% 12%
   );
+
+  @media (max-width: ${MobileBreakpoint}) {
+    inset: auto 0 0 0;
+    height: 85%;
+    border-top-left-radius: 60px;
+    border-top-right-radius: 60px;
+    letter-spacing: 1px;
+    font-size: 14px;
+  }
 `;
 
 const StackedImages = styled.div`
   position: relative;
   width: 100%;
   height: 230px;
+  flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: flex-end;
@@ -275,6 +294,7 @@ const CharacterImg = styled(Image)`
   position: relative;
   z-index: 2;
   width: 70%;
+  height: auto;
   margin-bottom: 30px;
   filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
 `;

src/app/components/Hero.tsx

@@ -422,10 +422,10 @@ export default function ThroughTheYears() {
               </Link>
             </Flower2017fSection>
             <Flower2016wSection>
-              <Link href="https://w2016.hackupc.com" passHref>
+              <Link href="https://f2016.hackupc.com" passHref>
                 <Image
-                  src="/ThroughTheYears/2016w.svg"
-                  alt="2016w Image"
+                  src="/ThroughTheYears/2016f.svg"
+                  alt="2016f Image"
                   width={75}
                   height={150}
                 />

src/app/components/ThroughTheYears.tsx

@@ -9,6 +9,7 @@ import styled from "styled-components";
 import Image from "next/image";
 import Link from "next/link";
 import useEmblaCarousel from "embla-carousel-react";
+import { MaxScreenSize } from "./tokens";
 
 type Edition = {
   url: string;
@@ -23,8 +24,9 @@ type PropType = {
 const Embla = styled.div`
   position: relative;
   display: flex;
-  max-width: 100%;
-  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
   padding-top: 20px;
   background-color: #65936d;
   --slide-spacing: 1rem;
@@ -37,6 +39,8 @@ const Embla = styled.div`
 
 const EmblaViewport = styled.div`
   overflow: hidden;
+  max-width: ${MaxScreenSize};
+  width: 100%;
 `;
 
 const EmblaContainer = styled.div`
@@ -80,6 +84,16 @@ const ArrowButton = styled.button`
   justify-content: center;
 `;
 
+const RightArrowButton = styled(ArrowButton)`
+  margin-left: 10px;
+  margin-right: 20px;
+`;
+
+const LeftArrowButton = styled(ArrowButton)`
+  margin-left: 20px;
+  margin-right: 10px;
+`;
+
 const EmblaCarousel: React.FC<PropType> = ({ slides, options }) => {
   const [emblaRef, emblaApi] = useEmblaCarousel(options, []);
 
@@ -112,14 +126,14 @@ const EmblaCarousel: React.FC<PropType> = ({ slides, options }) => {
 
   return (
     <Embla>
-      <ArrowButton className="embla__prev" onClick={scrollPrev}>
+      <LeftArrowButton className="embla__prev" onClick={scrollPrev}>
         <Image
           src="/ThroughTheYears/LeftArrow.svg"
           alt="Previous"
           width="100"
           height="75"
         />
-      </ArrowButton>
+      </LeftArrowButton>
       <EmblaViewport ref={emblaRef}>
         <EmblaContainer>
           {slides.map((edition, index) => (
@@ -147,14 +161,14 @@ const EmblaCarousel: React.FC<PropType> = ({ slides, options }) => {
           ))}
         </EmblaContainer>
       </EmblaViewport>
-      <ArrowButton className="embla__next" onClick={scrollNext}>
+      <RightArrowButton className="embla__next" onClick={scrollNext}>
         <Image
           src="/ThroughTheYears/RightArrow.svg"
           alt="Next"
           width="100"
           height="75"
         />
-      </ArrowButton>
+      </RightArrowButton>
     </Embla>
   );
 };

src/app/genericComponents/EmblaCarousel.tsx

@@ -5,6 +5,7 @@ import {
   MobileBreakpoint,
   SpacingL,
   SpacingM,
+  SpacingS,
 } from "@/app/genericComponents/tokens";
 
 interface SectionProps {
@@ -22,7 +23,7 @@ export const SectionBackground = styled.div<SectionProps>`
 `;
 
 export const Section = styled.div`
-  padding: ${SpacingL};
+  padding: ${SpacingM};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -39,7 +40,7 @@ export const Section = styled.div`
 export const WhiteContainer = styled.div`
   background-color: rgba(255, 255, 255, 0.51);
   border-radius: 10px;
-  padding: ${SpacingM};
+  padding: ${SpacingS};
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;