Implemented a genuinely shameful reflowing solution for the home page

Author: wyndchyme

index.html

@@ -364,6 +364,8 @@ <h2 id="entry-1-23-10-2024-">Entry 1 (23-10-2024)</h2>
 <script src="scripts/main/vines.js"></script>
 <script src="scripts/main/sidebarfit.js"></script>
 <script src="/scripts/main/header.js"></script>
+<script src="/scripts/main/posswap.js"></script>  
+
 
 </body>
 <div class="copyrightDiv" style="position: fixed; bottom: 0; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url(img/bg/dirt.png); background-size: 32px; image-rendering: pixelated; width: 100%; left: 0; text-align: center; z-index: 100; font-family: 'Minecraft Regular'; font-size: 13pt; color: rgba(255, 255, 255, 0.9); height: 25px;">

scripts/main/posswap.js

@@ -0,0 +1,20 @@
+function swapElementsIfNarrow() {
+    // wyndchyme was here. I'm sorry. This should be flex. I'm really sorry.
+    const didYouKnow = document.querySelector('.didYouKnow');
+    const featuredVideo = document.querySelector('.featuredVideo');
+
+    if (window.innerWidth < 650 && didYouKnow && featuredVideo) {
+      const parent = didYouKnow.parentElement;
+      if (didYouKnow.nextElementSibling === featuredVideo) {
+        parent.insertBefore(featuredVideo, didYouKnow);
+      }
+    } else {
+      const parent = featuredVideo.parentElement;
+      if (featuredVideo.nextElementSibling === didYouKnow) {
+        parent.insertBefore(didYouKnow, featuredVideo); 
+      }
+    }
+  }
+
+  window.addEventListener('load', swapElementsIfNarrow);
+  window.addEventListener('resize', swapElementsIfNarrow);

style.css

@@ -373,12 +373,18 @@ body {
     }
 }
 
-@media (max-width: 550px) {
+@media (max-width: 650px) {
     .didYouKnow {
-        display: none;
+        width: 100% !important;
+        position: relative;
+        height: fit-content;
+        margin-top: -10px !important;
+        margin-bottom: 10px;
     }
     .featuredVideo {
         width: 100% !important;
+        max-height: 300px;
+        height: 75vw;
     }
 }