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: auto;
-  margin-right: 1em;
   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") {

src/templates/home.html

@@ -3,50 +3,61 @@
 <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">
-        <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') }}"
-        class="langstats"
-        alt="Language stats"
-      />
-      <br />
-      <div class="chess">
-        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
-        }}
-      </div>
-      <br />
-      {% from 'partials/bookshelf.html' import bookshelf %} {{
-      bookshelf(var.books) }}
-      <br />
-      <a href="/duck">
         <div class="flex">
-          <img
+          <div id="nametagContainer">
-            alt="duck spinning"
+            <div id="nametag" data-aos="fade-up">
-            src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              <h1>Andrew Simonson</h1>
-            class="smallImg"
+              <h3>
-          />
+                Computer Science student at Rochester Institute of Technology
-          <img
+              </h3>
-            alt="duck spinning"
+              <h5>🦅 🦅 🦅 Raahhh wtf is homepage content, we don't do that here 🦅 🦅 🦅</h5>
-            src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+            </div>
-            class="smallImg"
+          </div>
-          />
+          <div id="nametag" class="transparent unsetPos" data-aos="fade-up">
-          <img
+            <h1>Andrew Simonson</h1>
-            alt="duck spinning"
+            <h3>
-            src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              Computer Science student at Rochester Institute of Technology
-            class="smallImg"
+            </h3>
-          />
+          </div>
         </div>
-      </a>
+      </div>
+      <div class="onRight" data-aos="fade-up">
+        <img
+          src="{{ url_for('static', filename='readme-stats-vercel-01-25-2023.svg') }}"
+          class="langstats"
+          alt="Language stats"
+        />
+        <br />
+        <div class="chess">
+          {% from 'partials/chess.html' import chess %} {{
+          chess('asimonson1125') }}
+        </div>
+        <br />
+        {% from 'partials/bookshelf.html' import bookshelf %} {{
+        bookshelf(var.books) }}
+        <br />
+        <a href="/duck">
+          <div class="flex">
+            <img
+              alt="duck spinning"
+              src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              class="smallImg"
+            />
+            <img
+              alt="duck spinning"
+              src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              class="smallImg"
+            />
+            <img
+              alt="duck spinning"
+              src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              class="smallImg"
+            />
+          </div>
+        </a>
+      </div>
     </div>
   </div>
-  </div>
 </div>
 {% endblock %}