feat(home): now ipad responsive

Ali Obaji · Ali Obaji · commit a24d99cc8599 · 2019-09-20T13:13:57.000+03:00
diff --git a/pages/home.css b/pages/home.css
@@ -49,14 +49,26 @@
 
 .container .cards-deck {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 340px);
+    grid-template-columns: repeat(auto-fill, 100%);
     grid-auto-rows: 450px;
 
     grid-gap: 20px;
 }
 
-@media (min-width: 991px) {
+@media (min-width: 768px) {
+    .container {
+        grid-template-rows: auto 12rem auto;
+    }
 
+    .container .cards-deck {
+        grid-template-columns: repeat(auto-fill, 320px);
+    }
+}
+
+@media (min-width: 991px) {
+    .container {
+        grid-template-rows: auto 33rem auto;
+    }
 }
 
 @media (min-width: 1200px) {
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -83,7 +83,7 @@ IndexPage.getInitialProps = async ({query}) => {
     const {entries, total, skip, limit} = await getBlogPostEntries({
         tag: query.tag ? query.tag.toString() : '',
         skip: page - 1,
-        limit: 1,
+        limit: 2,
     });
 
     // TODO: need to move outside
diff --git a/shared/components/footer/styles.css b/shared/components/footer/styles.css
@@ -12,6 +12,12 @@ footer .dev-team {
     color: red;
 }
 
+@media (min-width: 768px) {
+    footer {
+        padding: 1rem 3rem;
+    }
+}
+
 @media (min-width: 1200px) {
     footer {
         padding: 1rem 5.5rem;
diff --git a/shared/components/layout/layout.component.css b/shared/components/layout/layout.component.css
@@ -2,6 +2,12 @@
     padding: 2rem 1rem;
 }
 
+@media (min-width: 768px) {
+    .layout {
+        padding: 2rem 3rem;
+    }
+}
+
 @media (min-width: 1200px) {
     .layout {
         padding: 2rem 2.5rem;
