From a105818990de4adb59f3e159bcf50b0cdffbd20f Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 21 Nov 2019 14:29:12 +0700
Subject: [PATCH] Tweak the details page

---
 client/DetailsLayout.jsx                        | 17 +++++++++++------
 client/Footer.jsx                               |  2 +-
 client/Home.jsx                                 | 14 +++++++-------
 client/Layout.jsx                               |  3 +--
 client/layouts/badge/Details.jsx                |  6 +-----
 client/layouts/breadcrumb/Details.jsx           |  6 +-----
 client/layouts/button-with-icon/Details.jsx     |  6 +-----
 client/layouts/card/Details.jsx                 |  6 +-----
 client/layouts/centering/Details.jsx            |  6 +-----
 client/layouts/fixed-at-corner/Details.jsx      |  6 +-----
 client/layouts/holy-grail/Details.jsx           |  6 +-----
 client/layouts/input-add-on/Details.jsx         |  6 +-----
 client/layouts/media-object/Details.jsx         |  6 +-----
 client/layouts/menu/Details.jsx                 |  6 +-----
 client/layouts/modal/Details.jsx                |  6 +-----
 client/layouts/notification/Details.jsx         |  6 +-----
 client/layouts/pagination/Details.jsx           |  6 +-----
 .../layouts/previous-next-buttons/Details.jsx   |  6 +-----
 client/layouts/pricing-table/Details.jsx        |  6 +-----
 client/layouts/progress-bar/Details.jsx         |  5 +----
 client/layouts/same-height-columns/Details.jsx  |  6 +-----
 client/layouts/sidebar/Details.jsx              |  6 +-----
 client/layouts/slider/Details.jsx               |  6 +-----
 client/layouts/split-screen/Details.jsx         |  6 +-----
 client/layouts/stepper-input/Details.jsx        |  5 +----
 client/layouts/sticky-footer/Details.jsx        |  6 +-----
 client/layouts/sticky-header/Details.jsx        |  6 +-----
 client/layouts/switch/Details.jsx               |  5 +----
 client/placeholders/BrowserFrame.jsx            |  3 ++-
 29 files changed, 46 insertions(+), 134 deletions(-)

