From 163957a12539f950a125bbefbdbcfd309a808e9b Mon Sep 17 00:00:00 2001
From: Cobular <22972550+Cobular@users.noreply.github.com>
Date: Tue, 31 Aug 2021 02:10:54 -0700
Subject: [PATCH] Adjusted styling

---
 .idea/PersonalWebsite_Static.iml    |  1 +
 src/components/AboutMe/AboutMe.scss |  1 +
 src/components/ProjectGrid.scss     | 13 +++++++--
 src/components/ProjectGrid.tsx      | 44 ++++++++++++++---------------
 4 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/.idea/PersonalWebsite_Static.iml b/.idea/PersonalWebsite_Static.iml
index 1924757..f5dc9ea 100644
--- a/.idea/PersonalWebsite_Static.iml
+++ b/.idea/PersonalWebsite_Static.iml
@@ -5,6 +5,7 @@
       <excludeFolder url="file://$MODULE_DIR$/temp" />
       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/build" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
diff --git a/src/components/AboutMe/AboutMe.scss b/src/components/AboutMe/AboutMe.scss
index f2df7a0..7f0b4a7 100644
--- a/src/components/AboutMe/AboutMe.scss
+++ b/src/components/AboutMe/AboutMe.scss
@@ -1,6 +1,7 @@
 #about-me-parent {
   margin-left: 10px;
   margin-right: 10px;
+  margin-bottom: 10px;
   display: flex;
   flex-direction: row;
   justify-content: center;
diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss
index 732cd01..f50e3ea 100644
--- a/src/components/ProjectGrid.scss
+++ b/src/components/ProjectGrid.scss
@@ -18,12 +18,21 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
   margin: 10px;
 
   @include media(">=medium")  {
-    width: 90%;
+    width: 95%;
     margin: auto;
   }
 
+  @include media(">=large")  {
+    width: 90%;
+    margin: auto;
+  }
 
   @include media(">=x-large")  {
+    width: 85%;
+    margin: auto;
+  }
+
+  @include media(">=xx-large")  {
     width: 80%;
     max-width: 1900px;
     margin: auto;
@@ -45,7 +54,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
     h2 {
       margin-bottom: 0;
       font-family: "Fira Code", monospace;
-      font-size: 24px;
+      font-size: 30px;
     }
 
     p {
diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx
index 984029a..0de26f7 100644
--- a/src/components/ProjectGrid.tsx
+++ b/src/components/ProjectGrid.tsx
@@ -288,18 +288,6 @@ export function ProjectGrid() {
             }
             link={"https://event.codeday.org/sandiego"}
           />
-          <SmallElementPic
-              image_url={KatSite}
-              image_alt={"Kat's Logo"}
-              title={"Shushicate"}
-              org={"Random Projects"}
-              text={
-                `An art gallery website for my friend, made in svelte. The images are optimized and compressed at 
-                compiletime, creating a few versions and allowing the browser to choose which to display using imageset.
-                 The full resolution image is only sent when selecting an image, keeping the site performant.`
-              }
-              link={"https://www.shushicate.com/"}
-          />
           <LargeElementPic
             image_url={Foresight}
             image_alt={"Foresight Sports Logo"}
@@ -321,6 +309,17 @@ export function ProjectGrid() {
             link={"https://github.com/JakeCover/ScoreSaverExtention"}
           />
 
+          <SmallElement
+              title={"Assorted Discord Bots"}
+              org={"Random Projects"}
+              text={
+                `I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply
+              functionality to Discord years before they finally implemented it first-party, have been obsoleted
+              nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been
+              lost to time and past me's lack of understanding of the importance of backup. I digress, however I really
+               do love writing these sorts of applications!`
+              }
+          />
           <MediumElement
             image_url={Hashicorp}
             image_alt={"HashiCorp Logo"}
@@ -352,16 +351,17 @@ export function ProjectGrid() {
               networking configuration across many jobs easily.`
             }
           />
-          <SmallElement
-            title={"Assorted Discord Bots"}
-            org={"Random Projects"}
-            text={
-              `I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply
-              functionality to Discord years before they finally implemented it first-party, have been obsoleted
-              nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been
-              lost to time and past me's lack of understanding of the importance of backup. I digress, however I really
-               do love writing these sorts of applications!`
-            }
+          <SmallElementPic
+              image_url={KatSite}
+              image_alt={"Kat's Logo"}
+              title={"Shushicate"}
+              org={"Random Projects"}
+              text={
+                `An art gallery website for my friend, made in svelte. The images are optimized and compressed at 
+                compiletime, creating a few versions and allowing the browser to choose which to display using imageset.
+                 The full resolution image is only sent when selecting an image, keeping the site performant.`
+              }
+              link={"https://www.shushicate.com/"}
           />
           <SmallElement
             title={"OVRTools"}