Responsive improvements

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%;
-    }
-}

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;
 }
 

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;
+    }
 }

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">

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%);
     }
 }