Merge pull request #97 from LaconicNetwork/styling-fixes

Styling fixes

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "prepare": "husky install",
     "dev": "next",
-    "build": "next build && next export",
+    "build": "next build",
     "build:analyze": "cross-env ANALYZE=true yarn build",
     "postbuild": "next-sitemap",
     "start": "next start",

src/components/common/footer/footer.module.scss

@@ -15,13 +15,9 @@
   }
 
   &--section {
-    @include respond-to('mobile') {
-      background-image: url('/images/pre-footer-mobile.png');
-      background-position: 50%;
-      background-size: cover;
-      height: calc(var(--vw) * 95);
-    }
-
+    background-image: url('/images/laconic_newsletter_dark.png');
+    background-position: 50%;
+    background-size: cover;
     display: flex;
     position: relative;
     align-items: center;
@@ -33,42 +29,6 @@
       @include respond-to('mobile') {
         content: normal;
       }
-
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: -1;
-      background: linear-gradient(
-          0deg,
-          var(--color-black) 15%,
-          rgb(9 9 121 / 0) 50%,
-          var(--color-black) 100%
-        ),
-        linear-gradient(
-          90deg,
-          var(--color-black) 0%,
-          rgb(255 255 255 / 0) 10%,
-          rgb(255 255 255 / 0) 50%,
-          rgb(255 255 255 / 0) 90%,
-          var(--color-black) 100%
-        );
-      width: 100%;
-      height: 101%;
-      content: '';
-      pointer-events: none;
-    }
-
-    &::before {
-      background: radial-gradient(
-        ellipse farthest-corner at center center,
-        rgb(4 4 4 / 0) 45%,
-        var(--color-black) 0
-      );
-      width: 120%;
-      height: 115%;
-      filter: blur(tovw(80px, 'default', 40px));
-      will-change: filter, transform;
     }
 
     h2 {
@@ -85,6 +45,17 @@
       pointer-events: none;
       user-select: none;
     }
+
+    .img {
+      position: absolute;
+      top: 35px;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: auto;
+      pointer-events: none;
+      user-select: none;
+    }
   }
 
   .form {
@@ -397,13 +368,8 @@
 [data-theme='light'] {
   .pre__footer {
     &--section {
-      video {
-        mix-blend-mode: darken;
-      }
-
-      @include respond-to('mobile') {
-        background-image: url('/images/pre-footer-mobile-light.png');
-      }
+      background-image: url('/images/laconic_newsletter_lite.png');
+      mix-blend-mode: darken;
     }
   }
 

src/components/common/footer/index.tsx

@@ -158,17 +158,6 @@ export const Footer = ({ data }: Props) => {
     <>
       {show && (
         <Section className={s['pre__footer--section']}>
-          <video
-            autoPlay
-            className={clsx('hide-on-mobile', s['video'])}
-            controls={false}
-            muted
-            playsInline={true}
-            preload="true"
-            ref={videoRef}
-          >
-            <source type="video/mp4" />
-          </video>
           <Container className={s['pre__footer']}>
             <Isotype className={s['isotype']} />
             <Heading

src/components/layout/section/section.module.scss

@@ -3,7 +3,6 @@
 .base {
   position: relative;
   padding: 0 tovw(56px, 'default', 16px);
-  overflow: hidden;
 }
 
 .children {

src/components/sections/about/team/team.module.scss

@@ -145,7 +145,13 @@
 
     border-radius: tovw(5px, 'default', 5px);
     overflow: hidden;
-    aspect-ratio: 1 /1;
+    aspect-ratio: 1 / 1;
+
+    @supports not (aspect-ratio: 1 / 1) {
+      width: tovw(194px, 'default', 80px);
+      height: tovw(194px, 'default', 80px);
+    }
+
     object-fit: cover;
   }
 

src/components/sections/about/team/team.tsx

@@ -85,17 +85,17 @@ function Team({ members, teamName, teamNumber, teamDept }: Teams) {
     },
     breakpoints: {
       '(max-width: 900px)': {
-        slides: { perView: 2.2, spacing: 20, origin: 'center' },
+        slides: { perView: 2.2, spacing: 20, origin: 'auto' },
         mode: 'snap'
       },
       '(max-width: 600px)': {
-        slides: { perView: 1.65, spacing: 35, origin: 'center' }
+        slides: { perView: 1.65, spacing: 35, origin: 'auto' }
       },
       '(min-width: 901px)': {
         disabled: true
       }
     },
-    slides: { perView: 1.6, spacing: 30, origin: 'center' }
+    slides: { perView: 1.6, spacing: 30, origin: 'auto' }
   })
 
   return (

src/components/sections/homepage/benefits/benefits.module.scss

@@ -114,8 +114,8 @@
   }
 
   margin: 0 0 tovw(305px, 'default', 110px) auto;
-  padding-top: tovw(138px, 'default', 100px);
   padding-right: tovw(69px, 'default', 69px);
+  padding-top: tovw(178px, 'default', 140px);
   width: 100%;
   max-width: tovw(1080px, 'default', 730px);
 
@@ -124,6 +124,10 @@
   }
 }
 
+.developers {
+  padding-top: tovw(98px, 'default', 60px);
+}
+
 .service {
   &__header {
     @include respond-to('mobile') {

src/components/sections/products/watchers/watchers.module.scss

@@ -144,7 +144,7 @@
       position: absolute;
       top: tovw(190px, 'default', 150px);
       right: tovw(770px, 'default', 250px);
-      z-index: -1;
+      z-index: -10000;
       width: tovw(825px, 'default', 250px);
       mix-blend-mode: screen;
     }