From b456c81391fa285cf73b354fb32d1a27ccc6afbe Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 3 Feb 2020 22:36:30 +0700
Subject: [PATCH] Support smaller screens in home page

---
 client/components/CoverCard.tsx |  2 +-
 client/index.html               |  2 +-
 client/layouts/Footer.tsx       | 60 ++++++++++++++++-----------------
 client/layouts/Layout.tsx       |  2 +-
 client/pages/HomePage.tsx       | 20 +++++------
 client/pages/MadeOf.tsx         | 37 +++++---------------
 6 files changed, 51 insertions(+), 72 deletions(-)
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index 53bedd0..f765464 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -18,6 +18,7 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
         <Link
             to={`/patterns/${slug(pattern)}`}
+            className='w-1/2 md:w-1/5 lg:w-1/6'
             style={{
                 alignItems: 'center',
                 display: 'flex',
@@ -25,7 +26,6 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
                 justifyContent: 'flex-start',
                 padding: '16px',
                 textDecoration: 'none',
-                width: '16.666666666666668%',
             }}
         >
             <CoverLoader pattern={pattern} />
diff --git a/client/index.html b/client/index.html
index fb038a8..deb2ad7 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,7 +7,7 @@
     <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
 </head>
 <body style="width: 100%;">
-    <div id="root"></div>
+    <div id="root" class="m-auto max-w-6xl"></div>
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
 <script>
 window.dataLayer = window.dataLayer || [];
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
index 10e6d1e..2174d6c 100644
--- a/client/layouts/Footer.tsx
+++ b/client/layouts/Footer.tsx
@@ -11,9 +11,8 @@ const Footer: React.FC<{}> = () => {
     return (
         <>
             <div
+                className='xl:border-l xl:border-r xl:border-gray-400'
                 style={{
-                    borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
-                    borderRight: '1px solid rgba(0, 0, 0, 0.2)',
                     padding: '32px',
                     textAlign: 'center',
                 }}
@@ -24,14 +23,11 @@ const Footer: React.FC<{}> = () => {
                 <SubscribeForm />
             </div>
             <div
-                style={{
-                    border: '1px solid rgba(0, 0, 0, 0.2)',
-                    display: 'flex',
-                }}
+                className='md:flex xl:border-l xl:border-r xl:border-b xl:border-gray-400 xl:mb-16'
             >
                 <div
+                    className='border-t border-gray-400 md:border-r'
                     style={{
-                        borderRight: '1px solid rgba(0, 0, 0, 0.2)',
                         display: 'flex',
                         flex: 1,
                         fontSize: '16px',
@@ -58,61 +54,61 @@ const Footer: React.FC<{}> = () => {
                                     padding: '0 8px 0 0',
                                 }}
                             >
-                                .my-products
+                                .products
                             </h3>
                             &#123;
                         </li>
                         <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
-                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                                <div>css-layout,</div>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                    /&#42; You are here &#42;/
-                                </div>
-                            </li>
-                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+                            <li>
                                 <a
-                                    href="https://formvalidation.io"
+                                    href="https://csslayout.io"
+                                    rel="noopener noreferrer"
                                     style={{ textDecoration: 'none' }}
                                     target="_blank"
-                                    title="FormValidation ~ best validation library for JavaScript"
+                                    title="CSS Layout - a collection of popular layouts and patterns made with CSS"
+                                >
+                                    css-layout,
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    href="https://formvalidation.io"
+                                    rel="noopener noreferrer"
+                                    style={{ textDecoration: 'none' }}
+                                    target="_blank"
+                                    title="FormValidation - the best validation library for JavaScript"
                                 >
                                     form-validation,
                                 </a>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                    /&#42; A JS validation library &#42;/
-                                </div>
                             </li>
-                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+                            <li>
                                 <a
                                     href="https://blur.page"
+                                    rel="noopener noreferrer"
                                     style={{ textDecoration: 'none' }}
                                     target="_blank"
-                                    title="BlurPage ~ a browser extension to hide sensitive element on page"
+                                    title="BlurPage - a browser extension to hide sensitive element on page"
                                 >
                                     blur-page,
                                 </a>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                    /&#42; Chrome and Firefox extensions &#42;/
-                                </div>
                             </li>
-                            <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+                            <li>
                                 <a
                                     href="https://react-pdf-viewer.dev"
+                                    rel="noopener noreferrer"
                                     style={{ textDecoration: 'none' }}
                                     target="_blank"
-                                    title="React PDF Viewer ~ a PDF viewer made for React"
+                                    title="React PDF Viewer - a PDF viewer made for React"
                                 >
                                     react-pdf-viewer,
                                 </a>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
-                                    /&#42; A React component &#42;/
-                                </div>
                             </li>
                         </ul>
                         <li>&#125;</li>
                     </ul>
                 </div>
                 <div
+                    className='border-t border-gray-400'
                     style={{
                         flex: 1,
                         fontSize: '16px',
@@ -148,6 +144,7 @@ const Footer: React.FC<{}> = () => {
                                 <div>twitter:</div>
                                 <a
                                     href="https://twitter.com/nghuuphuoc"
+                                    rel="noopener noreferrer"
                                     style={{ marginLeft: 'auto', textDecoration: 'none' }}
                                     target="_blank"
                                 >
@@ -159,6 +156,7 @@ const Footer: React.FC<{}> = () => {
                                 <div>dev.to:</div>
                                 <a
                                     href="https://dev.to/phuocng"
+                                    rel="noopener noreferrer"
                                     style={{ marginLeft: 'auto', textDecoration: 'none' }}
                                     target="_blank"
                                 >
@@ -170,6 +168,7 @@ const Footer: React.FC<{}> = () => {
                                 <div>email:</div>
                                 <a
                                     href="mailto: me@phuoc.ng"
+                                    rel="noopener noreferrer"
                                     style={{ marginLeft: 'auto', textDecoration: 'none' }}
                                     target="_blank"
                                 >
@@ -181,6 +180,7 @@ const Footer: React.FC<{}> = () => {
                                 <div>github:</div>
                                 <a
                                     href="https://github.com/phuoc-ng/csslayout"
+                                    rel="noopener noreferrer"
                                     style={{ marginLeft: 'auto', textDecoration: 'none' }}
                                     target="_blank"
                                 >
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index 7f6f145..3965443 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -16,7 +16,7 @@ const Layout: React.FC<{}> = ({ children }) => {
     return (
         <>
             <Github />
-            <div style={{ margin: '0 auto 64px auto', maxWidth: '1024px', position: 'relative' }}>
+            <div style={{ margin: '0 auto', position: 'relative' }}>
                 {children}
                 <Footer />
             </div>
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 1614eec..a7f0940 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -27,20 +27,18 @@ const HomePage = () => {
                 <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
             </Helmet>
             <div
+                className='xl:border-t xl:border-l xl:border-r xl:border-gray-400'
                 style={{
-                    border: '1px solid rgba(0, 0, 0, 0.2)',
-                    borderBottom: 'none',
                     marginTop: '64px',
                 }}
             >
                 <div style={{ position: 'relative' }}>
                     <h1
+                        className='text-3xl md:text-4xl lg:text-5xl'
                         style={{
                             backgroundColor: '#00449E',
                             borderRadius: '4px',
                             color: '#FFF',
-                            fontSize: '36px',
-                            fontWeight: 600,
                             left: '50%',
                             lineHeight: 1.5,
                             margin: 0,
@@ -66,21 +64,21 @@ const HomePage = () => {
                         a collection of popular layouts and patterns made with CSS
                     </h2>
 
-                    <div style={{ display: 'flex', lineHeight: 1.5 }}>
-                        <div style={{ flex: 1, padding: '24px'}} className="drop-cap">
+                    <div className='md:flex' style={{ lineHeight: 1.5 }}>
+                        <div style={{ flex: 1 }} className="drop-cap p-5">
                             <div style={{ marginBottom: '16px' }}>
                                 Components, patterns and layouts are things you have to deal with everyday.
                             </div>
                             <div>There are a lot of CSS frameworks that provide rich set of layouts and patterns,
                             but I usually don't want to include all of them in my project.</div>
                         </div>
-                        <div style={{ flex: 1, padding: '24px'}} className="drop-cap">
+                        <div style={{ flex: 1 }} className="drop-cap p-5">
                             <div style={{ marginBottom: '16px' }}>
                                 So that I collect most popular layouts and patterns that can be built with pure CSS.
                             </div>
                             <div>They are powered by modern CSS features such as flexbox and CSS grid.</div>
                         </div>
-                        <div style={{ flex: 1, padding: '24px'}} className="drop-cap">
+                        <div style={{ flex: 1 }} className="drop-cap p-5">
                             <div style={{ marginBottom: '16px' }}>
                                 Starting with the most basic part, you can customize easily for each specific need.
                             </div>
@@ -88,7 +86,7 @@ const HomePage = () => {
                         </div>
                     </div>
 
-                    <div style={{ margin: '24px 0', textAlign: 'center' }}>
+                    <div className='flex justify-center' style={{ margin: '24px 0' }}>
                         <ProductHuntBadge />
                     </div>
 
@@ -175,8 +173,8 @@ const HomePage = () => {
                         }}
                     >
                         <div
+                            className='text-5xl lg:text-6xl'
                             style={{
-                                fontSize: '64px',
                                 fontWeight: 600,
                                 marginBottom: '16px',
                             }}
@@ -185,11 +183,11 @@ const HomePage = () => {
                         </div>
                         <Link
                             to="/patterns"
+                            className='text-2xl'
                             style={{
                                 backgroundColor: '#00449e',
                                 borderRadius: '4px',
                                 color: '#FFF',
-                                fontSize: '24px',
                                 padding: '12px 16px',
                                 textDecoration: 'none',
                             }}
diff --git a/client/pages/MadeOf.tsx b/client/pages/MadeOf.tsx
index 018d868..2c38e3e 100644
--- a/client/pages/MadeOf.tsx
+++ b/client/pages/MadeOf.tsx
@@ -16,9 +16,9 @@ const MadeOf: React.FC<{}> = () => {
             }}
         >
             <div
+                className='text-2xl lg:text-4xl'
                 style={{
                     color: '#FFF',
-                    fontSize: '48px',
                     fontWeight: 600,
                     textAlign: 'center',
                     textTransform: 'lowercase',
@@ -32,40 +32,21 @@ const MadeOf: React.FC<{}> = () => {
                     code={`
 this
     .madeWith([react,typescript])
-    .then((r) => lint(r))                           /* tslint */
-    .then((r) => lazyLoad(r))                       /* @loadable/component */
-    .then((r) => optimizeAndBundle(r))              /* webpack */
-    .then((r) => exportHtml(r))                     /* react-snap */
-    .then((r) => deploy(r))                         /* Netlify */
+    .then((r) => lint(r))               /* tslint */
+    .then((r) => lazyLoad(r))           /* @loadable/component */
+    .then((r) => optimizeAndBundle(r))  /* webpack */
+    .then((r) => exportHtml(r))         /* react-snap */
+    .then((r) => deploy(r))             /* Netlify */
     .then((r) => {
         expect(r).is(scalableCode);
         expect(r).is(superFastWebsite);
         expect(r).is(seoFriendly);
     })
+    .finall(() => {
+        /* Give me 1 Github star 🎉 */
+    });
 `}
                 />
-                <div
-                    className="hljs"
-                    style={{
-                        lineHeight: 1.5,
-                        listStyleType: 'none',
-                        marginTop: '-16px',
-                        paddingLeft: '40px',
-                    }}
-                >
-                    .finally(
-                    <span className="hljs-function"><span className="hljs-params">()</span> => </span>
-                    &#123;
-                    <span className="hljs-comment">
-                        <a
-                            href="https://github.com/phuoc-ng/csslayout"
-                            style={{ color: 'currentColor', textDecoration: 'none' }}
-                        >
-                            &#47;* Give me 1 Github star here */
-                        </a>
-                    </span>
-                    }) 🎉
-                </div>
             </div>
         </div>
     );
