scaling

MattNolanLab · Mar 30, 2024 · cdf28f2 · cdf28f2
1 parent 9d60393
commit cdf28f2
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 25 deletions.
diff --git a/_includes/footer.liquid b/_includes/footer.liquid
@@ -13,32 +13,65 @@
       {% endif %}
     </div>
   </footer>
-{% else %}
-<footer class="sticky-bottom mt-5" role="contentinfo">
-    <div class="container" style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
-        <div style="flex: 0 0 30%;">
+  {% else %}
+  <footer class="sticky-bottom mt-5" role="contentinfo">
+    <div class="container">
+        <div class="footer-element copyright">
             &copy; Copyright {{ site.time | date: '%Y' }}
             {{ site.first_name }}
             {{ site.middle_name }}
             {{ site.last_name }}.
         </div>
-        <div style="flex: 1; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;">
-            <div style="flex: 1; margin: 0 20px;">
-                <a href="https://www.ed.ac.uk/">
-                  <img src="/assets/img/uoe.png" alt="University of Edinburgh logo" style="width: 100%;">
-                </a>
-            </div>
-            <div style="flex: 1; margin: 0 20px;">
-                <a href="https://discovery-brain-sciences.ed.ac.uk/">
-                  <img src="/assets/img/cdbs.png" alt="Centre for Discovery Brain Sciences logo" style="width: 100%;">
-                </a>
-            </div>
-            <div style="flex: 1; margin: 0 20px;">
-                <a href="https://sidb.org.uk/">
-                  <img src="/assets/img/SIDB.gif" alt="Simons Initiative for the Developing Brain logo" style="width: 100%;">
-                </a>
-            </div>
+        <div class="footer-element">
+            <a href="https://www.ed.ac.uk/">
+                <img class="logo" src="/assets/img/uoe.png" alt="University of Edinburgh logo" style="width: 100%;">
+            </a>
+        </div>
+        <div class="footer-element">
+            <a href="https://discovery-brain-sciences.ed.ac.uk/">
+                <img class="logo" src="/assets/img/cdbs.png" alt="Centre for Discovery Brain Sciences logo" style="width: 100%;">
+            </a>
+        </div>
+        <div class="footer-element">
+            <a href="https://sidb.org.uk/">
+                <img class="logo" src="/assets/img/SIDB.gif" alt="Simons Initiative for the Developing Brain logo" style="width: 100%;">
+            </a>
         </div>
     </div>
+
+    <style>
+    .container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .footer-element {
+        flex: 1;
+        margin: 0 20px;
+    }
+
+    .copyright {
+        flex: 2; /* Adjust this value as needed */
+    }
+
+    @media (max-width: 768px) { /* Adjust the pixel value as needed */
+        .container {
+            flex-direction: column;
+        }
+
+        .footer-element {
+            margin: 20px 0;
+        }
+
+        .copyright {
+            flex: 1;
+        }
+
+        .logo {
+            max-width: 50%; /* Adjust this value as needed */
+        }
+    }
+    </style>
 </footer>
 {% endif %}
diff --git a/_includes/header.liquid b/_includes/header.liquid
@@ -1,12 +1,10 @@
 <header>
   <!-- Nav Bar -->
   {% if site.banner %}
-      <div class="container">
-        <div style="position: relative;">
+      <div class="container" style="position: relative; width: fit-content; padding: 0;">
             <img src="/{{site.banner}}" class="banner" alt="Banner Image" style="width: 100%; height: auto;">
-            <p style="line-height: 0.9; position: absolute; top: 70%; left: 54%; color: white; white-space: no-wrap; font-weight: bold; font-size: 200%;">{{site.banner_title_right}}</p>
-            <p style="line-height: 0.9; position: absolute; top: 29%; left: 1.5%; color: white; white-space: no-wrap; font-weight: bold; font-size: 250%;">{{site.banner_title_left}}</p>
-        </div>
+            <p class="banner-text" style="margin: 0; line-height: 0.9; position: absolute; top: 29%; left: 95%; color: white; white-space: no-wrap; font-weight: bold;">{{site.banner_title_right}}</p>
+            <p class="banner-text" style="margin: 0; line-height: 0.9; position: absolute; bottom: 5%; left: 1.2%; color: white; white-space: no-wrap; font-weight: bold;">{{site.banner_title_left}}</p>
       </div>
   {% endif %}
   <nav id="navbar" class="navbar container navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}" role="navigation">
@@ -118,4 +116,20 @@
       </div>
     </progress>
   {% endif %}
+  <script>
+window.addEventListener('resize', resizeFont);
+
+function resizeFont() {
+  var parentWidth = document.querySelector('.container').offsetWidth;
+  var fontSize = parentWidth * 0.05; // Adjust the multiplier as needed
+  var textElements = document.querySelectorAll('.banner-text');
+
+  textElements.forEach(function(element) {
+    element.style.fontSize = fontSize + 'px';
+  });
+}
+
+// Call resizeFont on page load
+resizeFont();
+</script>
 </header>