reduce cls by fitting thumbnails to 16x9
This commit is contained in:
Benjamin Wiegand
parent
09134e8c36
commit
dc5acea909
@ -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">
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user