From b1ef248d319b41ac9d51643d68c44a4e5ce48b9e Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 1 Apr 2021 12:12:00 +0700
Subject: [PATCH] Responsive improvements

---
 client/components/coverCard.css | 14 ++------------
 client/index.css                | 17 +++++++++--------
 client/layouts/footer.css       |  8 ++++++--
 client/pages/HomePage.tsx       |  6 ------
 client/pages/homePage.css       | 22 ++++++++++++----------
 5 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/client/components/coverCard.css b/client/components/coverCard.css
index bdf6c0f..43a0e0a 100644
--- a/client/components/coverCard.css
+++ b/client/components/coverCard.css
@@ -11,7 +11,7 @@
     justify-content: flex-start;
     padding: 1rem;
     text-decoration: none;
-    width: 50%;
+    width: 7rem;
 }
 .cover__name {
     font-weight: normal;
@@ -20,18 +20,8 @@
     text-align: center;
 }
 
-@media (min-width: 640px) {
-    .cover {
-        width: 25%;
-    }
-}
 @media (min-width: 768px) {
     .cover {
-        width: 20%;
+        width: 8rem;
     }
 }
-@media (min-width: 1024px) {
-    .cover {
-        width: 16.666666666666668%;
-    }
-}
\ No newline at end of file
diff --git a/client/index.css b/client/index.css
index aa22d62..cfb10fd 100644
--- a/client/index.css
+++ b/client/index.css
@@ -5,7 +5,7 @@
 
 :root {
     --background-color: #e7d900;
-    --text-color: #1e1d6e;
+    --text-color: #111827;
 } 
 body {
     font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -22,6 +22,7 @@ a {
 .container {
     margin: 0 auto;
     max-width: 64rem;
+    padding: 0 1rem;
 }
 .content {
     display: flex;
@@ -46,28 +47,28 @@ a {
     background: var(--background-color);
     display: flex;
     justify-content: center;
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
 }
 .hero__logo {
     display: flex;
     justify-content: center;
 }
 .hero__logo img {
-    height: 16rem;
+    height: 12rem;
     object-fit: cover;
-    width: 24rem;
+    width: 20rem;
 }
 .hero__heading {
     color: var(--text-color);
-    font-size: 3rem;
-    margin: 2rem 0;
+    font-size: 2rem;
+    line-height: 1.5;
     text-align: center;
     text-transform: capitalize;
 }
 .hero__subheading {
     color: var(--text-color);
-    font-size: 2rem;
-    margin: 2rem 0;
+    font-size: 1.5rem;
+    line-height: 1.5;
     text-align: center;
 }
 
diff --git a/client/layouts/footer.css b/client/layouts/footer.css
index 279d937..9b34fef 100644
--- a/client/layouts/footer.css
+++ b/client/layouts/footer.css
@@ -1,5 +1,5 @@
 .footer {
-    padding: 2rem 0 4rem 0;
+    padding: 2rem 0;
 }
 .footer__about {
     border-bottom: 1px solid var(--text-color);
@@ -15,7 +15,6 @@
     color: var(--text-color);
 }
 .footer__grid {
-    display: flex;
     margin-left: -1rem;
     margin-right: -1rem;
 }
@@ -34,4 +33,9 @@
 }
 .footer__product a {
     color: var(--text-color);
+}
+@media (min-width: 640px) {
+    .footer__grid {
+        display: flex;
+    }
 }
\ No newline at end of file
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 7fd1bff..da1de92 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -51,12 +51,6 @@ const HomePage = () => {
                     <div className="home__feature">
                         <div className="home__title">Real Use Cases</div>
                     </div>
-                    <div className="home__feature">
-                        <div className="home__title">Good Practices</div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__title">Accessibility</div>
-                    </div>
                 </div>
 
                 <section className="home__patterns">
diff --git a/client/pages/homePage.css b/client/pages/homePage.css
index edc4381..13483d2 100644
--- a/client/pages/homePage.css
+++ b/client/pages/homePage.css
@@ -10,18 +10,18 @@
     max-width: 48rem;
 }
 .home__feature {
-    padding: 2rem;
+    padding: 0.5rem;
     text-align: center;
-    width: 33.333%;
+    width: 50%;
 }
-.home__feature:not(:nth-child(3n)) {
+.home__feature:not(:nth-child(2n)) {
     border-right: 1px solid var(--text-color);
 }
-.home__feature:nth-child(-n+3) {
+.home__feature:nth-child(-n+2) {
     border-bottom: 1px solid var(--text-color);
 }
 .home__title {
-    font-size: 2rem;
+    font-size: 1.5rem;
     font-weight: 500;
 }
 
@@ -52,16 +52,18 @@
     background-color: var(--background-color);
     border-radius: 0.4rem;
     color: var(--text-color);
-    font-size: 2rem;
+    font-size: 1.5rem;
+    font-weight: 600;
     padding: 1rem 2rem;
 }
 
 .home__sliders {
     align-items: center;
     display: flex;
+    flex-direction: column;
     flex-wrap: nowrap;
+    height: 180rem;
     opacity: 0.4;
-    width: 192rem;
 }
 .home__slide {
     animation: slide 20s linear infinite;
@@ -69,15 +71,15 @@
     flex-wrap: wrap;
     height: 60rem;
     justify-content: center;
-    width: 64rem;
+    width: 60rem;
     will-change: transform;
 }
 
 @keyframes slide {
     from {
-        transform: translateX(0);
+        transform: translateY(0);
     }
     to {
-        transform: translateX(-100%);
+        transform: translateY(-100%);
     }
 }