From e8eff59f15e32e5671dd5d7063288d514a8507f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?=
 <78366796+fedealvarezcampos@users.noreply.github.com>
Date: Mon, 11 Apr 2022 14:15:43 +0200
Subject: [PATCH] Fix issues (#29)

---
 src/components/common/footer/footer.module.scss    | 10 +++++++---
 .../sections/about/hero/hero.module.scss           |  2 ++
 src/components/sections/about/related/index.tsx    | 14 +++++++-------
 .../sections/about/related/related.module.scss     |  8 ++++----
 .../sections/about/team/team.module.scss           |  7 ++++---
 src/components/sections/about/team/team.tsx        |  2 +-
 .../sections/community/events/events.module.scss   |  6 ++++--
 src/components/sections/community/events/index.tsx |  4 ++--
 src/components/sections/homepage/hero/index.tsx    |  2 +-
 .../sections/homepage/latest-news/index.tsx        |  2 +-
 .../homepage/latest-news/latest-news.module.scss   |  4 ++--
 src/css/global.scss                                |  2 +-
 12 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index 24e4ef6..e0fac3c 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -90,6 +90,10 @@
     background: transparent;
     appearance: none;
 
+    @include respond-to('mobile') {
+      width: 100%;
+    }
+
     &::placeholder {
       color: var(--color-grey-light);
     }
@@ -98,8 +102,8 @@
       position: absolute;
       top: 50%;
       right: 0;
-      width: 11px;
-      height: 11px;
+      width: tovw(18px, 'default', 11px);
+      height: tovw(18px, 'default', 11px);
       margin: 0;
       padding: 0;
       cursor: pointer;
@@ -120,7 +124,7 @@
   top: 0;
   left: calc(50% - (tovw(3px, 'default', 2px) / 2));
   width: tovw(3px, 'default', 2px);
-  height: tovw(276px, 'default', 270px);
+  height: tovw(276px, 'default', 140px);
   margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
 
   @include respond-to('mobile') {
diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index 8c43244..74b182b 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -40,6 +40,7 @@
   .header {
     @include respond-to('mobile') {
       display: flex;
+      place-content: space-between;
     }
 
     h1 {
@@ -47,6 +48,7 @@
       text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
 
       @include respond-to('mobile') {
+        width: 90%;
         font-size: tovw(50px, 'mobile');
       }
     }
diff --git a/src/components/sections/about/related/index.tsx b/src/components/sections/about/related/index.tsx
index 8c0d7f2..29fd804 100644
--- a/src/components/sections/about/related/index.tsx
+++ b/src/components/sections/about/related/index.tsx
@@ -17,15 +17,15 @@ const Related = () => {
     loop: true,
     mode: 'free-snap',
     breakpoints: {
-      '(max-width: 850px)': {
-        slides: { perView: 1.12, spacing: 12 }
-      },
-      '(min-width: 851px)': {
-        slides: { perView: 2, spacing: 22 }
-      },
-      '(min-width: 1200px)': {
+      '(min-width: 1141px)': {
         slides: { perView: 3, spacing: 35 },
         loop: false
+      },
+      '(max-width: 1140px)': {
+        slides: { perView: 2.9, spacing: 22 }
+      },
+      '(max-width: 850px)': {
+        slides: { perView: 1.12, spacing: 12 }
       }
     }
   })
diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss
index 4ca3d1b..831ee47 100644
--- a/src/components/sections/about/related/related.module.scss
+++ b/src/components/sections/about/related/related.module.scss
@@ -16,7 +16,7 @@
       width: calc(100% - tovw(16px, 'mobile'));
     }
 
-    @media screen and (min-width: 1600px) {
+    @media screen and (min-width: 1141px) {
       margin: 0 auto;
     }
   }
@@ -78,7 +78,7 @@
       padding-left: 0;
     }
 
-    @media screen and (min-width: 1600px) {
+    @media screen and (min-width: 1141px) {
       width: 100%;
       max-width: tovw(1296px, 'default', 320px);
       margin: 0 auto;
@@ -99,7 +99,7 @@
         rgb(3 3 3 / 1) 65%
       );
 
-      @media screen and (min-width: 1600px) {
+      @media screen and (min-width: 1141px) {
         display: none;
       }
 
@@ -117,7 +117,7 @@
     &::before {
       z-index: 5;
       right: initial;
-      left: tovw(-150px);
+      left: tovw(-180px);
       transform: scaleX(-1);
       @include respond-to('mobile') {
         content: initial;
diff --git a/src/components/sections/about/team/team.module.scss b/src/components/sections/about/team/team.module.scss
index b06bc9c..0dcdf67 100644
--- a/src/components/sections/about/team/team.module.scss
+++ b/src/components/sections/about/team/team.module.scss
@@ -85,12 +85,13 @@
       width: tovw(85px, 'default', 55px);
       height: tovw(45px, 'default', 30px);
       transform: rotate(-90deg) translateY(tovw(-5px, 'default', -5px))
-        scaleX(2.2) scaleY(1.6);
+        scaleX(2.6) scaleY(1.6);
 
       @include respond-to('mobile') {
-        height: tovw(32px, 'default', 32px);
+        height: tovw(25px, 'default', 25px);
         transform: rotate(-90deg) scaleX(2.2) scaleY(1.4)
-          translateY(tovw(-2px, 'mobile', -3px));
+          translateY(tovw(-2px, 'mobile', -3px))
+          translateX(tovw(-2px, 'mobile', -3px));
       }
     }
   }
diff --git a/src/components/sections/about/team/team.tsx b/src/components/sections/about/team/team.tsx
index 752f0ad..55b53dd 100644
--- a/src/components/sections/about/team/team.tsx
+++ b/src/components/sections/about/team/team.tsx
@@ -95,7 +95,7 @@ function Team({ members, teamName, teamNumber, teamDept }: Teams) {
           <Heading as="h2" variant="sm">
             {teamName}
           </Heading>
-          {teamDept && <Line className={s['line']} />}
+          {teamDept && <Line className={s['line']} height={144} />}
           <Heading as="h2" variant="sm">
             {teamDept}
           </Heading>
diff --git a/src/components/sections/community/events/events.module.scss b/src/components/sections/community/events/events.module.scss
index efd09fa..9224ad5 100644
--- a/src/components/sections/community/events/events.module.scss
+++ b/src/components/sections/community/events/events.module.scss
@@ -8,7 +8,9 @@
   padding: tovw(220px, 'default', 72px) 0;
 
   .container {
-    padding: 0 tovw(16px, 'tablet', 16px);
+    @include respond-to('mobile') {
+      padding: 0 tovw(16px, 'tablet', 16px);
+    }
   }
 }
 
@@ -108,7 +110,7 @@
   &::before {
     z-index: 5;
     right: initial;
-    left: tovw(-150px);
+    left: tovw(-180px);
     transform: scaleX(-1);
     @include respond-to('mobile') {
       content: initial;
diff --git a/src/components/sections/community/events/index.tsx b/src/components/sections/community/events/index.tsx
index a52e1e1..f25348c 100644
--- a/src/components/sections/community/events/index.tsx
+++ b/src/components/sections/community/events/index.tsx
@@ -33,10 +33,10 @@ const Events = () => {
       setLoaded(true)
     },
     breakpoints: {
-      '(max-width: 1024px)': {
+      '(max-width: 1140px)': {
         slides: { perView: 2.915, spacing: 20 }
       },
-      '(max-width: 800px)': {
+      '(max-width: 850px)': {
         slides: { perView: 1.12, spacing: 12 }
       }
     }
diff --git a/src/components/sections/homepage/hero/index.tsx b/src/components/sections/homepage/hero/index.tsx
index 70e7741..56adf1c 100644
--- a/src/components/sections/homepage/hero/index.tsx
+++ b/src/components/sections/homepage/hero/index.tsx
@@ -24,7 +24,7 @@ const Hero = () => {
       </video>
       <Heading as="h1" variant="xl" centered>
         The <br className="hide-on-desktop" />{' '}
-        <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
+        <HighlightedText>Multi-chain</HighlightedText> <br /> Verifiable Data
         Marketplace
       </Heading>
       <Line className={s['line']} />
diff --git a/src/components/sections/homepage/latest-news/index.tsx b/src/components/sections/homepage/latest-news/index.tsx
index 9f17283..b7c6790 100644
--- a/src/components/sections/homepage/latest-news/index.tsx
+++ b/src/components/sections/homepage/latest-news/index.tsx
@@ -41,7 +41,7 @@ const LatestNews = () => {
         </Heading>
       </Container>
       <div className={s['slider__container']}>
-        <div className={`${s.eventsContainer} keen-slider`} ref={sliderRef}>
+        <div className={`${s.events__container} keen-slider`} ref={sliderRef}>
           {latestNews.map((item, i) => (
             <Card key={i} data={item} className={`keen-slider__slide`} isNews />
           ))}
diff --git a/src/components/sections/homepage/latest-news/latest-news.module.scss b/src/components/sections/homepage/latest-news/latest-news.module.scss
index 9a437f5..19e84ec 100644
--- a/src/components/sections/homepage/latest-news/latest-news.module.scss
+++ b/src/components/sections/homepage/latest-news/latest-news.module.scss
@@ -67,7 +67,7 @@
     }
   }
 
-  .eventsContainer {
+  .events__container {
     padding-left: tovw(100px);
     @include respond-to('mobile') {
       padding-left: 0;
@@ -101,7 +101,7 @@
     &::before {
       z-index: 5;
       right: initial;
-      left: tovw(-150px);
+      left: tovw(-180px);
       transform: scaleX(-1);
       @include respond-to('mobile') {
         content: initial;
diff --git a/src/css/global.scss b/src/css/global.scss
index fe22ea8..7c3ed20 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -113,7 +113,7 @@ p {
 
 .hide-on-desktop {
   display: initial !important;
-  @media screen and (min-width: 800px) {
+  @media screen and (min-width: 901px) {
     display: none !important;
   }
 }