From cbb53b788bf71f2ef2062d7b48498aeda45a9f2b Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 19:20:47 +0700
Subject: [PATCH 1/2] Add footer

---
 client/DetailsLayout.jsx | 16 ++++----
 client/Home.jsx          | 46 +++++++++++++++-------
 client/Layout.jsx        | 84 ++++++++++++++++++++++++++++++++++++++--
 3 files changed, 121 insertions(+), 25 deletions(-)

diff --git a/client/DetailsLayout.jsx b/client/DetailsLayout.jsx
index 2f6e1b8..953912e 100644
--- a/client/DetailsLayout.jsx
+++ b/client/DetailsLayout.jsx
@@ -6,14 +6,16 @@ import Layout from './Layout';
 const DetailsLayout = ({ name, children }) => {
     return (
         <Layout>
-            <div className="flex items-center mv5 f2">
-                <Link to="/" className="link">Home</Link>
-                <div className="ph2">/</div>
-                <div className="f2">{name}</div>
-            </div>
+            <div className="mw8 center">
+                <div className="flex items-center mv5 f2">
+                    <Link to="/" className="link">Home</Link>
+                    <div className="ph2">/</div>
+                    <div className="f2">{name}</div>
+                </div>
 
-            <div className="mb5">
-                {children}
+                <div className="mb5">
+                    {children}
+                </div>
             </div>
         </Layout>
     );
diff --git a/client/Home.jsx b/client/Home.jsx
index 7de1170..f01beaa 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -11,25 +11,41 @@ const Home = () => {
 
     return (
         <Layout>
-            <h2 className="f2 lh-copy">Layouts</h2>
-
-            <div className="flex flex-wrap justify-between">
-                 <div className="w-30">
-                    <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
-                        <StickyFooterCover />
-                        <h4 className="f4 mv0 pv3">Sticky footer</h4>
-                    </Link>
+            <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 a 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>
 
-            <h2 className="f2 lh-copy">Patterns</h2>
+                <div className="flex flex-wrap justify-between">
+                    <div className="w-30">
+                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                            <StickyFooterCover />
+                            <h4 className="f4 mv0 pv3">Sticky footer</h4>
+                        </Link>
+                    </div>
+                </div>
 
-            <div className="flex flex-wrap justify-between">
-                <div className="w-30">
-                    <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
-                        <CenterCover />
-                        <h4 className="f4 mv0 pv3">Centering</h4>
-                    </Link>
+                <h2 className="f2 lh-copy">Patterns</h2>
+
+                <div className="flex flex-wrap justify-between">
+                    <div className="w-30">
+                        <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                            <CenterCover />
+                            <h4 className="f4 mv0 pv3">Centering</h4>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </Layout>
diff --git a/client/Layout.jsx b/client/Layout.jsx
index d8d4432..67c38b0 100644
--- a/client/Layout.jsx
+++ b/client/Layout.jsx
@@ -6,9 +6,87 @@ const Layout = ({ children }) => {
     }, []);
 
     return (
-        <div className="mw8 center">
-            {children}
-        </div>
+        <>
+            <div className="center">
+                {children}
+            </div>
+            <div className="w-100 bt b--black-30">
+                <div className="mw8 center pv4 flex justify-between">
+                    <div>
+                        <div className="f4 fw6 mb2">Other cool things</div>
+                        <ul className="flex items-center 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">∙</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">∙</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>
+        </>
     );
 };
 

From cf2f8d61532772811cf2661c5c032ccc7ac84981 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 20:10:31 +0700
Subject: [PATCH 2/2] Tweak header

---
 client/DetailsLayout.jsx        | 8 +++-----
 client/Home.jsx                 | 2 +-
 client/layouts/StickyFooter.jsx | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/client/DetailsLayout.jsx b/client/DetailsLayout.jsx
index 953912e..2c34b60 100644
--- a/client/DetailsLayout.jsx
+++ b/client/DetailsLayout.jsx
@@ -7,12 +7,10 @@ const DetailsLayout = ({ name, children }) => {
     return (
         <Layout>
             <div className="mw8 center">
-                <div className="flex items-center mv5 f2">
-                    <Link to="/" className="link">Home</Link>
-                    <div className="ph2">/</div>
-                    <div className="f2">{name}</div>
+                <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>
diff --git a/client/Home.jsx b/client/Home.jsx
index f01beaa..d2c7434 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -18,7 +18,7 @@ const Home = () => {
                             return (
                                 c === ' '
                                 ? <div key={index} className="mh4" />
-                                : <div key={index} className="flex items-center justify-center bg-blue white a mh1 w3 h3 f1 fw6">{c}</div>
+                                : <div key={index} className="flex items-center justify-center bg-blue white mh1 w3 h3 f1 fw6">{c}</div>
                             );
                         })
                     }
diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx
index c26ed41..8126a5f 100644
--- a/client/layouts/StickyFooter.jsx
+++ b/client/layouts/StickyFooter.jsx
@@ -11,7 +11,7 @@ const StickyFooter = () => {
     return (
         <DetailsLayout name="Sticky footer">
             <div className="lh-copy mb3">
-                The footer is always sticky at the bottom if the main content is short.
+                The footer always sticks to the bottom if the main content is short.
             </div>
             <BrowserFrame
                 content={