Add sticky header

client/App.jsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Home from './Home';
 import Centering from './layouts/Centering';
 import StickyFooter from './layouts/StickyFooter';
+import StickyHeader from './layouts/StickyHeader';
 
 const App = () => {
     return (
@@ -12,6 +13,7 @@ const App = () => {
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
+                <Route exact={true} path='/sticky-header'><StickyHeader /></Route>
             </Switch>
         </Router>
     );

client/Home.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import CenterCover from './covers/CenterCover';
 import StickyFooterCover from './covers/StickyFooterCover';
+import StickyHeaderCover from './covers/StickyHeaderCover';
 import Layout from './Layout';
 import useDocumentTitle from './useDocumentTitle';
 
@@ -28,22 +29,28 @@ const Home = () => {
             <div className="mw8 center pb4">
                 <h2 className="f2 lh-copy">Layouts</h2>
 
-                <div className="flex flex-wrap justify-between">
+                <div className="flex flex-wrap">
-                    <div className="w-30">
+                    <div className="pa2 w-20">
-                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <StickyFooterCover />
-                            <h4 className="f4 mv0 pv3">Sticky footer</h4>
+                            <h4 className="f4 mv0 pt3">Sticky footer</h4>
+                        </Link>
+                    </div>
+                    <div className="pa2 w-20">
+                        <Link to="/sticky-header" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <StickyHeaderCover />
+                            <h4 className="f4 mv0 pt3">Sticky header</h4>
                         </Link>
                     </div>
                 </div>
 
                 <h2 className="f2 lh-copy">Patterns</h2>
 
-                <div className="flex flex-wrap justify-between">
+                <div className="flex flex-wrap">
-                    <div className="w-30">
+                    <div className="pa2 w-20">
-                        <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                        <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <CenterCover />
-                            <h4 className="f4 mv0 pv3">Centering</h4>
+                            <h4 className="f4 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
                 </div>

client/covers/StickyFooterCover.jsx

@@ -7,7 +7,7 @@ const StickyFooterCover = () => {
     return (
         <Frame size="medium">
             <div className="h-100 flex flex-column">
-                <div className="flex-shrink-0">
+                <div className="flex-shrink-0 b--black-30 br bw2">
                     <div className="w-100 flex items-center pa2">
                         <div className="w1"><Line /></div>
                         <div className="w1 ml-auto"><Line /></div>
@@ -15,7 +15,7 @@ const StickyFooterCover = () => {
                     </div>
                     <Line size="medium" />
                 </div>
-                <div className="flex-grow-1">
+                <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">
                         <div className="w3 mb2"><Line /></div>
                         <div className="w3 mb2"><Line /></div>

client/covers/StickyHeaderCover.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const StickyHeaderCover = () => {
+    return (
+        <Frame size="medium">
+            <div className="h-100 flex flex-column">
+                <div className="flex-shrink-0">
+                    <div className="w-100 flex items-center pa2">
+                        <div className="w1"><Line /></div>
+                        <div className="w1 ml-auto"><Line /></div>
+                        <div className="w1 ml1"><Line /></div>
+                    </div>
+                    <Line size="medium" />
+                </div>
+                <div className="flex-grow-1 b--black-30 br bw2">
+                    <div className="pa2">
+                        <div className="w3 mb2"><Line /></div>
+                        <div className="w3 mb2"><Line /></div>
+                        <div className="w2"><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default StickyHeaderCover;

client/layouts/StickyFooter.jsx

@@ -34,7 +34,7 @@ code={`
 <div style="
     display: flex;
     flex-direction: column;
-    height: '100%';
+    height: 100%;
 ">
     <header style="flex-shrink: 0;">
         ...

client/layouts/StickyHeader.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const StickyHeader = () => {
+    useDocumentTitle('CSS Layout ∙ Sticky header');
+
+    return (
+        <DetailsLayout name="Sticky header">
+            <BrowserFrame
+                content={
+                    <div>
+                        <div className="top-0 bg-white bb b--black-30 bw1 pa3" style={{ position: 'sticky' }}>
+                            Header
+                        </div>
+                        <div className="pa3">
+                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                            <div className="lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div>
+    <header style="
+        position: sticky;
+        top: 0;
+    ">
+        ...
+    </header>
+    <main>
+        ...
+    </main>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default StickyHeader;

client/placeholders/BrowserFrame.jsx

@@ -25,7 +25,7 @@ const BrowserFrame = ({ content, source }) => {
                     transform: isContentActive ? '' : 'rotateY(180deg)',
                 }}
             >
-                <div className="absolute top-0 left-0 h-100 w-100" style={{ backfaceVisibility: 'hidden' }}>
+                <div className="overflow-scroll absolute top-0 left-0 h-100 w-100" style={{ backfaceVisibility: 'hidden' }}>
                     {content}
                 </div>
                 <div