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;
   }
@@ -893,7 +924,7 @@ a {
     margin-top: 3rem;
   }
 
-  .onRight > * {
+  .onRight>* {
     margin: auto;
   }
 

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") {