diff --git a/components/core/NewWebsitePrototypeFooter.js b/components/core/NewWebsitePrototypeFooter.js index 2e999458..78ce3e97 100644 --- a/components/core/NewWebsitePrototypeFooter.js +++ b/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; diff --git a/components/core/NewWebsitePrototypeHeader.js b/components/core/NewWebsitePrototypeHeader.js index 560826ab..9ca3bd60 100644 --- a/components/core/NewWebsitePrototypeHeader.js +++ b/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 = "/_"; diff --git a/pages/_/marketing-candidate/new-index.js b/pages/_/marketing-candidate/new-index.js index 8e8b1d46..226bea79 100644 --- a/pages/_/marketing-candidate/new-index.js +++ b/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 {