Tweak the collection page

client/components/Heading.tsx

@@ -3,7 +3,9 @@
  * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-import React from 'react';
+import * as React from 'react';
+
+import './heading.css';
 
 interface HeadingProps {
     title: string;
@@ -11,25 +13,7 @@ interface HeadingProps {
 
 const Heading: React.FC<HeadingProps> = ({ title }) => {
     return (
-        <div className='border-t border-gray-400' style={{ position: 'relative' }}>
+        <h3 className="heading">{title}</h3>
-            <h3
-                className='text-2xl'
-                style={{
-                    backgroundColor: '#FFF',
-                    fontWeight: 700,
-                    left: '32px',
-                    lineHeight: 1.5,
-                    margin: 0,
-                    padding: '0 8px',
-                    position: 'absolute',
-                    textTransform: 'uppercase',
-                    top: 0,
-                    transform: 'translate(0, -50%)',
-                }}
-            >
-                {title}
-            </h3>
-        </div>
     );
 };
 

client/components/heading.css

@@ -0,0 +1,18 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.heading {
+    display: grid;
+    font-size: 2rem;
+    grid-template-columns: 1fr auto 1fr;
+    grid-gap: 1rem;
+    text-align: center;
+}
+.heading::before,
+.heading::after {
+    align-self: center;
+    border-top: 0.25rem double var(--text-color);
+    content: '';
+}

client/index.css

@@ -18,6 +18,10 @@ a {
     text-decoration: none;
 }
 
+code {
+    font-family: 'Source Code Pro', monospace;
+}
+
 /* Layout */
 .container {
     margin: 0 auto;
@@ -28,16 +32,30 @@ a {
     margin: 4rem 0;
 }
 
-.hljs, code {
+.hero {
-    font-family: 'Source Code Pro', monospace;
+    background: var(--background-color);
-    font-size: 14px;
+    display: flex;
+    justify-content: center;
+    padding-bottom: 2rem;
 }
-.drop-cap:first-letter {
+.hero__logo {
-    border: 2px solid;
+    text-align: center;
-    float: left;
+}
-    font-size: 64px;
+.hero__logo img {
-    font-weight: 700;
+    height: 16rem;
-    line-height: 1;
+    object-fit: cover;
-    margin: 0 8px 0 0;
+    width: 24rem;
-    padding: 0 8px;    
+}
+.hreo__heading {
+    color: var(--text-color);
+    font-size: 3rem;
+    margin: 2rem 0;
+    text-align: center;
+    text-transform: capitalize;
+}
+.hero__subheading {
+    color: var(--text-color);
+    font-size: 2rem;
+    margin: 2rem 0;
+    text-align: center;
 }

client/pages/ExplorePage.tsx

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
 
 import Ad from '../components/Ad';
 import CoverCard from '../components/CoverCard';
@@ -13,6 +12,7 @@ import Heading from '../components/Heading';
 import Pattern from '../constants/Pattern';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from '../layouts/Layout';
+import './explorePage.css';
 
 const ExplorePage = () => {
     useDocumentTitle('CSS Layout ∙ Explore');
@@ -24,42 +24,20 @@ const ExplorePage = () => {
                 <meta name="description" content="CSS layouts and patterns" />
                 <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
             </Helmet>
-            <div className='sm:text-2xl p-4 xl:pl-0'>
+            <div className="hero">
-                <Link
+                <div className="container">
-                    to="/"
+                    <h1 className="hreo__heading">Collection of {numPatterns} patterns</h1>
-                    style={{
+                    <h2 className="hero__subheading">Covers are made with CSS only. Inspect them!</h2>
-                        textDecoration: 'none',
-                    }}
-                >
-                    Home
-                </Link>
-                <span className='mx-2'>/</span>
-                <span>Explore</span>
-            </div>
-            <div>
-                <div className='xl:border-l xl:border-t xl:border-r xl:border-gray-400 p-4'>
-                    <h2
-                        className='text-2xl mb-6'
-                        style={{
-                            fontWeight: 300,
-                            lineHeight: 1.5,
-                            padding: '0',
-                            textAlign: 'center',
-                        }}
-                    >
-                        Here is the collection of {numPatterns} patterns
-                    </h2>
-                    <div className='mb-5' style={{ textAlign: 'center' }}>
-                        All covers you see in this page are made with CSS only. Inspect them! 🎉
-                    </div>
-
-                    <Ad />
                 </div>
+            </div>
+
+            <div className="container">
+                <Ad />
 
                 <section>
                     <Heading title="Layout" />
 
-                    <div className='xl:border-l xl:border-r xl:border-gray-400 flex flex-wrap p-8'>
+                    <div className="explore__collection">
                         <CoverCard pattern={Pattern.CardLayout} />
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.SameHeightColumns} />
@@ -75,7 +53,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Navigation" />
 
-                    <div className='xl:border-l xl:border-r xl:border-gray-400 flex flex-wrap p-8'>
+                    <div className="explore__collection">
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.CircularNavigation} />
                         <CoverCard pattern={Pattern.DotNavigation} />
@@ -96,7 +74,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Input" />
 
-                    <div className='xl:border-l xl:border-r xl:border-gray-400 flex flex-wrap p-8'>
+                    <div className="explore__collection">
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
                         <CoverCard pattern={Pattern.Chip} />
                         <CoverCard pattern={Pattern.CustomCheckboxButton} />
@@ -119,7 +97,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Display" />
 
-                    <div className='xl:border-l xl:border-r xl:border-gray-400 flex flex-wrap p-8'>
+                    <div className="explore__collection">
                         <CoverCard pattern={Pattern.Accordion} />
                         <CoverCard pattern={Pattern.ArrowButtons} />
                         <CoverCard pattern={Pattern.Avatar} />
@@ -169,7 +147,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Feedback" />
 
-                    <div className='xl:border-b xl:border-l xl:border-r xl:border-gray-400 flex flex-wrap p-8'>
+                    <div className="explore__collection">
                         <CoverCard pattern={Pattern.Modal} />
                         <CoverCard pattern={Pattern.Notification} />
                         <CoverCard pattern={Pattern.PopoverArrow} />

client/pages/HomePage.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
-import './home.css';
+import './homePage.css';
 
 import Ad from '../components/Ad';
 import CoverCard from '../components/CoverCard';
@@ -31,10 +31,10 @@ const HomePage = () => {
                 <meta name="description" content="CSS layouts and patterns" />
                 <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
             </Helmet>
-            <div className="home__hero">
+            <div className="hero">
                 <div className="container">
-                    <div className="home__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
+                    <div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
-                    <h1 className="home__heading">Popular Layouts & patterns made with CSS</h1>
+                    <h1 className="hero__heading">Popular Layouts & patterns made with CSS</h1>
                 </div>
             </div>
 

client/pages/explorePage.css

@@ -0,0 +1,9 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.explore__collection {
+    display: flex;
+    flex-wrap: wrap;
+}

client/pages/homePage.css

@@ -3,28 +3,6 @@
  * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
  
-.home__hero {
-    background: var(--background-color);
-    display: flex;
-    justify-content: center;
-    padding-bottom: 4rem;
-}
-.home__logo {
-    text-align: center;
-}
-.home__logo img {
-    height: 16rem;
-    object-fit: cover;
-    width: 24rem;
-}
-.home__heading {
-    color: var(--text-color);
-    font-size: 3rem;
-    margin: 0;
-    text-align: center;
-    text-transform: capitalize;
-}
-
 .home__features {
     display: flex;
     flex-wrap: wrap;
@@ -52,6 +30,7 @@
     overflow: hidden;
     position: relative;
 }
+
 .home__overlay {
     align-items: center;
     display: flex;