Improve text scaling

Author: NoahTheNerd

robots/robots-mobile.css

@@ -26,7 +26,7 @@
   .robot-images-mobile img {
     width: 100%;
     height: auto;
-    border-radius: 2.5px;
+    border-radius: 2vw;
   }
 
   .robot-description-text-mobile {

robots/robots.js

@@ -27,12 +27,39 @@ function on_resize() {
     // then set "currentBody" to desktop
     if(currentBody != "desktop") {
       $("#body").empty()
-      $("#body").load("/robots/body/desktop.html")
+      $("#body").load("/robots/body/desktop.html",fit_text)
       currentBody = "desktop"
+    } else {
+      fit_text()
     }
   }
 }
 
+/*
+fits the text to its associated image
+ */
+function fit_text() {
+  let descriptions = document.querySelectorAll(".robot-description")
+
+  for (const description of descriptions) {
+    let img = description.querySelector("img")
+    let text = description.querySelector(".robot-description-text")
+
+    const adjust = () => {
+      text.style.fontSize = ""
+      let fontSize = parseFloat(window.getComputedStyle(text).fontSize)
+      /* -8 is because some characters extend below the image otherwise, like "g" and "j" */
+      while (text.clientHeight > img.clientHeight-8 && fontSize > 8) {
+        fontSize -= 0.5
+        text.style.fontSize = fontSize + "px"
+      }
+    }
+
+    if (img.complete) adjust()
+    else img.addEventListener('load', adjust)
+  }
+}
+
 // add an event listener for when the page is done loading, which will call on_resize
 window.addEventListener('load', function () {
   on_resize()

shared/css/style.css

@@ -242,7 +242,7 @@ h1{
   justify-content: space-evenly;
   align-items: center;
   font-family: Futura-lt;
-  font-weight: light;
+  font-weight: lighter;
   color: white;
 }
 
@@ -264,7 +264,6 @@ h1{
   font-weight: bolder;
   font-size: 2.5vw;
   font-family: Futura-lt, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
-  font-weight: light;
 
 }
 
@@ -280,14 +279,15 @@ h1{
 .robot-images img {
   width: 50%;
   height: auto;
-  border-radius: 2.5px;
+  border-radius: 0.75vw;
   min-width: 0;
   flex-shrink: 0;
 }
 
 .robot-description {
   display: flex;
   margin-bottom: 5%;
+  align-items: flex-start;
 }
 
 /* .robot-description img {
@@ -299,11 +299,12 @@ h1{
   margin-top: 1%;
   margin-left: 5%;
   margin-right: 5%;
-  font-size: clamp(14px, 1.5vw, 26px); /* font scaling to display size */
+  /* font-size clamping no longer needed, now handled by JS */
+  /*font-size: clamp(14px, 1.5vw, 56px); !* font scaling to display size *!*/
+  font-size: 1.5vw;
   font-family: Futura-lt;
   text-align: center;
-  font-weight: light;
-
+  font-weight: lighter;
 }
 
 .robot-title-link {
@@ -334,7 +335,7 @@ h1{
   font-weight: bolder;
   font-family: Futura-m;
   font-size: 1.25vw;
-  font-weight: light;
+  font-weight: lighter;
 
 }
 
@@ -357,7 +358,7 @@ h1{
   margin-right: 12.5%;
   margin-bottom: 1%;
   padding-top: 2.5%;
-  font-weight: light;
+  font-weight: lighter;
 
   /* justify content left/right added in html */
 }
@@ -371,7 +372,7 @@ h1{
   flex-direction: row;
   padding-bottom: 2.5%;
   font-family: Futura-lt;
-  font-weight: light;
+  font-weight: lighter;
 
   /* text align left/right added in html */
 }
@@ -408,7 +409,7 @@ h1{
   height: 6vw;
   cursor: pointer;
   background-color: black;
-  mask-image: url("/assets/header//hamburg/hamburgerMenuIcon.png");
+  mask-image: url("/assets/header/hamburg/hamburgerMenuIcon.png");
   mask-size: cover;
   z-index: 100;
 }
@@ -438,7 +439,7 @@ h1{
   width: 50vw;
   z-index: 2;
   position: fixed;
-  width: 100vw;
+  width: 100vw;// reset to CSS default before measuring, so resize always starts fresh
   display: flex;
   justify-content: right;
   z-index: 20;
@@ -462,7 +463,7 @@ h1{
   margin-right: 32px;
   text-align: right;
   font-family: Futura;
-  font-weight: light;
+  font-weight: lighter;
   /* margin-left: auto; */
   text-decoration: none;
   color: white;