fix(header): improve layout

src/components/header-logo.js

@@ -37,7 +37,6 @@ const Top = styled.div`
 `;
 
 const Middle = styled.div`
-  width: 100vw;
   opacity: 0;
   transition: opacity 0.5s ease-in 0.75s;
   ${props =>
@@ -82,7 +81,7 @@ export default function HeaderLogo({ transition }) {
         <LogoArrows />
       </Top>
       <Middle visible={visible}>
-        <Heading withShadow noMargin>
+        <Heading withShadow noMargin noWrap>
           Abc Project Design Ltd
         </Heading>
         <Text size="lg">Easy as ABC</Text>

src/components/header.js

@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 const Container = styled.header`
   position: relative;
-  height: 60vh;
+  height: 50vh;
   max-height: 1200px;
   color: white;
 `;
@@ -36,7 +36,6 @@ const Content = styled.div`
     ${props => (props.posY === "middle" ? "-50%" : 0)}
   );
   max-width: var(--theme-max-width);
-  margin: var(--spacing-y-sm) var(--spacing-x-sm);
   padding: var(--spacing-y-sm) var(--spacing-x-sm);
   text-align: center;
 `;

src/components/heading.js

@@ -6,7 +6,12 @@ const Styles = styled.h1`
   margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
   font-size: ${props => `var(--font-size-${props.size})`};
   ${props =>
-    props.shadow &&
+    props.noWrap &&
+    css`
+      white-space: nowrap;
+    `}
+  ${props =>
+    props.withShadow &&
     css`
       text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
     `};
@@ -21,10 +26,10 @@ const sizes = {
   h6: "lg"
 };
 
-export default function Heading({ el = "h1", withShadow, noMargin, children }) {
+export default function Heading({ el = "h1", children, ...other }) {
   const Container = Styles.withComponent(el);
   return (
-    <Container size={sizes[el]} shadow={withShadow} noMargin={noMargin}>
+    <Container size={sizes[el]} {...other}>
       {children}
     </Container>
   );

src/layout.js

@@ -64,7 +64,6 @@ const GlobalStyles = css`
     box-sizing: border-box;
     margin: 0;
     font-family: "Cooper Hewitt", sans-serif;
-    overflow-x: hidden;
   }
 
   *,