|
173 | 173 | justify-content: center; |
174 | 174 | } |
175 | 175 |
|
176 | | - .screenshots img { |
| 176 | + /* Target both <img> and <video> */ |
| 177 | + .screenshots img, |
| 178 | + .screenshots video { |
177 | 179 | width: 100%; |
178 | 180 | height: auto; |
179 | | - aspect-ratio: 4 / 3; /* Maintains 320x240 aspect ratio */ |
180 | | - object-fit: contain; /* Ensures no cropping of borders */ |
| 181 | + aspect-ratio: 4 / 3; /* Forces 4:3 ratio (e.g. 320x240) */ |
| 182 | + object-fit: contain; /* Keeps full content visible */ |
181 | 183 | border-radius: 10px; |
182 | 184 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
183 | 185 | transition: transform 0.3s ease, box-shadow 0.3s ease; |
| 186 | + background: #000; /* Prevents flash on video load */ |
| 187 | + display: block; /* Removes inline spacing */ |
184 | 188 | } |
185 | 189 |
|
186 | | - .screenshots img:hover { |
| 190 | + /* Unified hover effect */ |
| 191 | + .screenshots img:hover, |
| 192 | + .screenshots video:hover { |
187 | 193 | transform: scale(1.05); |
188 | 194 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); |
| 195 | + cursor: pointer; |
189 | 196 | } |
190 | 197 |
|
191 | 198 | /* GitHub Link */ |
@@ -374,7 +381,7 @@ <h2>Screenshots</h2> |
374 | 381 | <img src="screenshots/light/0.0.6/mpos_camera_qr_320x240.png" alt="Camera QR Code Screenshot"/> |
375 | 382 | <img src="screenshots/light/0.0.6/osupdate_progress3.png" alt="OS Update Progress Screenshot"/> |
376 | 383 | <img src="screenshots/dark/0.0.4/0.0.4_launcher1.png" alt="Dark Theme Launcher Screenshot"/> |
377 | | - <img src="screenshots/dark/0.0.4/0.0.4_drawer.png" alt="Dark Theme Drawer Screenshot"/> |
| 384 | + <video autoplay loop muted playsinline poster="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" width="320" height="240" preload="auto" loading="lazy"><source src="videos/QuasiBird_0.0.3.mp4" type="video/mp4"><img src="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" alt="QuasiBird game in action"></video> |
378 | 385 | <img src="screenshots/dark/0.0.4/0.0.4_wifi_password.png" alt="Dark Theme WiFi Password Screenshot"/> |
379 | 386 | <img src="screenshots/dark/0.0.4/0.0.4_appstore_uninstall_draw.png" alt="Dark Theme App Store Uninstall Screenshot"/> |
380 | 387 | <img src="screenshots/dark/0.0.4/0.0.4_imu1.png" alt="Dark Theme IMU Screenshot"/> |
|
0 commit comments