From dc5acea9092cb155d7b5d7bb8f1bbbec403dbadf Mon Sep 17 00:00:00 2001
From: Benjamin Wiegand <ben@noreply.git.wiegand.pw>
Date: Sun, 8 Sep 2024 12:31:27 -0700
Subject: [PATCH] reduce cls by fitting thumbnails to 16x9

---
 www/index.html | 30 +++++++++++++++++-------------
 www/style.css  | 15 +++++++++++++--
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/www/index.html b/www/index.html
index 4b840ff..d02269d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -67,9 +67,13 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="lpcl"><img src="/img/peercord-login-thumb.webp" alt="PeerCord login screen"></label>
+                            <label for="lpcl" class="thumbnail">
+                                <img src="/img/peercord-login-thumb.webp" alt="PeerCord login screen">
+                            </label>
                             <input type="checkbox" id="lpcl">
-                            <div class="modal"><label for="lpcl" class="modal-bg"></label><label for="lpcl" class="close"></label>
+                            <div class="modal">
+                                <label for="lpcl" class="modal-bg"></label>
+                                <label for="lpcl" class="close"></label>
                                 <label>
                                     <input type="checkbox">
                                     <div class="lazy-image" style="background-image: url('/img/peercord-login.png')"></div>
@@ -77,7 +81,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lpcc">
+                            <label for="lpcc" class="thumbnail">
                                 <img src="/img/peercord-chat-thumb.webp" alt="PeerCord login screen">
                             </label>
                             <input type="checkbox" id="lpcc">
@@ -111,7 +115,7 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="lio">
+                            <label for="lio" class="thumbnail">
                                 <img src="/img/ilo-overview-thumb.webp" alt="overview of my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lio">
@@ -125,7 +129,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lit">
+                            <label for="lit" class="thumbnail">
                                 <img src="/img/ilo-temperatures-thumb.webp" alt="temperature sensor data shown in my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lit">
@@ -139,7 +143,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lid">
+                            <label for="lid" class="thumbnail">
                                 <img src="/img/ilo-drives-thumb.webp" alt="drive health, status, and temperature shown in my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lid">
@@ -153,7 +157,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="lifci">
+                            <label for="lifci" class="thumbnail">
                                 <img src="/img/ilo-fan-and-cpu-info-thumb.webp" alt="fan speed, fan health, fan status, and cpu status shown in my ILO dashboard in grafana">
                             </label>
                             <input type="checkbox" id="lifci">
@@ -187,7 +191,7 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="sma">
+                            <label for="sma" class="thumbnail">
                                 <img src="/img/smbus-mitm-arduino-thumb.webp" alt="the arduino leonardo that's attached to my battery, complete with small OLED display">
                             </label>
                             <input type="checkbox" id="sma">
@@ -201,7 +205,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="smw">
+                            <label for="smw" class="thumbnail">
                                 <img src="/img/smbus-mitm-wiring-thumb.webp" alt="wiring to intercept communications between the BMS and the laptop">
                             </label>
                             <input type="checkbox" id="smw">
@@ -229,7 +233,7 @@
                     </details>
                     <div class="double-screenshot">
                         <div class="project-image">
-                            <label for="scst">
+                            <label for="scst" class="thumbnail">
                                 <img src="/img/security-camera-stream-thumb.webp" alt="two phones, one streaming video to another over the network">
                             </label>
                             <input type="checkbox" id="scst">
@@ -243,7 +247,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="scsc">
+                            <label for="scsc" class="thumbnail">
                                 <img src="/img/security-camera-screenshot-thumb.webp" alt="screenshot of the app while it's recording video">
                             </label>
                             <input type="checkbox" id="scsc">
@@ -272,7 +276,7 @@
                     <div class="double-screenshot">
 
                         <div class="project-image">
-                            <label for="r">
+                            <label for="r" class="thumbnail">
                                 <img src="/img/roomba-thumb.webp" alt="a normal Roomba with a webcam, Raspberry pi, Arduino, and a voltage regulator mounted on it">
                             </label>
                             <input type="checkbox" id="r">
@@ -286,7 +290,7 @@
                             </div>
                         </div>
                         <div class="project-image">
-                            <label for="rc">
+                            <label for="rc" class="thumbnail">
                                 <img src="/img/roomba-control-thumb.webp" alt="webpage for controlling the Roomba and viewing the live feed">
                             </label>
                             <input type="checkbox" id="rc">
diff --git a/www/style.css b/www/style.css
index 531d20a..98f0473 100644
--- a/www/style.css
+++ b/www/style.css
@@ -187,10 +187,21 @@ h3 {
     align-items: center;
 }
 
-.double-screenshot img {
-    width: 450px;
+.double-screenshot .thumbnail {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 444px;
+    height: 253.125px;
     max-width: 100%;
     vertical-align: middle;
+    overflow: hidden;
+    margin: 3px;
+}
+
+.thumbnail img {
+    min-width: 450px;
+    min-height: 253.125px;
 }
 
 .project-image input {