Merge pull request #48 from beavertronics/add-crystal-skull

Looks good!

Author: SketchedDoughnut

assets/pages/robots/2026-robot.jpg

@@ -8,5 +8,6 @@
 2023: Lockpick
 2024: Beyonce
 2025: Radek
+2026: Crystal Skull
 
 https://beavertronics5970.wixsite.com/bhs-robotics/robots

assets/pages/robots/robot-info.txt

@@ -3,19 +3,38 @@
 -->
 <div class="robot-images">
 
+    <div class="robot-title" style="text-align: left">
+        <a href="https://www.thebluealliance.com/team/5970/2026" class="robot-title-link" target=”_blank”>
+            2026 - Crystal Skull
+        </a>
+    </div>
+    <div class="robot-description">
+        <img src="/assets/pages/robots/2026-robot.jpg">
+        <div class="robot-description-text">
+            <!-- You know why they call it "Rebuilt"? Because your intake will break and you'll have to rebuild it in the pits! -->
+             This year was our first year with a swerve drivetrain and proper vision, and it was very successful; we were able to field a driving robot for every match and while 
+             we did have some drivetrain issues, we overall were a competitive robot 
+             <a target="_blank" href="https://www.thebluealliance.com/match/2026orore_qm37">with competitive defense</a> and <a target="_blank" href="https://www.thebluealliance.com/match/2026orore_sf1m1">a preload auto</a>. 
+             Our robot was designed with a four-bar intake, a spinning indexer system (spindexer), and a fixed shooter powered by a Kraken X60 with a variable 3D-printed hood.
+             During our first competition at Wilsonville, we were the second pick of alliance 2 and made it to finals. At our second competition at CAIS, we were the 
+             second pick of alliance 8 and got eliminated in the Double Elimination Bracket (Round 2). Overall this was a very successful year, and we learned a lot.
+        </div>
+    </div>
+
     <div class = "robot-title" style="text-align: right">
         <a href="https://www.thebluealliance.com/team/5970/2025" class="robot-title-link" target="_blank">
             Radek - 2025
         </a>
     </div>
     <div class="robot-description">
-        <img src="/assets/pages/robots/2025-robot.jpg">
         <div class="robot-description-text">
-            We had to swap Radek's drivetrain to from swerve to a kitbot drivebase with very little turnaround due to shipping delays. The latching deep climb, based 
-            heavily on the Everybot, scored well. The signature bucket arm was designed to allow space for a central climb while still ferrying coral from
-            the back of the robot to the front. On our plywood test reef, this worked great, but the real reef was a lot more bouncy and we spend a lot of time 
-            trying to figure out how to prevent coral from bouncing out.
+            This year was our 10th anniversary of being an FRC team. We had to swap Radek's drivetrain to from swerve to a kitbot drivebase with very little 
+            turnaround due to shipping delays. The latching deep climb, based heavily on the Everybot, scored well. The signature bucket arm was designed to allow space 
+            for a central climb while still ferrying coral from the back of the robot to the front. On our plywood test reef, this worked great, but the real reef was a 
+            lot more bouncy and we spent a lot of time trying to figure out how to prevent coral from bouncing out. We settled on a plywood "tail" that dropped against the 
+            reef to block the coral from bouncing out.
         </div>
+        <img src="/assets/pages/robots/2025-robot.jpg">
     </div>
 
     <!-- 
@@ -40,7 +59,7 @@
     </div>
 
     <!--
-    now the second one is a bit different. and this altnerates back and forth between this format and the format mentioned above
+    now the second one is a bit different. and this alternates back and forth between this format and the format mentioned above
     in this one, there is the title then the description then the image
     the reason for this alternating design is so that for one, the image is on the right side and the description is on the left
     but for the next one, the description is on the right and the image is on the left

robots/body/desktop.html

@@ -1,8 +1,21 @@
 <!-- 
 this contains everything about the robot images and their descriptions 
 -->
- <div>
 
+<div>
+    <div class = "robot-title-mobile">
+        <a href="https://www.thebluealliance.com/team/5970/2026" class="robot-title-link" target="_blank">
+            2026 - Crystal Skull
+        </a>
+    </div>
+    <div class="robot-images-mobile"><img src="/assets/pages/robots/2026-robot.jpg"></div>
+
+    <div class="robot-description-text-mobile">
+        You know why they call it "Rebuilt"? Because your intake will break and you'll have to rebuild it in the pits!
+    </div>
+</div>
+
+<div>
     <div class = "robot-title-mobile">
         <a href="https://www.thebluealliance.com/team/5970/2025" class="robot-title-link" target="_blank">
             2025 - Radek
@@ -11,12 +24,14 @@
     <div class="robot-images-mobile"><img src="/assets/pages/robots/2025-robot.jpg"></div>
 
     <div class="robot-description-text-mobile">
-        We had to swap Radek's drivetrain to from swerve to a kitbot drivebase with very little turnaround due to shipping delays. The latching deep climb, based 
+        We had to swap Radek's drivetrain to from swerve to a kitbot drivebase with very little turnaround due to shipping delays. The latching deep climb, based
         heavily on the Everybot, scored well. The signature bucket arm was designed to allow space for a central climb while still ferrying coral from
-        the back of the robot to the front. On our plywood test reef, this worked great, but the real reef was a lot more bouncy and we spend a lot of time 
-        trying to figure out how to prevent coral from bouncing out.
+        the back of the robot to the front. On our plywood test reef, this worked great, but the real reef was a lot more bouncy and we spent a lot of time
+        trying to figure out how to prevent coral from bouncing out. We settled on a plywood "tail" that dropped against the reef to block the coral from bouncing out.
     </div>
+</div>
 
+<div>
     <!-- 
     im not going to comment all of these
     so im going to only comment the first one (as on mobile formats are the same). capiche?

robots/body/mobile.html

@@ -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-mobile.css

@@ -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()

robots/robots.js

@@ -315,7 +315,6 @@ h1{
   font-weight: bolder;
   font-size: 2.5vw;
   font-family: Futura-lt, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
-  font-weight: light;
 
 }
 
@@ -331,12 +330,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 {
@@ -348,11 +350,12 @@ h1{
   margin-top: 1%;
   margin-left: 5%;
   margin-right: 5%;
-  font-size: 125%;
+  /* 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 {
@@ -383,7 +386,7 @@ h1{
   font-weight: bolder;
   font-family: Futura-m;
   font-size: 1.25vw;
-  font-weight: light;
+  font-weight: lighter;
 
 }
 
@@ -406,7 +409,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 */
 }
@@ -420,7 +423,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 */
 }
@@ -457,7 +460,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;
 }
@@ -487,7 +490,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;
@@ -511,7 +514,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;