Move header from layout

client/DetailsLayout.jsx

@@ -3,14 +3,13 @@ import { Link } from 'react-router-dom';
 
 import Layout from './Layout';
 
-const DetailsLayout = ({ name, children }) => {
+const DetailsLayout = ({ children }) => {
     return (
         <Layout>
             <div className="mw8 center">
                 <div className="mv4">
                     <Link to="/" className="link black pa1 ba b--black-60">CSS Layout</Link>
                 </div>
-                <h1 className="f1 tc">{name}</h1>
                 <div className="mb5">
                     {children}
                 </div>

client/layouts/Centering.jsx

@@ -9,7 +9,8 @@ const Centering = () => {
     useDocumentTitle('CSS Layout ∙ Centering');
 
     return (
-        <DetailsLayout name="Centering">
+        <DetailsLayout>
+            <h1 className="f1 tc">Centering</h1>
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/StickyFooter.jsx

@@ -9,7 +9,8 @@ const StickyFooter = () => {
     useDocumentTitle('CSS Layout ∙ Sticky footer');
 
     return (
-        <DetailsLayout name="Sticky footer">
+        <DetailsLayout>
+            <h1 className="f1 tc">Sticky footer</h1>
             <div className="lh-copy mb3">
                 The footer always sticks to the bottom if the main content is short.
             </div>

client/layouts/StickyHeader.jsx

@@ -9,7 +9,8 @@ const StickyHeader = () => {
     useDocumentTitle('CSS Layout ∙ Sticky header');
 
     return (
-        <DetailsLayout name="Sticky header">
+        <DetailsLayout>
+            <h1 className="f1 tc">Sticky header</h1>
             <BrowserFrame
                 content={
                     <div>

client/placeholders/BrowserFrame.jsx

@@ -6,7 +6,7 @@ const BrowserFrame = ({ content, source }) => {
 
     return (
         <div className="br2 ba b--black-20">
-            <div className="flex pa3 bb b--black-20 items-center bg-black-05">
+            <div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
                 <div className="br-100 mr1 w1 h1 bg-red" />
                 <div className="br-100 mr1 w1 h1 bg-gold" />
                 <div className="br-100 mr1 w1 h1 bg-red" />