Make header responsive.

Author: rmariuzzo

package-lock.json

@@ -31,7 +31,8 @@
     "gatsby-transformer-remark": "^4.8.0",
     "normalize.css": "^8.0.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-breakpoints": "^10.0.1"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.12",

package.json

@@ -1,40 +1,60 @@
+import { up } from 'styled-breakpoints'
 import styled from 'styled-components'
 
 import { $theme } from '../styles/theme'
+
 import { Link } from './Link'
 
 export const Container = styled.header`
   display: grid;
   grid-template-columns: auto 1fr;
+  row-gap: 1rem;
   align-items: center;
   margin: 2rem 0;
 `
 
-export const Brand = styled(Link)`
+export const Brand = styled.div`
+  grid-row: 1;
+  grid-column: 1 / 3;
+  display: grid;
+  justify-content: center;
+
+  ${up('tablet')} {
+    grid-column: 1 / 1;
+  }
+`
+
+export const BrandLink = styled(Link)`
   color: ${$theme.color.copy};
   text-decoration: none;
   font-weight: ${$theme.fontWeight.black};
   font-size: ${$theme.fontSize.l2.rem}rem;
   line-height: 1.25em;
-  grid-column: 1;
   margin: 0;
-`
 
-export const BrandFirstLetter = styled.span`
-  display: inline-block;
-  width: 1.25em;
-  height: 1.25em;
-  margin-right: 0.05em;
-  background-color: ${$theme.color.copy};
-  color: ${$theme.color.background};
-  text-align: center;
-  border-radius: 1px;
+  > span {
+    display: inline-block;
+    width: 1.25em;
+    height: 1.25em;
+    margin-right: 0.05em;
+    background-color: ${$theme.color.copy};
+    color: ${$theme.color.background};
+    text-align: center;
+    border-radius: 1px;
+  }
 `
 
 export const Nav = styled.nav`
-  grid-column: 2;
+  grid-row: 2;
+  grid-column: 1 / 3;
   display: grid;
-  justify-content: end;
+  justify-content: center;
+
+  ${up('tablet')} {
+    grid-row: 1;
+    grid-column: 2;
+    justify-content: end;
+  }
 `
 
 export const NavMenu = styled.ul`

src/components/Header.styles.ts

@@ -6,8 +6,10 @@ import { Link } from './Link'
 export const Header = () => {
   return (
     <S.Container>
-      <S.Brand to="/">
-        <S.BrandFirstLetter>M</S.BrandFirstLetter>ariuzzo
+      <S.Brand>
+        <S.BrandLink to="/">
+          <span>M</span>ariuzzo
+        </S.BrandLink>
       </S.Brand>
       <S.Nav>
         <S.NavMenu>

src/components/Header.tsx

@@ -29,7 +29,6 @@ export const PageTitle = styled.h1`
 
 export const TextBlock = styled.div`
   color: ${$theme.color.copy};
-  margin: 3rem 0;
   font-size: ${$theme.fontSize.copy1.rem}rem;
   font-weight: ${$theme.fontWeight.regular};
   line-height: 1.5;
@@ -51,4 +50,8 @@ export const TextBlock = styled.div`
   strong {
     font-weight: ${$theme.fontWeight.black};
   }
+
+  pre {
+    overflow-x: auto;
+  }
 `

src/components/Typography.ts

@@ -46,7 +46,7 @@ export const AboutPage: React.FC = () => {
         </p>
         <ul>
           <li>
-            <strong>JavaScript</strong> since 2006, using NodeJS, React and
+            <strong>JavaScript</strong> since 2006. Now using NodeJS, React and
             Redux.
           </li>
           <li>