⭐ add BLF & sheridan logos

src/routes/+layout.svelte

@@ -40,17 +40,39 @@
 
     setContext("currentTeam", currentTeam)
 
+    const scrollElementIntoView = (element: HTMLElement, behavior?: 'smooth' | 'instant' | 'auto') => {
+
+        let scrollTop = window.pageYOffset || element.scrollTop
+
+        // Furthermore, if you have for example a header outside the iframe
+        // you need to factor in its dimensions when calculating the position to scroll to
+        const finalOffset = element.getBoundingClientRect().top + scrollTop
+
+        element.scrollTo({
+            top: finalOffset * 2,
+            behavior: behavior || 'auto'
+        })
+
+        console.log({finalOffset})
+    }
+
     const centerTv = () => {
-        let wrapper = document.querySelector(".main-wrapper > main")
-        wrapper.scrollIntoView({
-            behavior: "auto",
-            block: "center",
-            inline: "center",
-        });
+        let wrapper = document.querySelector(".main-wrapper")
+        const elementRect = wrapper.getBoundingClientRect();
+
+        // wrapper.scrollIntoView({
+        //     behavior: "instant",
+        //     block: "center",
+        //     inline: "center",
+        // });
+
+        scrollElementIntoView(wrapper)
+        // wrapper.scrollTo({ left: middle})
+        // console.log("scrolling to "+middle)
     }
 
     onMount(() => {
-        new ResizeObserver(() => requestAnimationFrame(() => centerTv())).observe(document.body)
+        new ResizeObserver(() => setTimeout(() => centerTv(), 10)).observe(document.body)
     })
 
     // let aspectRatio = "unknown"
@@ -139,7 +161,11 @@
                     <p id="credits">made with 💖 by <a href="https://webcrawls.live">webcrawls</a></p>
                 </div>
             </div>
-            <img src="/logo/logo-colour-pixels.png" alt="A pixelated version of the Interference Pattern logo."/>
+            <div class="image-bin">
+                <img src="/logo/sheridan-logo.png" alt="The Borderline Fever logo."
+                     style="filter: invert(94%) sepia(94%) saturate(0%) hue-rotate(241deg) brightness(106%) contrast(105%);"/>
+                <img src="/logo/blf-logo.png" alt="The Sheridan College logo."/>
+            </div>
         </div>
     </footer>
 </div>

static/app.css

@@ -123,12 +123,13 @@ footer .footer-container {
     padding-inline: 1.5rem;
     max-width: var(--header-footer-content-width);
     width: 100%;
+    z    height: 100%;
     margin-inline: auto;
 
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: center;
 }
 
 footer .footer-wrapper {
@@ -137,16 +138,33 @@ footer .footer-wrapper {
     flex-direction: column;
 }
 
-footer .footer-container > img {
-    /*height: min-content;*/
-    /*width: 100%;*/
-    width: 150px;
-    /*margin-block: auto;*/
-    align-self: center;
+.image-bin {
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    min-height: 0;
+    align-items: center;
+}
+
+.image-bin img {
+    width: 100px;
+    object-fit: contain;
+    height: min-content;
+}
+
+.image-bin img:last-child {
+    width: 80px;
 }
 
+/*footer .footer-container > img {*/
+/*    !*height: min-content;*!*/
+/*    !*width: 100%;*!*/
+/*    width: 150px;*/
+/*    !*margin-block: auto;*!*/
+/*    align-self: center;*/
+/*    height: 100%;*/
+/*    min-height: 0;*/
+/*}*/
+
 footer .section {
     display: flex;
     flex-direction: row;
@@ -326,21 +344,21 @@ main .tv-nav a:hover {
 /*}*/
 
 @media screen and (max-width: 550px) {
-    main {
-        transform: scale(0.9);
-    }
+    /*main {*/
+    /*    transform: scale(0.9);*/
+    /*}*/
 }
 
 @media screen and (max-width: 475px) {
-    main {
-        transform: scale(0.85);
-    }
+    /*main {*/
+    /*    transform: scale(0.85);*/
+    /*}*/
 }
 
 @media screen and (max-width: 440px) {
-    main {
-        transform: scale(0.8);
-    }
+    /*main {*/
+    /*    transform: scale(0.8);*/
+    /*}*/
 
     footer .footer-container > img {
         width: 80px;