diff --git a/client/DetailsLayout.jsx b/client/DetailsLayout.jsx
index f59d31a..73e8cde 100644
--- a/client/DetailsLayout.jsx
+++ b/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>
diff --git a/client/Footer.jsx b/client/Footer.jsx
index a3e1ef1..f298009 100644
--- a/client/Footer.jsx
+++ b/client/Footer.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Footer = () => {
     return (
-        <div className="mw8 center bl br bb b--black-20 flex justify-between">
+        <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>
 
diff --git a/client/Home.jsx b/client/Home.jsx
index ee21f91..d0521b6 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -33,13 +33,13 @@ const Home = () => {
 
     return (
         <Layout>
-            <div className="pt5 pb4">
-                <h1 className="f1 fw6 flex items-center justify-center">
-                    CSS Layout
-                </h1>
-                <h2 className="fw1 tc lh-copy">a collection of popular layouts and patterns made with CSS</h2>
-            </div>
-            <div className="mw8 center bl br b--black-20">
+            <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>
+
+                    <h2 className="fw1 tc lh-copy ma0 pa4">a collection of popular layouts and patterns made with CSS</h2>
+                </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%)' }}>Layouts</h3>
 
diff --git a/client/Layout.jsx b/client/Layout.jsx
index 1efcb53..fe0274f 100644
--- a/client/Layout.jsx
+++ b/client/Layout.jsx
@@ -8,9 +8,8 @@ const Layout = ({ children }) => {
     }, []);
 
     return (
-        <div className="mw8 mv4 center">
+        <div className="mw8 mb5 center">
             {children}
-
             <Footer />
         </div>
     );
diff --git a/client/layouts/badge/Details.jsx b/client/layouts/badge/Details.jsx
index 5a5895e..028b16c 100644
--- a/client/layouts/badge/Details.jsx
+++ b/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">
diff --git a/client/layouts/breadcrumb/Details.jsx b/client/layouts/breadcrumb/Details.jsx
index abdff4b..3e4d1e0 100644
--- a/client/layouts/breadcrumb/Details.jsx
+++ b/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">
diff --git a/client/layouts/button-with-icon/Details.jsx b/client/layouts/button-with-icon/Details.jsx
index 142831f..e0bdf3e 100644
--- a/client/layouts/button-with-icon/Details.jsx
+++ b/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">
diff --git a/client/layouts/card/Details.jsx b/client/layouts/card/Details.jsx
index 84287a4..ea5a7a4 100644
--- a/client/layouts/card/Details.jsx
+++ b/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">
diff --git a/client/layouts/centering/Details.jsx b/client/layouts/centering/Details.jsx
index 64faacd..0a594f5 100644
--- a/client/layouts/centering/Details.jsx
+++ b/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">
diff --git a/client/layouts/fixed-at-corner/Details.jsx b/client/layouts/fixed-at-corner/Details.jsx
index 8a37913..adc8d9b 100644
--- a/client/layouts/fixed-at-corner/Details.jsx
+++ b/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">
diff --git a/client/layouts/holy-grail/Details.jsx b/client/layouts/holy-grail/Details.jsx
index dba00b9..f57e8de 100644
--- a/client/layouts/holy-grail/Details.jsx
+++ b/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">
diff --git a/client/layouts/input-add-on/Details.jsx b/client/layouts/input-add-on/Details.jsx
index 55b4a4a..67cedf7 100644
--- a/client/layouts/input-add-on/Details.jsx
+++ b/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">
diff --git a/client/layouts/media-object/Details.jsx b/client/layouts/media-object/Details.jsx
index b7a4bbe..38aa459 100644
--- a/client/layouts/media-object/Details.jsx
+++ b/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">
diff --git a/client/layouts/menu/Details.jsx b/client/layouts/menu/Details.jsx
index fe48eb9..91f75b9 100644
--- a/client/layouts/menu/Details.jsx
+++ b/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">
diff --git a/client/layouts/modal/Details.jsx b/client/layouts/modal/Details.jsx
index 45688f0..b1270a0 100644
--- a/client/layouts/modal/Details.jsx
+++ b/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">
diff --git a/client/layouts/notification/Details.jsx b/client/layouts/notification/Details.jsx
index 9dea535..524de7d 100644
--- a/client/layouts/notification/Details.jsx
+++ b/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">
diff --git a/client/layouts/pagination/Details.jsx b/client/layouts/pagination/Details.jsx
index e87158b..c933ae3 100644
--- a/client/layouts/pagination/Details.jsx
+++ b/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">
diff --git a/client/layouts/previous-next-buttons/Details.jsx b/client/layouts/previous-next-buttons/Details.jsx
index 2d75a97..95f3324 100644
--- a/client/layouts/previous-next-buttons/Details.jsx
+++ b/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">
diff --git a/client/layouts/pricing-table/Details.jsx b/client/layouts/pricing-table/Details.jsx
index bbdae9a..4e120a6 100644
--- a/client/layouts/pricing-table/Details.jsx
+++ b/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">
diff --git a/client/layouts/progress-bar/Details.jsx b/client/layouts/progress-bar/Details.jsx
index 97ea89b..4d9b39a 100644
--- a/client/layouts/progress-bar/Details.jsx
+++ b/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">
diff --git a/client/layouts/same-height-columns/Details.jsx b/client/layouts/same-height-columns/Details.jsx
index 1001dea..c32daf1 100644
--- a/client/layouts/same-height-columns/Details.jsx
+++ b/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">
diff --git a/client/layouts/sidebar/Details.jsx b/client/layouts/sidebar/Details.jsx
index d2dbced..8af5544 100644
--- a/client/layouts/sidebar/Details.jsx
+++ b/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={
diff --git a/client/layouts/slider/Details.jsx b/client/layouts/slider/Details.jsx
index 0ae72a3..3cc38cc 100644
--- a/client/layouts/slider/Details.jsx
+++ b/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">
diff --git a/client/layouts/split-screen/Details.jsx b/client/layouts/split-screen/Details.jsx
index a43740a..b1ca8a4 100644
--- a/client/layouts/split-screen/Details.jsx
+++ b/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">
diff --git a/client/layouts/stepper-input/Details.jsx b/client/layouts/stepper-input/Details.jsx
index 27f4302..f641635 100644
--- a/client/layouts/stepper-input/Details.jsx
+++ b/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>
diff --git a/client/layouts/sticky-footer/Details.jsx b/client/layouts/sticky-footer/Details.jsx
index e656869..9d59794 100644
--- a/client/layouts/sticky-footer/Details.jsx
+++ b/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>
diff --git a/client/layouts/sticky-header/Details.jsx b/client/layouts/sticky-header/Details.jsx
index e1440bc..5770ffe 100644
--- a/client/layouts/sticky-header/Details.jsx
+++ b/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={
diff --git a/client/layouts/switch/Details.jsx b/client/layouts/switch/Details.jsx
index 78be163..1903a77 100644
--- a/client/layouts/switch/Details.jsx
+++ b/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={
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index e191de5..74b3b04 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/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" />