Add responsive image CSS, resize oversized images, fix aspect ratios, add lazy loading

This commit is contained in:
2026-09-12 12:27:24 +02:00
parent 4c6c10b26e
commit fe315560d9
25 changed files with 42 additions and 30 deletions
+9 -9
View File
@@ -34,23 +34,23 @@ parent: "/retro/"
<p>Workstation machine with multitasking (Geneva), AltRAM, IDE/CF boot, USB and network connectivity, and high-resolution display. My primary system for programming and productive work.</p>
<h2>Gallery</h2>
<img src="high-1.jpg" alt="The Mega ST 4 High machine" width="640" height="640">
<img src="high-1.jpg" alt="The Mega ST 4 High machine" width="640" height="640" loading="lazy">
<p class="caption">The Mega ST 4 "High" workstation.</p>
<img src="high-2.jpg" alt="Mega ST 4 High internal view" width="640" height="640">
<img src="high-2.jpg" alt="Mega ST 4 High internal view" width="640" height="640" loading="lazy">
<p class="caption">Inside the "High" machine.</p>
<img src="high-3.jpg" alt="Mega ST 4 High detail" width="640" height="640">
<img src="high-3.jpg" alt="Mega ST 4 High detail" width="640" height="853" loading="lazy">
<p class="caption">A detail of the "High" setup.</p>
<img src="high-4.jpg" alt="Mega ST 4 High expansion" width="640" height="640">
<img src="high-4.jpg" alt="Mega ST 4 High expansion" width="640" height="480" loading="lazy">
<p class="caption">Expansion boards in the "High" machine.</p>
<img src="high-5.jpg" alt="Mega ST 4 High close-up" width="640" height="640">
<img src="high-5.jpg" alt="Mega ST 4 High close-up" width="640" height="640" loading="lazy">
<p class="caption">Close-up of the "High" machine.</p>
<img src="high-6.jpg" alt="Mega ST 4 High running" width="640" height="640">
<img src="high-6.jpg" alt="Mega ST 4 High running" width="640" height="480" loading="lazy">
<p class="caption">The "High" machine in operation.</p>
<img src="high-7.jpg" alt="Mega ST 4 High setup" width="640" height="640">
<img src="high-7.jpg" alt="Mega ST 4 High setup" width="640" height="480" loading="lazy">
<p class="caption">The "High" workstation setup.</p>
<img src="high-8.jpg" alt="Mega ST 4 High board" width="640" height="640">
<img src="high-8.jpg" alt="Mega ST 4 High board" width="640" height="640" loading="lazy">
<p class="caption">Board detail of the "High" machine.</p>
<img src="high-9.jpg" alt="Mega ST 4 High final" width="640" height="640">
<img src="high-9.jpg" alt="Mega ST 4 High final" width="640" height="480" loading="lazy">
<p class="caption">The finished "High" machine.</p>
</div>