feat(Style): Apply responsive design

BREAKING CHANGE:

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) {

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 {

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