Margins more consistent; Projects grids; Mobile optimized

6 files changed, 74 insertions, 54 deletions

diff --git a/src/components/contacts.json b/src/components/contacts.json
index 6763340..fbad4c0 100644
--- a/src/components/contacts.json
+++ b/src/components/contacts.json
@@ -1,29 +1,23 @@
 [
     {
-        "platform": "GitHub",
-        "icon": "github",
-        "username": "Alee14",
-        "url": "https://github.alee14.me"
-    },
-    {
         "platform": "LinkedIn",
         "icon": "linkedin",
         "username": "AndrewLeeCAN",
         "url": "https://linkedin.alee14.me"
     },
     {
+        "platform": "GitHub",
+        "icon": "github",
+        "username": "Alee14",
+        "url": "https://github.alee14.me"
+    },
+    {
         "platform": "PayPal",
         "icon": "paypal",
         "username": "alee14498",
         "url": "https://paypal.me/alee14498"
     },
     {
-        "platform": "Discord",
-        "icon": "discord",
-        "username": "Andrew Lee Projects",
-        "url": "https://discord.alee14.me"
-    },
-    {
         "platform": "YouTube",
         "icon": "youtube",
         "username": "AndrewLeeCAN",
@@ -36,13 +30,6 @@
         "url": "https://mstdn.ca/@alee"
     },
     {
-        "platform": "X",
-        "icon": "x-twitter",
-        "username": "Alee14498",
-        "url": "https://twitter.alee14.me",
-        "mouseover": "yuck."
-    },
-    {
         "platform": "Instagram",
         "icon": "instagram",
         "username": "alee14498",
@@ -53,5 +40,18 @@
         "icon": "reddit",
         "username": "alee1449",
         "url": "https://reddit.alee14.me"
+    },
+    {
+        "platform": "Discord",
+        "icon": "discord",
+        "username": "Andrew Lee Projects",
+        "url": "https://discord.alee14.me"
+    },
+    {
+        "platform": "X",
+        "icon": "x-twitter",
+        "username": "Alee14498",
+        "url": "https://twitter.alee14.me",
+        "mouseover": "yuck."
     }
-]
\ No newline at end of file
+]
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index 667f7c3..51ebd6b 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -36,7 +36,7 @@ const { title, description } = Astro.props;
         margin: 10px 10em 10px 10em;
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 992px) {
         .container {
             margin: 10px 20px 10px 20px;
         }
diff --git a/src/layouts/PageMarkdown.astro b/src/layouts/PageMarkdown.astro
index 1da7491..4675a78 100644
--- a/src/layouts/PageMarkdown.astro
+++ b/src/layouts/PageMarkdown.astro
@@ -37,7 +37,7 @@ const { frontmatter } = Astro.props;
         margin: 10px 10em 10px 10em;
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 992px) {
         .container {
             margin: 10px 20px 10px 20px;
         }
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>
diff --git a/src/styles/index.css b/src/styles/index.css
index 8df217d..33f84ac 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -16,8 +16,8 @@ p {
     font-size: 1.1em;
 }
 
-.description {
-    line-height: 0.4;
+.description h2 {
+    margin: 0.1em 0;
 }
 
 .social {
@@ -33,12 +33,16 @@ p {
     font-size: 1.2em;
 }
 
+.headline h3 {
+    margin: 0.5em;
+}
+
 .information {
     display: grid;
     grid-template-columns: 1fr 0.7fr;
     grid-template-rows: auto auto;
     gap: 1em;
-    padding: 30px;
+    margin: 2em 10em 2em 10em;
 }
 
 .box {
@@ -58,13 +62,14 @@ p {
 }
 
 /* Mobile view */
-@media (max-width: 768px) {
+@media (max-width: 992px) {
     .social {
         font-size: 2.6em;
         gap: 1em;
     }
 
     .information {
+        margin: 2em;
         grid: auto auto auto / 1fr;
     }