From 455bc71fef126b2ba3b82c2416a0689e6c787d68 Mon Sep 17 00:00:00 2001
From: Andrew Simonson <andrew@MB-FVFHR37FQ6LR.local>
Date: Fri, 23 Feb 2024 09:47:40 -0600
Subject: [PATCH] mac revealed content overlap on small screen, need to test

---
 src/static/css/App.css  | 25 +++++++++++++++++--------
 src/templates/home.html |  6 +++++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/static/css/App.css b/src/static/css/App.css
index c6056e5..7e5a24a 100644
--- a/src/static/css/App.css
+++ b/src/static/css/App.css
@@ -268,6 +268,11 @@ a {
   text-align: center;
 }
 
+#HomeContentContainer {
+  display: inline-block;
+  flex-grow: 1;
+}
+
 #HomeContent {
   padding: 3rem;
   display: inline-block;
@@ -317,15 +322,12 @@ a {
 }
 
 .onRight {
-  position: absolute;
-  right: 0;
-  top: 0;
-  max-width: 100vw;
-  margin-right: 5px;
+  margin: auto;
 }
 
 .onRight>* {
-  margin: auto;
+  margin-left: auto;
+  margin-right: 1em;
   margin-bottom: 5px;
 }
 
@@ -829,6 +831,10 @@ a {
 
 @media screen and (max-width: 1200px) {
 
+  #homepage {
+    flex-direction: column;
+  }
+
   .mobileV {
     flex-direction: column;
   }
@@ -883,9 +889,12 @@ a {
   }
 
   .onRight {
-    position: unset;
+    margin: unset;
     margin-top: 3rem;
-    margin-right: 0;
+  }
+
+  .onRight > * {
+    margin: auto;
   }
 
   .timeline {
diff --git a/src/templates/home.html b/src/templates/home.html
index a3635d2..5baa65d 100644
--- a/src/templates/home.html
+++ b/src/templates/home.html
@@ -2,12 +2,15 @@
 <div class="foreground homeground"></div>
 <div class="foregroundContent homegroundContent">
   <div class="relative">
-    <div class="flex">
+    <div id="homepage" class="flex">
+    <div id="HomeContentContainer">
+      <div class="flex">
       <div id="HomeContent" data-aos="fade-up">
         <h1>Andrew Simonson</h1>
         <h3>Computer Science student at Rochester Institute of Technology</h3>
       </div>
     </div>
+    </div>
     <div class="onRight" data-aos="fade-up">
       <img
         src="{{ url_for('static', filename='readme-stats-vercel-01-25-2023.svg') }}"
@@ -44,5 +47,6 @@
       </a>
     </div>
   </div>
+  </div>
 </div>
 {% endblock %}