From edfd53a10a2b9b8fa0346c417d6e975adecd53b4 Mon Sep 17 00:00:00 2001
From: dugo3number2 <daviddgtntbackup@outlook.com>
Date: Sun, 12 Feb 2023 18:45:06 -0600
Subject: [PATCH] Make projects page into a grid

---
 docs/assets/css/main.css | 27 +++++++++++++++++++++++++--
 docs/projects/index.html | 40 +++++++++++++++++++++-------------------
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index 8c90b11..e0cbcc7 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -80,8 +80,31 @@ main {
     display: none;
 }
 
-.smallimg {
-    width: 25%;
+.grid {
+    display: inline-grid;
+    columns: 2;
+}
+
+.griditem {
+    margin: 10px;
+}
+
+@media screen and (min-width: 1000px) {
+    .top {
+        grid-row: 1;
+    }
+    
+    .bottom {
+        grid-row: 2;
+    }
+
+    .left {
+        grid-column: 1;
+    }
+
+    .right {
+        grid-column: 2;
+    }
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/docs/projects/index.html b/docs/projects/index.html
index 244759c..0792f42 100644
--- a/docs/projects/index.html
+++ b/docs/projects/index.html
@@ -27,26 +27,28 @@
 	<main data-m="drop" data-m-duration="0.5">
 		<h1>Projects</h1>
 		<article>
-			<div class="center">
-				<h2>Feeding the Hungry</h2>
-				<img src="../assets/img/bread.png" class="round smallimg" />
+			<div class="grid">
+				<div class="center griditem top left">
+					<h2>Feeding the Hungry</h2>
+					<img src="../assets/img/bread.png" class="round" />
+					<p>At our food bank in Nashville, TN, our goal is to feed as many people as we possibly can in a day. We have long lines coming towards the window and the benches outside are always filled, rain or shine.</p>
+				</div>
+				<div class="center griditem top right">
+					<h2>Financial Aid</h2>
+					<img src="../assets/img/money.png" class="round" />
+					<p>If you contact us and tell us about your situation and how much you need, we can help you with financial aid. We may request extra information if your request looks suspicious.</p>
+				</div>
+				<div class="center griditem bottom left">
+					<h2>Orphanage</h2>
+					<img src="../assets/img/hill.png" class="round" />
+					<p>Our orphanage takes care of over 100 kids, with most finding homes within 4 years. We are planning on offering sponsorships soon. We school all of our kids that are of age using <a href="https://aceschooloftomorrow.com">the A.C.E. curriculum</a>.</p>
+				</div>
+				<div class="center griditem bottom right">
+					<h2>Homeless Shelter</h2>
+					<img src="../assets/img/street.png" class="round" />
+					<p>Our homeless shelter aims to help any person no matter what age if they have nowhere to go. Our homeless shelter is located in Wisconsin Rapids, WI.</p>
+				</div>
 			</div>
-			<p>At our food bank in Nashville, TN, our goal is to feed as many people as we possibly can in a day. We have long lines coming towards the window and the benches outside are always filled, rain or shine.</p>
-			<div class="center">
-				<h2>Financial Aid</h2>
-				<img src="../assets/img/money.png" class="round smallimg" />
-			</div>
-			<p>If you contact us and tell us about your situation and how much you need, we can help you with financial aid. We may request extra information if your request looks suspicious.</p>
-			<div class="center">
-				<h2>Orphanage</h2>
-				<img src="../assets/img/hill.png" class="round smallimg" />
-			</div>
-			<p>Our orphanage takes care of over 100 kids, with most finding homes within 4 years. We are planning on offering sponsorships soon. We school all of our kids that are of age using <a href="https://aceschooloftomorrow.com">the A.C.E. curriculum</a>.</p>
-			<div class="center">
-				<h2>Homeless Shelter</h2>
-				<img src="../assets/img/street.png" class="round smallimg" />
-			</div>
-			<p>Our homeless shelter aims to help any person no matter what age if they have nowhere to go. Our homeless shelter is located in Wisconsin Rapids, WI.</p>
 		</article>
 	</main>
 	<footer data-m="bounce-up" data-m-duration="0.5">