Aaron/robots page (#55)

* Created Robots page and added lazy-loading to images to improve performance

* Including default.css into commit

* Added aspect ratios to images to hopefully help them load better. Also added more resolutions to choose from in Join Us, I want to experiment with how this runs.

* Added more images for srcset to choose from to fuerther optimize performance.

---------

Co-authored-by: Quashnock <awq@uw.edu>

Author: Quashnock

JoinUs.html

@@ -82,6 +82,7 @@ <h2>Want to Join Us?</h2>
               assets/images/photos/EngineeringTeamMember/EngineeringTeamMember-1200w.webp?width=1200 1200w,
               assets/images/photos/EngineeringTeamMember/EngineeringTeamMember-1920w.webp?width=1920 1920w
             "
+            sizes="(max-width: 768px) 88vw, 45vw"
           />
           <img
             src="assets/images/photos/EngineeringTeamMember/EngineeringTeamMember-320w.jpg"
@@ -92,7 +93,7 @@ <h2>Want to Join Us?</h2>
               assets/images/photos/EngineeringTeamMember/EngineeringTeamMember-1200w.jpg?width=1200 1200w,
               assets/images/photos/EngineeringTeamMember/EngineeringTeamMember-1920w.jpg?width=1920 1920w
             "
-            sizes="(max-width: 768px) 88vw, 25vw"
+            sizes="(max-width: 768px) 88vw, 45vw"
             alt="Photo of electrical engineering team member working with screws"
           />
         </picture>
@@ -131,7 +132,7 @@ <h2>Mentoring Opportunities</h2>
               assets/images/photos/MentoringImage/MentoringImage-1200w.webp?width=1200 1200w,
               assets/images/photos/MentoringImage/MentoringImage-1920w.webp?width=1920 1920w
             "
-            sizes="(max-width: 768px) 88vw, 25vw"
+            sizes="(max-width: 768px) 88vw, 45vw"
           />
           <img
             src="assets/images/photos/MentoringImage/MentoringImage-320w.jpg"
@@ -142,7 +143,7 @@ <h2>Mentoring Opportunities</h2>
               assets/images/photos/MentoringImage/MentoringImage-1200w.jpg?width=1200 1200w,
               assets/images/photos/MentoringImage/MentoringImage-1920w.jpg?width=1920 1920w
             "
-            sizes="(max-width: 768px) 88vw, 30vw"
+            sizes="(max-width: 768px) 88vw, 45vw"
             alt="Photo of a student mentor working with the engineering team"
             loading="lazy"
             encoding="async"

OurStory.html

@@ -45,21 +45,25 @@
         <source
           type="image/webp"
           srcset="
-            assets/images/photos/MoonBackground/MoonBackground-320w.webp   320w,
-            assets/images/photos/MoonBackground/MoonBackground-768w.webp   768w,
-            assets/images/photos/MoonBackground/MoonBackground-1920w.webp 1920w
+            assets/images/photos/MoonBackground/MoonBackground-320w.webp?width=320    320w,
+            assets/images/photos/MoonBackground/MoonBackground-520w.webp?width=520    520w,
+            assets/images/photos/MoonBackground/MoonBackground-768w.webp?width=768    768w,
+            assets/images/photos/MoonBackground/MoonBackground-1200w.webp?width=1200 1200w,
+            assets/images/photos/MoonBackground/MoonBackground-1920w.webp?width=1920 1920w
           "
           sizes="100vw"
         />
         <img
-          src="assets/images/photos/starRainBackground.jpg"
+          src="assets/images/photos/MoonBackground/MoonBackground-320w.jpg"
           srcset="
-            assets/images/photos/MoonBackground/MoonBackground-320w.jpg   320w,
-            assets/images/photos/MoonBackground/MoonBackground-768w.jpg   768w,
-            assets/images/photos/MoonBackground/MoonBackground-1920w.jpg 1920w
+            assets/images/photos/MoonBackground/MoonBackground-320w.jpg?width=320    320w,
+            assets/images/photos/MoonBackground/MoonBackground-520w.jpg?width=520    520w,
+            assets/images/photos/MoonBackground/MoonBackground-768w.jpg?width=768    768w,
+            assets/images/photos/MoonBackground/MoonBackground-1200w.jpg?width=1200 1200w,
+            assets/images/photos/MoonBackground/MoonBackground-1920w.jpg?width=1920 1920w
           "
           sizes="100vw"
-          alt="Background image of a starry night"
+          alt="Background image of the moon"
           class="backgroundImage"
         />
       </picture>

Robots.html

@@ -42,18 +42,23 @@
         <source
           type="image/webp"
           srcset="
-            assets/images/photos/starRainBackground/starRainBackground-320w.webp   320w,
-            assets/images/photos/starRainBackground/starRainBackground-768w.webp   768w,
-            assets/images/photos/starRainBackground/starRainBackground-1920w.webp 1920w
+            assets/images/photos/StarRainBackground/StarRainBackground-320w.webp?width=320    320w,
+            assets/images/photos/StarRainBackground/StarRainBackground-520w.webp?width=520    520w,
+            assets/images/photos/StarRainBackground/StarRainBackground-768w.webp?width=768    768w,
+            assets/images/photos/StarRainBackground/StarRainBackground-1200w.webp?width=1200 1200w,
+            assets/images/photos/StarRainBackground/StarRainBackground-1920w.webp?width=1920 1920w
           "
+          sizes="80vw"
         />
         <img
+          src="assets/images/photos/StarRainBackground/StarRainBackground-320w.jpg"
           srcset="
-            assets/images/photos/starRainBackground/starRainBackground-320w.jpg   320w,
-            assets/images/photos/starRainBackground/starRainBackground-768w.jpg   768w,
-            assets/images/photos/starRainBackground/starRainBackground-1920w.jpg 1920w
+            assets/images/photos/StarRainBackground/StarRainBackground-320w.jpg?width=320    320w,
+            assets/images/photos/StarRainBackground/StarRainBackground-520w.jpg?width=520    520w,
+            assets/images/photos/StarRainBackground/StarRainBackground-1200w.jpg?width=1200 1200w,
+            assets/images/photos/StarRainBackground/starRainBackground-1920w.jpg?width=1920 1920w
           "
-          sizes="100vw"
+          sizes="80vw"
           alt="Background image of falling stars"
         />
       </picture>
@@ -85,20 +90,25 @@ <h3>Why Sponsor Us?</h3>
             <source
               type="image/webp"
               srcset="
-                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.webp   320w,
-                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-768w.webp   768w,
-                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.webp 1920w
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.webp?width=320    320w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-520w.webp?width=520    520w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-768w.webp?width=768    768w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1200w.webp?width=1200 1200w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.webp?width=1920 1920w
               "
+              sizes="(max-width: 768px) 70vw, 30vw"
             />
             <img
-              src="assets/images/photos/starRainBackground.jpg"
+              src="assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.jpg"
               srcset="
-                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.jpg   320w,
-                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-768w.jpg   768w,
-                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.jpg 1920w
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.jpg?width=320    320w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-520w.jpg?width=520    520w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-768w.jpg?width=768    768w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1200w.jpg?width=1200 1200w,
+                assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.jpg?width=1920 1920w
               "
-              sizes="(max-width: 768px) 90vw, 40vw"
-              alt="Background image of falling stars"
+              sizes="(max-width: 768px) 70vw, 30vw"
+              alt="Group photo of the 2024 rover reveal with Viator"
             />
           </picture>
         </div>
@@ -188,21 +198,26 @@ <h3>How to Support Us: Step-by-Step Guide</h3>
             <source
               type="image/webp"
               srcset="
-                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.webp   320w,
-                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-768w.webp   768w,
-                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1920w.webp 1920w
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.webp?width=320    320w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-520w.webp?width=520    520w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-768w.webp?width=768    768w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1200w.webp?width=1200 1200w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1920w.webp?width=1920 1920w
               "
-              sizes="(max-width: 768px) 90vw, 35vw"
+              sizes="(max-width: 768px) 70vw, 20vw"
+
             />
             <img
-              src="assets/images/photos/starRainBackground.jpg"
+              src="assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.jpg"
               srcset="
-                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.jpg   320w,
-                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-768w.jpg   768w,
-                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1920w.jpg 1920w
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.jpg?width=320    320w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-520w.jpg?width=520    520w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-768w.jpg?width=768    768w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1200w.jpg?width=1200 1200w,
+                assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1920w.jpg?width=1920 1920w
               "
-              sizes="(max-width: 768px) 90vw, 35vw"
-              alt="Background image of falling stars"
+              sizes="(max-width: 768px) 88vw, 20vw"
+              alt="Photo of the 2024 Viator rover"
             />
           </picture>
         </div>

Sponsor.html

@@ -64,6 +64,9 @@ main div#starBackgroundSection section picture.imageContainer img.main {
   width: 100%;
   height: auto;
   border: hsl(222, 61%, 87%) 0.5em solid;
+  aspect-ratio: 3/2;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 main div#introductionSection section div.imageContainer div#galleryImagesContainer picture img,
 main div#introductionSection section picture.imageContainer div#galleryImagesContainer picture img,
@@ -94,8 +97,8 @@ main div#introductionSection section div.imageContainer div#galleryButtonsContai
 main div#introductionSection section picture.imageContainer div#galleryButtonsContainer img,
 main div#starBackgroundSection section div.imageContainer div#galleryButtonsContainer img,
 main div#starBackgroundSection section picture.imageContainer div#galleryButtonsContainer img {
-  flex-basis: 2%;
-  aspect-ratio: 1/1;
+  width: 2.5em;
+  height: 2.5em;
   padding: 0.4em;
   background-color: hsl(0, 0%, 100%);
   opacity: 66%;
@@ -118,6 +121,7 @@ main div#starBackgroundSection section picture.imageContainer div#galleryButtons
 main div#introductionSection section picture#heroTrickFireLogo img,
 main div#starBackgroundSection section picture#heroTrickFireLogo img {
   border: none;
+  aspect-ratio: 3/2;
 }
 main div#introductionSection section picture.imageContainer::before,
 main div#starBackgroundSection section picture.imageContainer::before {
