From 829ccbe738e73e69cdfa0324c99a1b0f4c08b4fb Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Sat, 23 Jan 2021 13:21:20 +0000
Subject: [PATCH] fix(header): improve layout

---
 src/components/header-logo.js |  3 +--
 src/components/header.js      |  3 +--
 src/components/heading.js     | 11 ++++++++---
 src/layout.js                 |  1 -
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/header-logo.js b/src/components/header-logo.js
index 34fa624..fcf842b 100644
--- a/src/components/header-logo.js
+++ b/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>
diff --git a/src/components/header.js b/src/components/header.js
index 6b2851c..5b15e8e 100644
--- a/src/components/header.js
+++ b/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;
 `;
diff --git a/src/components/heading.js b/src/components/heading.js
index c452c30..1b76c2f 100644
--- a/src/components/heading.js
+++ b/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>
   );
diff --git a/src/layout.js b/src/layout.js
index 27a7e18..12def51 100644
--- a/src/layout.js
+++ b/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;
   }
 
   *,