add event listener to close burger menu on resize

components/core/NewWebsitePrototypeFooter.js

@@ -16,9 +16,9 @@ const STYLES_CONTAINER = css`
   align-items: top;
   justify-content: top;
   padding: 96px 88px 96px 88px;
+  z-index: ${Constants.zindex.navigation};
   @media (max-width: ${Constants.sizes.mobile}px) {
     position: absolute;
-    z-index: 2;
     flex-shrink: 0;
     display: block;
     justify-content: left;

components/core/NewWebsitePrototypeHeader.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
@@ -15,7 +15,7 @@ const STYLES_CONTAINER = css`
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  z-index: 42;
+  z-index: ${Constants.zindex.header};
   height: 88px;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
@@ -73,11 +73,11 @@ const STYLES_BURGER = css`
     justify-content: space-around;
     width: 24px;
     height: 24px;
+    z-index: ${Constants.zindex.header};
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
-    z-index: 10;
     color: ${Constants.system.darkGray};
   }
 `;
@@ -130,6 +130,7 @@ const openBurgerBun2 = {
 const STYLES_MENU = css`
   display: none;
   @media (max-width: ${Constants.sizes.mobile}px) {
+    z-index: ${Constants.zindex.header}
     display: none;
     flex-direction: column;
     justify-content: center;
@@ -142,7 +143,7 @@ const STYLES_MENU = css`
     top: 0;
     right: 0;
     transform: translateX(100%);
-    transition: 1s ease-in-out;
+    transition: 200ms ease-in-out;
     transition-property: transform, width;
   }
 `;
@@ -150,12 +151,12 @@ const STYLES_MENU = css`
 const STYLES_NAVLINK = css`
   display: none;
   @media (max-width: ${Constants.sizes.mobile}px) {
-    padding: 16px 0;
+    z-index: ${Constants.zindex.header};
+    padding: 8px 0;
     color: ${Constants.system.white};
     text-decoration: none;
     transition: color 0.3s linear;
     transition-property: transform;
-
     font-size: 1.563rem;
     text-align: left;
 
@@ -176,11 +177,12 @@ const openNavLink = {
 
 const NewWebsitePrototypeHeader = (props) => {
   const [open, setOpen] = useState(false);
+  useEffect(() => {
+    window.addEventListener("resize", handleOpen);
+    return () => window.removeEventListener("resize", handleOpen);
+  });
   const handleOpen = () => {
-    handleOpen();
-    window.addEventListener("resize", () => {
-      useState({ open: false });
-    });
+    setOpen(false);
   };
   const communityURL = "/community";
   const signInURL = "/_";

pages/_/marketing-candidate/new-index.js

@@ -13,6 +13,7 @@ const STYLES_ROOT = css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  max-width: 1440px;
 `;
 
 const STYLES_H1 = css`
@@ -186,12 +187,10 @@ const STYLES_TEXT_BLOCK = css`
   justify-content: space-between;
   width: 56vw;
   align-self: center;
-  z-index: 10;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 88%;
     right: 24px;
-    z-index: 10;
   }
 `;
 
@@ -442,8 +441,9 @@ export default class IndexPage extends React.Component {
             <div>
               <video
                 css={STYLES_VIDEO_BIG}
-                Autoplay="autoplay"
-                Loop="loop"
+                autoPlay
+                loop
+                muted
                 src="https://bafybeihptz3tl5zxoronrlefow6kovk3jzllgfv36nt7metavqa4en26km.ipfs.slate.textile.io/"
                 type="video/mp4"
               />
@@ -495,8 +495,9 @@ export default class IndexPage extends React.Component {
               <div css={STYLES_FILETYPE}>
                 <div>
                   <video
-                    Autoplay="autoplay"
-                    Loop="loop"
+                    autoPlay
+                    loop
+                    muted
                     css={STYLES_VIDEO_SMALL}
                     src="https://bafybeiawzns4vxqp3llkzmc4shvytzpurysh26yj3aljde4d4fsgf7wlze.ipfs.slate.textile.io/"
                     type="video/mp4"
@@ -504,8 +505,9 @@ export default class IndexPage extends React.Component {
                 </div>
                 <div>
                   <video
-                    Autoplay="autoplay"
-                    Loop="loop"
+                    autoPlay
+                    loop
+                    muted
                     css={STYLES_VIDEO_SMALL}
                     src="https://bafybeiczug4d6uyr4pkejdwirkeffbzkkzrbaprxvreid6iitw3pmjzq3q.ipfs.slate.textile.io/"
                     type="video/mp4"
@@ -515,8 +517,9 @@ export default class IndexPage extends React.Component {
               <div css={STYLES_FILETYPE}>
                 <div>
                   <video
-                    Autoplay="autoplay"
-                    Loop="loop"
+                    autoPlay
+                    loop
+                    muted
                     css={STYLES_VIDEO_SMALL}
                     src="https://bafkreid7wl4443p764ozdlqtodh7dmsej6ffayp4tc3lr3hil2qkclrohi.ipfs.slate.textile.io/"
                     type="video/mp4"
@@ -524,8 +527,9 @@ export default class IndexPage extends React.Component {
                 </div>
                 <div>
                   <video
-                    Autoplay="autoplay"
-                    Loop="loop"
+                    autoPlay
+                    loop
+                    muted
                     css={STYLES_VIDEO_SMALL}
                     src="https://bafybeicjovnsnhvt7xwjw3igdwwpb4ms2m23fayoydj3oevrwyi7dzjtga.ipfs.slate.textile.io/"
                     type="video/mp4"
@@ -572,8 +576,9 @@ export default class IndexPage extends React.Component {
               <h2 css={STYLES_H2}>Create moodboards</h2>
               <video
                 css={STYLES_VIDEO_BIG}
-                Autoplay="autoplay"
-                Loop="loop"
+                autoPlay
+                loop
+                muted
                 src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
                 type="video/mp4"
               />
@@ -581,8 +586,9 @@ export default class IndexPage extends React.Component {
               <h2 css={STYLES_H2}>Organize research</h2>
               <video
                 css={STYLES_VIDEO_BIG}
-                Autoplay="autoplay"
-                Loop="loop"
+                autoPlay
+                loop
+                muted
                 src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
                 type="video/mp4"
               />
@@ -590,8 +596,9 @@ export default class IndexPage extends React.Component {
               <h2 css={STYLES_H2}>Share presentations</h2>
               <video
                 css={STYLES_VIDEO_BIG}
-                Autoplay="autoplay"
-                Loop="loop"
+                autoPlay
+                loop
+                muted
                 src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
                 type="video/mp4"
               />
@@ -615,8 +622,9 @@ export default class IndexPage extends React.Component {
             <div>
               <video
                 css={STYLES_VIDEO_BIG}
-                Autoplay="autoplay"
-                Loop="loop"
+                autoPlay
+                loop
+                muted
                 src="https://bafybeidnaytqqghnwoduomvefwmnxz3kqllyl5xhyzc4azcl4zflscqcry.ipfs.slate.textile.io/"
                 type="video/mp4"
               />