@@ -150,7 +154,7 @@ main div#starBackgroundSection section article div#linkContainer {
 }
 main div#introductionSection section article h2,
 main div#starBackgroundSection section article h2 {
-  margin-bottom: 0.5em;
+  margin-bottom: 0.2em;
 }
 main div#introductionSection section article a.leaveSiteLink,
 main div#starBackgroundSection section article a.leaveSiteLink {
@@ -301,26 +305,6 @@ main div#starBackgroundSection section#teamCompetitionSection {
   text-align: center;
   padding: 0em 7vw;
 }
-main div#starBackgroundSection section#teamCompetitionSection div#awardLogoContainer {
-  display: flex;
-  justify-content: space-between;
-  padding: 2em 0;
-}
-main div#starBackgroundSection section#teamCompetitionSection div#awardLogoContainer img {
-  height: 8em;
-  width: auto;
-}
-main div#starBackgroundSection section#teamCompetitionSection::before {
-  background-color: rgb(0, 255, 0);
-  width: 100%;
-  height: 45%;
-  content: "";
-  position: absolute;
-  top: 20%;
-  left: 0;
-  border-radius: 50%;
-  filter: blur(20em);
-}
 
 @media only screen and (max-width: 768px) {
   main div#introductionSection,
@@ -379,18 +363,6 @@ main div#starBackgroundSection section#teamCompetitionSection::before {
   main div#starBackgroundSection section.reversed {
     flex-direction: column;
   }
-  main div#introductionSection section#teamCompetitionSection,
-  main div#starBackgroundSection section#teamCompetitionSection {
-    flex-direction: column !important;
-  }
-  main div#introductionSection section#teamCompetitionSection div#awardLogoContainer,
-  main div#starBackgroundSection section#teamCompetitionSection div#awardLogoContainer {
-    gap: 4em;
-    flex-direction: column;
-    padding: 0 6vw;
-    padding-top: 1.5em;
-    align-items: center;
-  }
   main section#missionSection {
     background-color: black;
     overflow-y: visible;