rebuild home padding

src/static/css/App.css

@@ -89,10 +89,14 @@ h2 {
   margin-bottom: 2rem;
 }
 
-h3, h4 {
+h3, h4, h5 {
   color: #a8a8a8;
 }
 
+h5 {
+  margin: 0;
+}
+
 strong {
   color: #ecebeb;
 }
@@ -107,6 +111,14 @@ a {
   text-decoration: none;
 }
 
+.transparent {
+  opacity: 0 !important;
+}
+
+.unsetPos {
+  position: unset !important;
+}
+
 .header h1 {
   display: inline-block;
   transition: .4s;
@@ -268,12 +280,13 @@ a {
   text-align: center;
 }
 
-#HomeContentContainer {
+#HomeContent {
   display: inline-block;
   flex-grow: 1;
+  min-width: 65em;
 }
 
-#HomeContent {
+#nametag {
   padding: 3rem;
   display: inline-block;
   background-color: rgb(44, 44, 44, .75);
@@ -281,14 +294,23 @@ a {
   border: solid black 4px;
   text-align: center;
   text-shadow: .15em .15em rgba(255, 255, 255, 0.2);
+  max-width: 30em;
 }
 
-#HomeContent p {
+#nametag p {
   text-shadow: none;
   color: #a8a8a8;
   margin: 0;
 }
 
+#nametagContainer {
+  display: flex;
+  width: 100vw;
+  position: absolute;
+  left: 0;
+  justify-content: center;
+}
+
 .nomargin {
   margin: 0;
 }
@@ -326,8 +348,7 @@ a {
 }
 
 .onRight>* {
-  margin-left: auto;
-  margin-right: 1em;
+  margin: auto;
   margin-bottom: 5px;
 }
 
@@ -829,12 +850,22 @@ a {
   src: url('https://www.chess.com/bundles/web/fonts/chessglyph-new.0cc8115c.woff2');
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 600) {
+  #nametagContainer {
+    width: unset;
+  }
+}
+
+@media screen and (max-width: 1400px) {
 
   #homepage {
     flex-direction: column;
   }
 
+  #HomeContent {
+    min-width: 0;
+  }
+
   .mobileV {
     flex-direction: column;
   }

src/static/js/responsive.js

@@ -9,7 +9,7 @@ function onLoaded() {
     resizer();
   };
   resizer();
-  if (window.innerWidth < 1200) {
+  if (window.innerWidth < 1400) {
     const e = document.querySelector(".navControl");
     e.style.maxHeight = "0px";
   }
@@ -17,7 +17,7 @@ function onLoaded() {
 
 function resizer() {
   const e = document.querySelector(".navControl");
-  if (window.innerWidth > 1200) {
+  if (window.innerWidth > 1400) {
     // desktop view
     scrollFunction();
     window.onscroll = function () {
@@ -68,7 +68,7 @@ function scrollFunction() {
 }
 
 function toggleMenu() {
-  if (window.innerWidth < 1200) {
+  if (window.innerWidth < 1400) {
     const e = document.querySelector(".navControl");
     const bar = document.querySelector(".header");
     if (e.style.maxHeight === "0px") {

src/templates/home.html

@@ -3,11 +3,22 @@
 <div class="foregroundContent homegroundContent">
   <div class="relative">
     <div id="homepage" class="flex">
-    <div id="HomeContentContainer">
+      <div id="HomeContent">
         <div class="flex">
-      <div id="HomeContent" data-aos="fade-up">
+          <div id="nametagContainer">
+            <div id="nametag" data-aos="fade-up">
               <h1>Andrew Simonson</h1>
-        <h3>Computer Science student at Rochester Institute of Technology</h3>
+              <h3>
+                Computer Science student at Rochester Institute of Technology
+              </h3>
+              <h5>🦅 🦅 🦅 Raahhh wtf is homepage content, we don't do that here 🦅 🦅 🦅</h5>
+            </div>
+          </div>
+          <div id="nametag" class="transparent unsetPos" data-aos="fade-up">
+            <h1>Andrew Simonson</h1>
+            <h3>
+              Computer Science student at Rochester Institute of Technology
+            </h3>
           </div>
         </div>
       </div>
@@ -19,8 +30,8 @@
         />
         <br />
         <div class="chess">
-        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
-        }}
+          {% from 'partials/chess.html' import chess %} {{
+          chess('asimonson1125') }}
         </div>
         <br />
         {% from 'partials/bookshelf.html' import bookshelf %} {{