Margins more consistent; Projects grids; Mobile optimized

2 files changed, 43 insertions, 28 deletions

diff --git a/src/pages/contacts.astro b/src/pages/contacts.astro
index 908fba8..5123bed 100644
--- a/src/pages/contacts.astro
+++ b/src/pages/contacts.astro
@@ -4,15 +4,17 @@ import { Icon } from 'astro-icon/components';
 import contacts from "../components/contacts.json";
 ---
 <Page title="Contacts" description="Follow me on other platforms">
-    {contacts.map((contact)=> {
-        let icon = "fa6-brands:" + contact.icon;
-        return (
-        <a href={contact.url} target="_blank" title={contact.mouseover}><div class="contacts-card">
-            <Icon name={icon} class="contact-icon" />
-            {contact.platform} ({contact.username})
-        </div></a>
-        )
-    })}
+    <main>
+        {contacts.map((contact)=> {
+            let icon = "fa6-brands:" + contact.icon;
+            return (
+                    <a href={contact.url} target="_blank" title={contact.mouseover}><div class="contacts-card">
+                        <Icon name={icon} class="contact-icon" />
+                        {contact.platform} ({contact.username})
+                    </div></a>
+            )
+        })}
+    </main>
 </Page>
 <style>
     .contacts-card {
@@ -29,4 +31,4 @@ import contacts from "../components/contacts.json";
         margin-right: 0.5em;
         font-size: 1.3em;
     }
-</style>
\ No newline at end of file
+</style>
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>