feat(logo): add transition

src/components/header-logo.js

@@ -14,6 +14,8 @@ const Top = styled.div`
   filter: grayscale(100%);
   opacity: 0;
   transform: translate3d(0, 50%, 0);
+  transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
+    transform 0.5s ease-in 0.5s;
 
   path:first-child {
     fill: var(--theme-color-primary);
@@ -35,6 +37,7 @@ const Top = styled.div`
 const Middle = styled.div`
   width: 100vw;
   opacity: 0;
+  transition: opacity 0.5s ease-in 0.75s;
   ${props =>
     props.visible &&
     css`
@@ -48,6 +51,8 @@ const Bottom = styled.div`
   filter: grayscale(100%);
   opacity: 0;
   transform: translate3d(0, -50%, 0) rotate(180deg);
+  transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
+    transform 0.5s ease-in 0.5s;
 
   path:first-child {
     fill: var(--theme-color-dark);

src/components/nav.js

@@ -77,10 +77,12 @@ const Heading = styled(Link)`
 const Content = styled.nav`
   flex-grow: 1;
   margin: var(--spacing-y-lg) var(--spacing-x-md);
+  overflow-y: auto;
 
   @media (min-width: 30em) {
     display: flex;
     margin: 0;
+    overflow-y: visible;
   }
 `;
 

src/pages/index.js

@@ -13,7 +13,7 @@ export default function Index({ data }) {
   return (
     <Layout>
       <Header image={data.headerImage.childImageSharp.fluid}>
-        <HeaderLogo />
+        <HeaderLogo transition={true} />
       </Header>
       <Section>
         <Text>