Margins more consistent; Projects grids; Mobile optimized

1 files changed, 31 insertions, 18 deletions

diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index b6da87a..70eeb08 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -3,31 +3,38 @@ import Page from "../layouts/Page.astro";
 import projects from "../components/projects.json";
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">
-    {
-        projects.map((project) => {
-        return (
-                <div class="cards">
-                    <h1>{project.name}</h1>
-                    <p>{project.description}</p>
-                    {project.links.map((link) => {
-                        return (
-                                <a href={link.url}>{link.name}</a>
-                        )
-                    })}
-                </div>
-        )
-    })
-    }
+    <main>
+        {
+            projects.map((project) => {
+                return (
+                        <div class="cards">
+                            <h1>{project.name}</h1>
+                            <p>{project.description}</p>
+                            {project.links.map((link) => {
+                                return (
+                                        <a href={link.url}>{link.name}</a>
+                                )
+                            })}
+                        </div>
+                )
+            })
+        }
+    </main>
 </Page>
 <style>
+    main {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
     .cards {
         display: flex;
         flex-direction: column;
-        gap: 1em;
         background-color: #3B513B;
         padding: 1.2em;
         border-radius: 20px;
-        margin: 1em;
+        gap: 0.5em;
+        margin: 0.5em;
     }
 
     .cards h1 {
@@ -43,7 +50,13 @@ import projects from "../components/projects.json";
     .cards a {
         text-align: right;
         display: inline-block;
+    }
 
+    /* Mobile view */
+    @media (max-width: 992px) {
+        main {
+            grid-template-columns: 1fr;
+        }
     }
 
-</style>
\ No newline at end of file
+</style>