From d52de9bc59253a147ddddb7cbf0baa1adb43bc91 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Wed, 13 Mar 2024 11:37:54 -0300
Subject: [PATCH] feat(Style): Apply responsive design

BREAKING CHANGE:
---
 src/assets/style/global.css |  8 ++--
 src/assets/style/utils.css  | 84 +++++++++++++++++++++++++++++++------
 src/pages/index.astro       |  4 +-
 3 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/src/assets/style/global.css b/src/assets/style/global.css
index 4af91cf..a477fe1 100644
--- a/src/assets/style/global.css
+++ b/src/assets/style/global.css
@@ -70,22 +70,22 @@ p:last-child {
 
 @media screen and (min-width: 640px) {
   body {
-    min-width: 640px;
+    max-width: 640px;
   }
 }
 @media screen and (min-width: 768px) {
   body {
-    min-width: 768px;
+    max-width: 768px;
   }
 }
 @media screen and (min-width: 1024px) {
   body {
-    min-width: 1024px;
+    max-width: 1024px;
   }
 }
 @media screen and (min-width: 1280px) {
   body {
-    min-width: 1280px;
+    max-width: 1280px;
   }
 }
 @media screen and (min-width: 1536px) {
diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css
index 97eb794..b3b8b80 100644
--- a/src/assets/style/utils.css
+++ b/src/assets/style/utils.css
@@ -48,6 +48,65 @@
   flex-grow: 1;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@media screen and (min-width: 640px) {
+  .flex-sm-wrap {
+    flex-wrap: wrap;
+  }
+}
+@media screen and (min-width: 768px) {
+  .flex-md-wrap {
+    flex-wrap: wrap;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .flex-lg-wrap {
+    flex-wrap: wrap;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .flex-xl-wrap {
+    flex-wrap: wrap;
+  }
+}
+@media screen and (min-width: 1536px) {
+  .flex-2xl-wrap {
+    flex-wrap: wrap;
+  }
+}
+
+@media screen and (min-width: 640px) {
+  .flex-sm-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+@media screen and (min-width: 768px) {
+  .flex-md-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .flex-lg-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .flex-xl-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+@media screen and (min-width: 1536px) {
+  .flex-2xl-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
 .flex-center {
   display: flex;
   justify-content: center;
@@ -61,57 +120,58 @@
 .grid {
   --prj-gap: var(--prj-spacing-3);
   --prj-columns: repeat(3, 1fr);
+  --prj-min-col-width: 150px;
   display: grid;
   grid-template-columns: var(--prj-columns);
   gap: var(--prj-gap);
 }
 
 .grid-cols-1 {
-  --prj-columns: repeat(1, 1fr);
+  --prj-columns: repeat(1, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-2 {
-  --prj-columns: repeat(2, 1fr);
+  --prj-columns: repeat(2, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-3 {
-  --prj-columns: repeat(3, 1fr);
+  --prj-columns: repeat(3, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-4 {
-  --prj-columns: repeat(4, 1fr);
+  --prj-columns: repeat(4, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-5 {
-  --prj-columns: repeat(5, 1fr);
+  --prj-columns: repeat(5, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-6 {
-  --prj-columns: repeat(6, 1fr);
+  --prj-columns: repeat(6, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-7 {
-  --prj-columns: repeat(7, 1fr);
+  --prj-columns: repeat(7, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-8 {
-  --prj-columns: repeat(8, 1fr);
+  --prj-columns: repeat(8, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-9 {
-  --prj-columns: repeat(9, 1fr);
+  --prj-columns: repeat(9, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-10 {
-  --prj-columns: repeat(10, 1fr);
+  --prj-columns: repeat(10, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-11 {
-  --prj-columns: repeat(11, 1fr);
+  --prj-columns: repeat(11, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .grid-cols-12 {
-  --prj-columns: repeat(12, 1fr);
+  --prj-columns: repeat(12, minmax(var(--prj-min-col-width), 1fr));
 }
 
 .gap-0 {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bb63421..d09537a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -106,7 +106,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
   <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
     <h2 class="mb-4">What I've been up to...</h2>
 
-    <div class="hstack flex-eq">
+    <div class="hstack flex-eq flex-wrap flex-md-nowrap">
       <div class="vstack justify-content-center">
         <h4 class="text-center">Blog</h4>
         <ol class="list-unstyle mt-0 fs-5">
@@ -144,7 +144,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
       </div>
     </div>
 
-    <div class="mt-5 hstack-reverse flex-eq">
+    <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
       <div class="vstack justify-content-center">
         <h4 class="text-center">Games</h4>
         <ol class="list-unstyle mt-0 fs-5">