Tweak header

client/DetailsLayout.jsx

@@ -7,12 +7,10 @@ const DetailsLayout = ({ name, children }) => {
     return (
         <Layout>
             <div className="mw8 center">
-                <div className="flex items-center mv5 f2">
+                <div className="mv4">
-                    <Link to="/" className="link">Home</Link>
+                    <Link to="/" className="link black pa1 ba b--black-60">CSS Layout</Link>
-                    <div className="ph2">/</div>
-                    <div className="f2">{name}</div>
                 </div>
-
+                <h1 className="f1 tc">{name}</h1>
                 <div className="mb5">
                     {children}
                 </div>

client/Home.jsx

@@ -18,7 +18,7 @@ const Home = () => {
                             return (
                                 c === ' '
                                 ? <div key={index} className="mh4" />
-                                : <div key={index} className="flex items-center justify-center bg-blue white a mh1 w3 h3 f1 fw6">{c}</div>
+                                : <div key={index} className="flex items-center justify-center bg-blue white mh1 w3 h3 f1 fw6">{c}</div>
                             );
                         })
                     }

client/layouts/StickyFooter.jsx

@@ -11,7 +11,7 @@ const StickyFooter = () => {
     return (
         <DetailsLayout name="Sticky footer">
             <div className="lh-copy mb3">
-                The footer is always sticky at the bottom if the main content is short.
+                The footer always sticks to the bottom if the main content is short.
             </div>
             <BrowserFrame
                 content={