Addressed most of #101 and #102

2022-07-28 14:10:01 -07:00 · 2022-07-28 14:10:01 -07:00 · 0e48100929
commit 0e48100929
parent 5bfab65345
19 changed files with 40 additions and 25 deletions
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@ -18,12 +18,20 @@
    background-image: url('/images/laconic_newsletter_dark.png');
    background-position: 50%;
    background-size: contain;
+    mix-blend-mode: lighten;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: calc(var(--vw) * 60);

+    @include respond-to('mobile') {
+      background-size: cover;
+      width: 150%;
+      height: calc(var(--vw) * 100);
+      left: -25%;
+    }
+
    &::after,
    &::before {
      @include respond-to('mobile') {
--- a/src/components/common/header/header.module.scss
+++ b/src/components/common/header/header.module.scss
@ -193,7 +193,7 @@
        all: unset;
        position: relative;
        display: flex;
-        flex-flow: row wrap;
+        flex-flow: column wrap;
        gap: tovw(14px, 'mobile') tovw(20px, 'mobile');
        background-color: unset;
        border: unset;
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@ -27,7 +27,7 @@
      @include respond-to('mobile') {
        display: flex;
        margin: 0 0 tovw(-75px, 'mobile') tovw(10px, 'mobile', 10px);
-        width: 300%;
+        width: 100%;
        mix-blend-mode: screen;
        place-self: center;
      }
--- a/src/components/sections/about/related/index.tsx
+++ b/src/components/sections/about/related/index.tsx
@ -49,7 +49,7 @@ const Related = ({ data, blogData, isInPost, isFeatured, reduced }: Props) => {
        <Heading as="h2" variant="lg">
          {isInPost && !isFeatured && 'Related articles'}
          {isFeatured && !isInPost && data?.featuredHeading}
-          {!isFeatured && !isInPost && 'Learn more'}
+          {!isFeatured && !isInPost && 'Learn More'}
        </Heading>
      </Container>
      <div className={s['slider__container']}>
--- a/src/components/sections/about/roadmap/roadmap.module.scss
+++ b/src/components/sections/about/roadmap/roadmap.module.scss
@ -4,6 +4,7 @@
  @include respond-to('mobile') {
    margin-top: 0;
    padding-top: 0;
+    padding-bottom: 50px;
  }

  position: relative;
--- a/src/components/sections/careers/hero/hero.module.scss
+++ b/src/components/sections/careers/hero/hero.module.scss
@ -77,7 +77,7 @@
        display: flex;
        margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px)
          tovw(-30px, 'mobile', -30px);
-        width: 140%;
+        width: 100%;
        mix-blend-mode: screen;
        place-self: center;
        mask-image: linear-gradient(
--- a/src/components/sections/careers/values/values.module.scss
+++ b/src/components/sections/careers/values/values.module.scss
@ -37,8 +37,7 @@

      .features {
        @include respond-to('mobile') {
-          display: flex;
-          flex-direction: column;
+          display: block;
          margin: unset;
          margin-top: tovw(95px, 'default', 50px);
        }
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/src/components/sections/community/hero/hero.module.scss
@ -34,9 +34,9 @@
    .hero__mobile {
      @include respond-to('mobile') {
        display: flex;
-        margin-right: tovw(190px, 'mobile');
+        margin-right: tovw(65px, 'mobile');
        padding-top: tovw(50px, 'mobile');
-        width: 280%;
+        width: 100%;
        mix-blend-mode: lighten;
        place-self: center;
      }
--- a/src/components/sections/contact/hero/hero.module.scss
+++ b/src/components/sections/contact/hero/hero.module.scss
@ -82,7 +82,7 @@
          display: flex;
          margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
            tovw(16px, 'mobile', 20px);
-          width: 200%;
+          width: 100%;
          mix-blend-mode: screen;
          place-self: center;
          mask-image: linear-gradient(
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@ -18,7 +18,7 @@
  }

  @media screen and (max-width: 1400px) {
-    padding-bottom: tovw(200px, 'default', 200px);
+    padding-bottom: tovw(75px, 'default', 75px);
  }

  position: relative;
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@ -25,6 +25,12 @@
    @media screen and (max-width: 422px) {
      font-size: tovw(42px, 'mobile');
    }
+
+    color: var(--color-accent);
+
+    span {
+      color: var(--color-white);
+    }
  }

  &::after,
--- a/src/components/sections/homepage/what-others-say/item/item.module.scss
+++ b/src/components/sections/homepage/what-others-say/item/item.module.scss
@ -8,8 +8,8 @@
    transform: none;
    margin: 0;
    width: max-content;
-    height: max-content !important;
-    min-height: auto !important;
+    height: tovw(130px, 'mobile', 130px);
+    min-height: 20% !important;
  }

  position: absolute;
--- a/src/components/sections/homepage/what-others-say/what-others-say.module.scss
+++ b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
@ -101,7 +101,7 @@
  }

  align-items: center;
-  height: tovw(636px, 'mobile');
+  height: tovw(480px, 'mobile');

  .image {
    position: absolute;
--- a/src/components/sections/newsroom/hero/hero.module.scss
+++ b/src/components/sections/newsroom/hero/hero.module.scss
@ -75,8 +75,8 @@
      &__mobile {
        @include respond-to('mobile') {
          display: flex;
-          margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
-          width: 135%;
+          margin: auto;
+          width: 100%;
          mix-blend-mode: screen;
          place-self: center;
          mask-image: linear-gradient(
--- a/src/components/sections/newsroom/media/media.module.scss
+++ b/src/components/sections/newsroom/media/media.module.scss
@ -3,6 +3,7 @@
 .section {
  @include respond-to('mobile') {
    padding: 0;
+    padding-top: tovw(35px, 'mobile');
    margin-bottom: tovw(25px, 'mobile');
  }

@ -112,11 +113,11 @@

        img {
          width: 100%;
-          height: calc(15.4vw);
          object-fit: cover;
+          aspect-ratio: 16 / 9;

-          @supports (aspect-ratio: 16 / 9) {
-            aspect-ratio: 16 / 9;
+          @supports not (aspect-ratio: 16 / 9) {
+            height: calc(15.4vw);
          }
        }

--- a/src/components/sections/partners/hero/hero.module.scss
+++ b/src/components/sections/partners/hero/hero.module.scss
@ -58,10 +58,6 @@
      display: flex;
      place-content: center;
      min-height: tovw(350px, 'mobile', 310px);
-
-      img {
-        width: 115% !important;
-      }
    }

    display: none;
@ -80,7 +76,7 @@
        @include respond-to('mobile') {
          display: flex;
          margin: tovw(50px, 'mobile', 100px) 0 tovw(40px, 'mobile', 50px) 0;
-          width: 185%;
+          width: 100%;
          mix-blend-mode: screen;
          place-self: center;
          mask-image: linear-gradient(
--- a/src/components/sections/products/app/app.module.scss
+++ b/src/components/sections/products/app/app.module.scss
@ -6,7 +6,7 @@
    height: unset;
    padding: 0;
    margin-bottom: 0;
-    padding-bottom: tovw(60px, 'mobile');
+    padding-top: tovw(60px, 'mobile');
  }

  display: flex;
@ -26,6 +26,8 @@
    z-index: 2;

    div:nth-child(2) {
+      order: 1;
+
      h2 {
        text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
      }
@ -51,6 +53,7 @@
    @include respond-to('mobile') {
      width: 100%;
      min-height: tovw(190px, 'mobile', 340px);
+      order: 2;
    }

    position: relative;
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@ -47,7 +47,7 @@
      display: flex;
      margin: tovw(30px, 'mobile', 70px) 0 tovw(30px, 'mobile', 40px)
        tovw(16px, 'mobile', 20px);
-      width: 200%;
+      width: 100%;
      mix-blend-mode: screen;
      place-self: center;
      min-height: tovw(308px, 'mobile', 310px);
--- a/src/components/sections/products/network/network.module.scss
+++ b/src/components/sections/products/network/network.module.scss
@ -4,6 +4,7 @@
  @include respond-to('mobile') {
    padding: 0;
    padding-bottom: tovw(14px, 'mobile');
+    padding-top: tovw(44px, 'mobile');
  }

  position: relative;