Merge pull request #29 from phuoc-ng/tweak-layouts

Tweak layouts

client/DetailsLayout.jsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import useDocumentTitle from './hooks/useDocumentTitle';
 import Layout from './Layout';
 
-const DetailsLayout = ({ children }) => {
+const DetailsLayout = ({ title, children }) => {
+    useDocumentTitle(`CSS Layout ∙ ${title}`);
+
     return (
         <Layout>
-            <div className="mw8 center">
-                <div className="mv4">
-                    <Link to="/" className="link black pa1 ba b--black-60">CSS Layout</Link>
-                </div>
-                <div className="mb5">
+            <div className="mv4">
+                <Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
+            </div>
+            <div className="bt br bl b--black-20 relative br4 br--top">
+                <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
+
+                <div className="pa5">
                     {children}
                 </div>
             </div>

client/Footer.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+const Footer = () => {
+    return (
+        <div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
+            <div className="bt br b--black-20 relative" style={{ flex: 1 }}>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>PRODUCTS</h3>
+
+                <ul className="list ma0 pa0 lh-copy fw5 pa4">
+                    <li>
+                        <a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
+                            FormValidation
+                        </a>
+                    </li>
+                    <li>
+                        <a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
+                            BlurPage
+                        </a>
+                    </li>
+                    <li>
+                        <a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank">
+                            React PDF Viewer
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <div className="bt b--black-20 relative" style={{ flex: 1 }}>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>ABOUT</h3>
+
+                <div className="pa4">
+                    <div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
+                    <ul className="list ma0 pa0 lh-copy fw5">
+                        <li className="mb1">
+                            <a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
+                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        className="w-60 h-60"
+                                        style={{
+                                            fill: "none",
+                                            stroke: "#FFF",
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 1,
+                                        }}
+                                    >
+                                        <path d={`M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z`} />
+                                    </svg>
+                                </span>
+                                @nghuuphuoc
+                            </a>
+                        </li>
+                        <li className="mb1">
+                            <a href="mailto: me@phuoc.ng" className="link flex items-center">
+                            <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        className="w-60 h-60"
+                                        style={{
+                                            fill: "none",
+                                            stroke: "#FFF",
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 1,
+                                        }}
+                                    >
+                                        <path d={`M2.5,3.954h19c1.105,0,2,0.895,2,2v12c0,1.105-0.895,2-2,2h-19c-1.105,0-2-0.895-2-2v-12 C0.5,4.849,1.395,3.954,2.5,3.954z M22.911,4.536L12,13.454L1.089,4.536`} />
+                                    </svg>
+                                </span>
+                                me@phuoc.ng
+                            </a>
+                        </li>
+                        <li className="mb1">
+                            <a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center">
+                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        className="w-60 h-60"
+                                        style={{
+                                            fill: "none",
+                                            stroke: "#FFF",
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 1,
+                                        }}
+                                    >
+                                        <path d={`M12,0.5C5.649,0.494,0.495,5.638,0.489,11.989c-0.005,4.959,3.17,9.362,7.876,10.925 c0.574,0.1,0.756-0.237,0.756-0.541c0-0.275,0.006-1.037,0-2c-3.2,0.694-3.861-1.515-3.861-1.515 c-0.211-0.695-0.664-1.292-1.276-1.682c-1.044-0.714,0.078-0.7,0.078-0.7c0.739,0.101,1.389,0.538,1.762,1.184 c0.65,1.185,2.139,1.619,3.324,0.968c0.007-0.004,0.015-0.008,0.022-0.012c0.053-0.581,0.312-1.125,0.73-1.532 c-2.553-0.292-5.238-1.278-5.238-5.686C4.646,10.255,5.07,9.15,5.847,8.312C5.495,7.32,5.535,6.232,5.959,5.269 c0,0,0.967-0.309,3.162,1.18c1.885-0.517,3.875-0.517,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18c0.424,0.963,0.465,2.051,0.114,3.043 c0.777,0.839,1.201,1.945,1.183,3.088c0,4.42-2.689,5.391-5.251,5.674c0.557,0.559,0.844,1.333,0.787,2.12v3.184 c0,0.307,0.186,0.647,0.77,0.536c6.028-2.002,9.291-8.51,7.29-14.538C21.369,3.667,16.962,0.492,12,0.5z`} />
+                                    </svg>
+                                </span>
+                                github.com/phuoc-ng/csslayout
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Footer;

client/Home.jsx

@@ -33,172 +33,193 @@ const Home = () => {
 
     return (
         <Layout>
-            <div className="b--black-30 bb pt5 pb4">
-                <div className="tc flex items-center justify-center">
-                    {
-                        'CSS LAYOUT'.split('').map((c, index) => {
-                            return (
-                                c === ' '
-                                ? <div key={index} className="mh4" />
-                                : <div key={index} className="flex items-center justify-center bg-blue white mh1 w3 h3 f1 fw6">{c}</div>
-                            );
-                        })
-                    }
-                </div>
-                <p className="f4 tc lh-copy">a collection of popular layouts and patterns made with CSS</p>
-            </div>
-            <div className="mw8 center pb4">
-                <h2 className="f2 lh-copy">Layouts</h2>
+            <div className="mt5 bl br bt b--black-20 br4 br--top">
+                <div className="relative">
+                    <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>CSS Layout</h1>
 
-                <div className="flex flex-wrap items-start">
-                    <div className="pa1 w-20">
-                        <Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <HolyGrailCover />
-                            <h4 className="f5 mv0 pt3">Holy grail</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <SidebarCover />
-                            <h4 className="f5 mv0 pt3">Sidebar</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <SplitScreenCover />
-                            <h4 className="f5 mv0 pt3">Split screen</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <StickyFooterCover />
-                            <h4 className="f5 mv0 pt3">Sticky footer</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                    <Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                        <StickyHeaderCover />
-                        <h4 className="f5 mv0 pt3">Sticky header</h4>
-                    </Link>
+                    <h2 className="fw3 f3 tc lh-copy ma0 pa4">a collection of popular layouts and patterns made with CSS</h2>
+
+                    <div className="w-30 center mb4">
+                        <ul className="ma0 pa0 list f4 lh-copy">
+                            <li className="flex items-center justify-between">
+                                <div>Zero dependencies</div>
+                                <div>🎉</div>
+                            </li>
+                            <li className="flex items-center justify-between">
+                                <div>No frameworks</div>
+                                <div>🎉</div>
+                            </li>
+                            <li className="flex items-center justify-between">
+                                <div>No CSS hacks</div>
+                                <div>🎉</div>
+                            </li>
+                            <li className="flex items-center justify-between">
+                                <div>Good practices</div>
+                                <div className="br-pill ph2 white bg-dark-blue f6">soon</div>
+                            </li>
+                            <li className="flex items-center justify-between">
+                                <div>Accessibility</div>
+                                <div className="br-pill ph2 white bg-dark-blue f6">soon</div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
 
-                <h2 className="f2 lh-copy">Patterns</h2>
+                <div className="bt b--black-20 relative">
+                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
 
-                <div className="flex flex-wrap items-start">
-                    <div className="pa1 w-20">
-                        <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <BadgeCover />
-                            <h4 className="f5 mv0 pt3">Badge</h4>
+                    <div className="flex flex-wrap items-start pa4">
+                        <div className="pa1 w-20">
+                            <Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <HolyGrailCover />
+                                <h4 className="f5 mv0 pt3">Holy grail</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <SidebarCover />
+                                <h4 className="f5 mv0 pt3">Sidebar</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <SplitScreenCover />
+                                <h4 className="f5 mv0 pt3">Split screen</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <StickyFooterCover />
+                                <h4 className="f5 mv0 pt3">Sticky footer</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                        <Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <StickyHeaderCover />
+                            <h4 className="f5 mv0 pt3">Sticky header</h4>
                         </Link>
+                        </div>
                     </div>
-                    <div className="pa1 w-20">
-                        <Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <BreadcrumbCover />
-                            <h4 className="f5 mv0 pt3">Breadcrumb</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <ButtonWithIconCover />
-                            <h4 className="f5 mv0 pt3">Button with icon</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <CardCover />
-                            <h4 className="f5 mv0 pt3">Card</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <CenterCover />
-                            <h4 className="f5 mv0 pt3">Centering</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <FixedAtCornerCover />
-                            <h4 className="f5 mv0 pt3">Fixed at corner</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <InputAddonCover />
-                            <h4 className="f5 mv0 pt3">Input addon</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <MediaObjectCover />
-                            <h4 className="f5 mv0 pt3">Media object</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <MenuCover />
-                            <h4 className="f5 mv0 pt3">Menu</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <ModalCover />
-                            <h4 className="f5 mv0 pt3">Modal</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <NotificationCover />
-                            <h4 className="f5 mv0 pt3">Notification</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <PaginationCover />
-                            <h4 className="f5 mv0 pt3">Pagination</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <PreviousNextButtonCover />
-                            <h4 className="f5 mv0 pt3">Previous next buttons</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/pricing-table" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <PricingTableCover />
-                            <h4 className="f5 mv0 pt3">Pricing table</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <ProgressBarCover />
-                            <h4 className="f5 mv0 pt3">Progress bar</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <SameHeightColumnsCover />
-                            <h4 className="f5 mv0 pt3">Same height columns</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/slider" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <SliderCover />
-                            <h4 className="f5 mv0 pt3">Slider</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <StepperInputCover />
-                            <h4 className="f5 mv0 pt3">Stepper input</h4>
-                        </Link>
-                    </div>
-                    <div className="pa1 w-20">
-                        <Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <SwitchCover />
-                            <h4 className="f5 mv0 pt3">Switch</h4>
-                        </Link>
+                </div>
+
+                <div className="bt b--black-20 relative">
+                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
+
+                    <div className="flex flex-wrap items-start pa4">
+                        <div className="pa1 w-20">
+                            <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <BadgeCover />
+                                <h4 className="f5 mv0 pt3">Badge</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <BreadcrumbCover />
+                                <h4 className="f5 mv0 pt3">Breadcrumb</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <ButtonWithIconCover />
+                                <h4 className="f5 mv0 pt3">Button with icon</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <CardCover />
+                                <h4 className="f5 mv0 pt3">Card</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <CenterCover />
+                                <h4 className="f5 mv0 pt3">Centering</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <FixedAtCornerCover />
+                                <h4 className="f5 mv0 pt3">Fixed at corner</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <InputAddonCover />
+                                <h4 className="f5 mv0 pt3">Input addon</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <MediaObjectCover />
+                                <h4 className="f5 mv0 pt3">Media object</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <MenuCover />
+                                <h4 className="f5 mv0 pt3">Menu</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <ModalCover />
+                                <h4 className="f5 mv0 pt3">Modal</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <NotificationCover />
+                                <h4 className="f5 mv0 pt3">Notification</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <PaginationCover />
+                                <h4 className="f5 mv0 pt3">Pagination</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <PreviousNextButtonCover />
+                                <h4 className="f5 mv0 pt3">Previous next buttons</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/pricing-table" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <PricingTableCover />
+                                <h4 className="f5 mv0 pt3">Pricing table</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <ProgressBarCover />
+                                <h4 className="f5 mv0 pt3">Progress bar</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <SameHeightColumnsCover />
+                                <h4 className="f5 mv0 pt3">Same height columns</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/slider" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <SliderCover />
+                                <h4 className="f5 mv0 pt3">Slider</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <StepperInputCover />
+                                <h4 className="f5 mv0 pt3">Stepper input</h4>
+                            </Link>
+                        </div>
+                        <div className="pa1 w-20">
+                            <Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <SwitchCover />
+                                <h4 className="f5 mv0 pt3">Switch</h4>
+                            </Link>
+                        </div>
                     </div>
                 </div>
             </div>

client/Layout.jsx

@@ -1,90 +1,17 @@
 import React, { useEffect } from 'react';
 
+import Footer from './Footer';
+
 const Layout = ({ children }) => {
     useEffect(() => {
         window.scrollTo(0, 0);
     }, []);
 
     return (
-        <>
-            <div className="center">
-                {children}
-            </div>
-            <div className="w-100 bt b--black-30">
-                <div className="mw8 center pv5 flex justify-between">
-                    <div>
-                        <div className="f4 fw6 mb2">Other cool things</div>
-                        <ul className="list ma0 pa0 lh-copy fw5">
-                            <li className="pr2">
-                                <a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
-                                    FormValidation
-                                </a>
-                            </li>
-                            <li className="pr2">
-                                <a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
-                                    BlurPage
-                                </a>
-                            </li>
-                            <li className="pr2">
-                                <a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank">
-                                    React PDF Viewer
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                    <div className="flex flex-column items-end">
-                        <div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
-                        <div className="flex items-center">
-                            <a href="https://twitter.com/nghuuphuoc" className="dib dim link black-70 ba b-black-70 br-pill w2 h2 flex items-center justify-center mr2">
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    className="w-60 h-60"
-                                    style={{
-                                        fill: "none",
-                                        stroke: "#000",
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round",
-                                        strokeWidth: 1,
-                                    }}
-                                >
-                                    <path d={`M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z`} />
-                                </svg>
-                            </a>
-                            <a href="mailto: me@phuoc.ng" className="dib dim link black-70 ba b-black-70 br-pill w2 h2 flex items-center justify-center mr2">
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    className="w-60 h-60"
-                                    style={{
-                                        fill: "none",
-                                        stroke: "#000",
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round",
-                                        strokeWidth: 1,
-                                    }}
-                                >
-                                    <path d={`M2.5,3.954h19c1.105,0,2,0.895,2,2v12c0,1.105-0.895,2-2,2h-19c-1.105,0-2-0.895-2-2v-12 C0.5,4.849,1.395,3.954,2.5,3.954z M22.911,4.536L12,13.454L1.089,4.536`} />
-                                </svg>
-                            </a>
-                            <a href="https://github.com/phuoc-ng/csslayout" className="dib dim link black-70 ba b-black-70 br-pill w2 h2 flex items-center justify-center">
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    className="w-60 h-60"
-                                    style={{
-                                        fill: "none",
-                                        stroke: "#000",
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round",
-                                        strokeWidth: 1,
-                                    }}
-                                >
-                                    <path d={`M12,0.5C5.649,0.494,0.495,5.638,0.489,11.989c-0.005,4.959,3.17,9.362,7.876,10.925 c0.574,0.1,0.756-0.237,0.756-0.541c0-0.275,0.006-1.037,0-2c-3.2,0.694-3.861-1.515-3.861-1.515 c-0.211-0.695-0.664-1.292-1.276-1.682c-1.044-0.714,0.078-0.7,0.078-0.7c0.739,0.101,1.389,0.538,1.762,1.184 c0.65,1.185,2.139,1.619,3.324,0.968c0.007-0.004,0.015-0.008,0.022-0.012c0.053-0.581,0.312-1.125,0.73-1.532 c-2.553-0.292-5.238-1.278-5.238-5.686C4.646,10.255,5.07,9.15,5.847,8.312C5.495,7.32,5.535,6.232,5.959,5.269 c0,0,0.967-0.309,3.162,1.18c1.885-0.517,3.875-0.517,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18c0.424,0.963,0.465,2.051,0.114,3.043 c0.777,0.839,1.201,1.945,1.183,3.088c0,4.42-2.689,5.391-5.251,5.674c0.557,0.559,0.844,1.333,0.787,2.12v3.184 c0,0.307,0.186,0.647,0.77,0.536c6.028-2.002,9.291-8.51,7.29-14.538C21.369,3.667,16.962,0.492,12,0.5z`} />
-                                </svg>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </>
+        <div className="mw8 mb5 center">
+            {children}
+            <Footer />
+        </div>
     );
 };
 

client/layouts/badge/Details.jsx

@@ -3,14 +3,10 @@ import React from 'react';
 import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Badge');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Badge</h1>
+        <DetailsLayout title="Badge">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/breadcrumb/Details.jsx

@@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Breadcrumb');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Breadcrumb</h1>
+        <DetailsLayout title="Breadcrumb">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/button-with-icon/Details.jsx

@@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Button with icon');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Button with icon</h1>
+        <DetailsLayout title="Button with icon">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/card/Details.jsx

@@ -5,14 +5,10 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Card');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Card</h1>
+        <DetailsLayout title="Card">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center pa3">

client/layouts/centering/Details.jsx

@@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Centering');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Centering</h1>
+        <DetailsLayout title="Centering">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/fixed-at-corner/Details.jsx

@@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Fixed at corner');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Fixed at corner</h1>
+        <DetailsLayout title="Fixed at corner">
             <BrowserFrame
                 content={
                     <div className="relative h-100">

client/layouts/holy-grail/Details.jsx

@@ -5,14 +5,10 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Holy grail');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Holy grail</h1>
+        <DetailsLayout title="Holy grail">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column">

client/layouts/input-add-on/Details.jsx

@@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Input add-on');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Input add-on</h1>
+        <DetailsLayout title="Input add-on">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/media-object/Details.jsx

@@ -6,14 +6,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import Square from '../../placeholders/Square';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Media object');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Media object</h1>
+        <DetailsLayout title="Media object">
             <BrowserFrame
                 content={
                     <div className="h-100 flex items-start pa3">

client/layouts/menu/Details.jsx

@@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Menu');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Menu</h1>
+        <DetailsLayout title="Menu">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/modal/Details.jsx

@@ -6,14 +6,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Modal');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Modal</h1>
+        <DetailsLayout title="Modal">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/notification/Details.jsx

@@ -5,14 +5,10 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Notification');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Notification</h1>
+        <DetailsLayout title="Notification">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/pagination/Details.jsx

@@ -5,14 +5,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Pagination');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Pagination</h1>
+        <DetailsLayout title="Pagination">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center pa3">

client/layouts/previous-next-buttons/Details.jsx

@@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Previous and next buttons');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Previous and next buttons</h1>
+        <DetailsLayout title="Previous and next buttons">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/pricing-table/Details.jsx

@@ -6,14 +6,10 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Pricing table');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Pricing table</h1>
+        <DetailsLayout title="Pricing table">
             <BrowserFrame
                 content={
                     <div className="h-100 flex items-center justify-center pa3">

client/layouts/progress-bar/Details.jsx

@@ -3,19 +3,16 @@ import React, { useState } from 'react';
 import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 import useInterval from '../../hooks/useInterval';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Progress bar');
     const [progress, setProgress] = useState(0);
     useInterval(() => {
         setProgress(v => v === 100 ? 0 : v + 1);
     }, 1 * 100);
 
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Progress bar</h1>
+        <DetailsLayout title="Progress bar">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/same-height-columns/Details.jsx

@@ -5,14 +5,10 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Same height columns');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Same height columns</h1>
+        <DetailsLayout title="Same height columns">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center pa3">

client/layouts/sidebar/Details.jsx

@@ -4,14 +4,10 @@ import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Sidebar');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Sidebar</h1>
+        <DetailsLayout title="Sidebar">
             <div className="lh-copy mb3">Try to scroll the main content!</div>
             <BrowserFrame
                 content={

client/layouts/slider/Details.jsx

@@ -5,14 +5,10 @@ import Circle from '../../placeholders/Circle';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Slider');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Slider</h1>
+        <DetailsLayout title="Slider">
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">

client/layouts/split-screen/Details.jsx

@@ -6,14 +6,10 @@ import Block from '../../placeholders/Block';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Split screen');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Split screen</h1>
+        <DetailsLayout title="Split screen">
             <BrowserFrame
                 content={
                     <div className="h-100 flex">

client/layouts/stepper-input/Details.jsx

@@ -4,18 +4,15 @@ import { Link } from 'react-router-dom';
 import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Stepper input');
     const [value, setValue] = useState(0);
     const decrease = () => setValue(value - 1);
     const increase = () => setValue(value + 1);
     const change = (e) => setValue(parseInt(e.target.value, 10));
 
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Stepper input</h1>
+        <DetailsLayout title="Stepper input">
             <div className="lh-copy mb3">
                 The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
             </div>

client/layouts/sticky-footer/Details.jsx

@@ -5,14 +5,10 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Sticky footer');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Sticky footer</h1>
+        <DetailsLayout title="Sticky footer">
             <div className="lh-copy mb3">
                 The footer always sticks to the bottom if the main content is short.
             </div>

client/layouts/sticky-header/Details.jsx

@@ -5,14 +5,10 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Sticky header');
-
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Sticky header</h1>
+        <DetailsLayout title="Sticky header">
             <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
             <BrowserFrame
                 content={

client/layouts/switch/Details.jsx

@@ -3,16 +3,13 @@ import React, { useState } from 'react';
 import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import SampleCode from '../../SampleCode';
-import useDocumentTitle from '../../hooks/useDocumentTitle';
 
 const Details = () => {
-    useDocumentTitle('CSS Layout ∙ Switch');
     const [checked, setChecked] = useState(false);
     const toggle = () => setChecked(c => !c);
 
     return (
-        <DetailsLayout>
-            <h1 className="f1 tc">Switch</h1>
+        <DetailsLayout title="Switch">
             <div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
             <BrowserFrame
                 content={

client/placeholders/BrowserFrame.jsx

@@ -5,7 +5,8 @@ const BrowserFrame = ({ content, source }) => {
     const flip = () => setContentActive(isActive => !isActive);
 
     return (
-        <div className="br2 ba b--black-20" style={{ boxShadow: '0 24px 48px -8px rgba(0, 0, 0, .5)' }}>
+        
+        <div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
             <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" />