From 692e3a2adb4e92b984f674fc1270251fb1a66342 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Apr 2021 21:59:10 +0700
Subject: [PATCH] Tweak sidebar

---
 client/components/Product.tsx |  3 ++-
 client/components/product.css | 14 +++++++++++---
 client/index.css              |  7 +++----
 client/pages/HomePage.tsx     |  3 ++-
 client/pages/homePage.css     |  5 +++--
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/client/components/Product.tsx b/client/components/Product.tsx
index b430499..dcee56b 100644
--- a/client/components/Product.tsx
+++ b/client/components/Product.tsx
@@ -15,9 +15,10 @@ interface ProductProps {
 
 const Product: React.FC<ProductProps> = ({ product }) => {
     return (
-        <div className="product">
+        <div className="product" style={{ backgroundColor: product.themeColor }}>
             <a href={product.url}>
                 <img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
+                <h3 className="product__name">{product.name}</h3>
                 <div className="product__desc">{product.description}</div>
             </a>
         </div>
diff --git a/client/components/product.css b/client/components/product.css
index 04bac91..cfcbfde 100644
--- a/client/components/product.css
+++ b/client/components/product.css
@@ -4,19 +4,27 @@
  */
 
 .product {
-    border: 1px solid rgba(0, 0, 0, .3);
     border-radius: 0.5rem;
+    color: #FFF;
     margin: 1rem 0;
     overflow: hidden;
+    padding: 1rem;
 }
 .product a {
+    color: #FFF;
+    text-align: center;
     text-decoration: none;
 }
 .product__logo {
+    display: flex;
     height: auto;
-    width: 100%;
+    margin: 0 auto;
+    width: 6rem;
+}
+.product__name {
+    font-size: 1.5rem;
+    margin: 1rem;
 }
 .product__desc {
-    padding: 0.5rem;
     text-align: center;
 }
\ No newline at end of file
diff --git a/client/index.css b/client/index.css
index 99e0e27..8db26c2 100644
--- a/client/index.css
+++ b/client/index.css
@@ -59,9 +59,8 @@ a {
     justify-content: center;
 }
 .hero__logo img {
-    height: 12rem;
     object-fit: cover;
-    width: 20rem;
+    width: 16rem;
 }
 .hero__heading {
     color: var(--color-gray-9);
@@ -154,13 +153,13 @@ pre {
 }
 @media (min-width: 768px) {
     .sidebar {
-        flex-basis: 10rem;
+        flex-basis: 12rem;
         margin-left: 1rem;
     }
 }
 @media (min-width: 1024px) {
     .sidebar {
-        flex-basis: 12rem;
+        flex-basis: 16rem;
         margin-left: 2rem;
     }
 }
\ No newline at end of file
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index cb357d2..b128661 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -43,7 +43,8 @@ const HomePage = () => {
             <div className="hero">
                 <div className="container">
                     <div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
-                    <h1 className="hero__heading">Popular Layouts & patterns made with CSS</h1>
+                    <h1 className="home__heading">CSS Layout</h1>
+                    <h2 className="hero__subheading">Popular Layouts & patterns made with CSS</h2>
                 </div>
             </div>
 
diff --git a/client/pages/homePage.css b/client/pages/homePage.css
index 1186e91..f65b7a7 100644
--- a/client/pages/homePage.css
+++ b/client/pages/homePage.css
@@ -44,9 +44,10 @@
 }
 .home__heading {
     color: var(--color-gray-9);
-    font-size: 4rem;
+    font-size: 3rem;
     font-weight: 600;
-    margin-bottom: 1rem;
+    margin: 1rem;
+    text-align: center;
 }
 .home__explore {
     background-color: var(--background-color);