ben/ben.wiegand.pw
1
0
Fork 0
Code Issues Pull Requests Activity

reduce cls by fitting thumbnails to 16x9

Browse Source
This commit is contained in:
Benjamin Wiegand 2024-09-08 12:31:27 -07:00
parent 09134e8c36
commit dc5acea909
2 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
www/index.html
View File

@ -67,9 +67,13 @@
</details> </details>
<div class="double-screenshot"> <div class="double-screenshot">
<div class="project-image"> <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"> <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> <label>
<input type="checkbox"> <input type="checkbox">
<div class="lazy-image" style="background-image: url('/img/peercord-login.png')"></div> <div class="lazy-image" style="background-image: url('/img/peercord-login.png')"></div>
@ -77,7 +81,7 @@
</div> </div>
</div> </div>
<div class="project-image"> <div class="project-image">
<label for="lpcc"> <label for="lpcc" class="thumbnail">
<img src="/img/peercord-chat-thumb.webp" alt="PeerCord login screen"> <img src="/img/peercord-chat-thumb.webp" alt="PeerCord login screen">
</label> </label>
<input type="checkbox" id="lpcc"> <input type="checkbox" id="lpcc">
@ -111,7 +115,7 @@
</details> </details>
<div class="double-screenshot"> <div class="double-screenshot">
<div class="project-image"> <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"> <img src="/img/ilo-overview-thumb.webp" alt="overview of my ILO dashboard in grafana">
</label> </label>
<input type="checkbox" id="lio"> <input type="checkbox" id="lio">
@ -125,7 +129,7 @@
</div> </div>
</div> </div>
<div class="project-image"> <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"> <img src="/img/ilo-temperatures-thumb.webp" alt="temperature sensor data shown in my ILO dashboard in grafana">
</label> </label>
<input type="checkbox" id="lit"> <input type="checkbox" id="lit">
@ -139,7 +143,7 @@
</div> </div>
</div> </div>
<div class="project-image"> <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"> <img src="/img/ilo-drives-thumb.webp" alt="drive health, status, and temperature shown in my ILO dashboard in grafana">
</label> </label>
<input type="checkbox" id="lid"> <input type="checkbox" id="lid">
@ -153,7 +157,7 @@
</div> </div>
</div> </div>
<div class="project-image"> <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"> <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> </label>
<input type="checkbox" id="lifci"> <input type="checkbox" id="lifci">
@ -187,7 +191,7 @@
</details> </details>
<div class="double-screenshot"> <div class="double-screenshot">
<div class="project-image"> <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"> <img src="/img/smbus-mitm-arduino-thumb.webp" alt="the arduino leonardo that's attached to my battery, complete with small OLED display">
</label> </label>
<input type="checkbox" id="sma"> <input type="checkbox" id="sma">
@ -201,7 +205,7 @@
</div> </div>
</div> </div>
<div class="project-image"> <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"> <img src="/img/smbus-mitm-wiring-thumb.webp" alt="wiring to intercept communications between the BMS and the laptop">
</label> </label>
<input type="checkbox" id="smw"> <input type="checkbox" id="smw">
@ -229,7 +233,7 @@
</details> </details>
<div class="double-screenshot"> <div class="double-screenshot">
<div class="project-image"> <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"> <img src="/img/security-camera-stream-thumb.webp" alt="two phones, one streaming video to another over the network">
</label> </label>
<input type="checkbox" id="scst"> <input type="checkbox" id="scst">
@ -243,7 +247,7 @@
</div> </div>
</div> </div>
<div class="project-image"> <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"> <img src="/img/security-camera-screenshot-thumb.webp" alt="screenshot of the app while it's recording video">
</label> </label>
<input type="checkbox" id="scsc"> <input type="checkbox" id="scsc">
@ -272,7 +276,7 @@
<div class="double-screenshot"> <div class="double-screenshot">
<div class="project-image"> <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"> <img src="/img/roomba-thumb.webp" alt="a normal Roomba with a webcam, Raspberry pi, Arduino, and a voltage regulator mounted on it">
</label> </label>
<input type="checkbox" id="r"> <input type="checkbox" id="r">
@ -286,7 +290,7 @@
</div> </div>
</div> </div>
<div class="project-image"> <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"> <img src="/img/roomba-control-thumb.webp" alt="webpage for controlling the Roomba and viewing the live feed">
</label> </label>
<input type="checkbox" id="rc"> <input type="checkbox" id="rc">

15
www/style.css
View File

@ -187,10 +187,21 @@ h3 {
align-items: center; align-items: center;
} }
.double-screenshot img { .double-screenshot .thumbnail {
width: 450px; display: flex;
align-items: center;
justify-content: center;
width: 444px;
height: 253.125px;
max-width: 100%; max-width: 100%;
vertical-align: middle; vertical-align: middle;
overflow: hidden;
margin: 3px;
}
.thumbnail img {
min-width: 450px;
min-height: 253.125px;
} }
.project-image input { .project-image input {