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
Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 382 KiB

+1 -1
View File
@@ -27,7 +27,7 @@ parent: "/retro/"
<p>I bought an ACSI2STM adapter, but it isn't in use anywhere yet, so it sits among my other uninstalled extensions. The <a href="/retro/ultrasatan/">UltraSatan</a> currently provides the ACSI hard-disk storage on the "Low" machine, so the ACSI2STM would be an alternative or a spare for another machine.</p>
<h2>Gallery</h2>
<img src="acsi2stm.jpg" alt="The ACSI2STM adapter" width="640" height="640">
<img src="acsi2stm.jpg" alt="The ACSI2STM adapter" width="640" height="640" loading="lazy">
<p class="caption">The ACSI2STM adapter, not yet installed.</p>
<h2>Sources</h2>
+1 -1
View File
@@ -24,7 +24,7 @@ parent: "/retro/"
<p>Passive RGB-to-VGA adapters output the Atari's native timings, so color modes (ST Low and ST Medium) need a monitor that can lock to a 15 kHz horizontal sync signal. See my <a href="/retro/atari-monitor-compatibility/">monitor compatibility</a> page for which modern panels actually work. Mono mode (ST High) works on any standard VGA display.</p>
<h2>Gallery</h2>
<img src="stvga-low.jpg" alt="The MCSWITCH VGA adapter connected to the Atari" width="640" height="640">
<img src="stvga-low.jpg" alt="The MCSWITCH VGA adapter connected to the Atari" width="640" height="640" loading="lazy">
<p class="caption">The MCSWITCH adapter on the Mega ST 4 "Low" machine.</p>
<h2>Sources</h2>
Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 323 KiB

+1 -1
View File
@@ -31,7 +31,7 @@ parent: "/retro/"
<p>In my Mega ST 4 "High" machine the Eiffel connects the PS/2 keyboard and mouse, keeping the workstation fully usable alongside the <a href="/retro/monsterboard/">MonSTerBoard</a>, <a href="/retro/et4000-experiment/">ET4000</a> and <a href="/retro/netusb/">NetUSBee</a>. The original Atari keyboard is now used with the "Low" machine, which pairs it with a <a href="/retro/mouster/">mouSTer</a> and a USB mouse.</p>
<h2>Gallery</h2>
<img src="eiffel-ps2.jpg" alt="The Eiffel PS/2 adapter without its case" width="480" height="640">
<img src="eiffel-ps2.jpg" alt="The Eiffel PS/2 adapter without its case" width="480" height="640" loading="lazy">
<p class="caption">The Eiffel PS/2 adapter, shown here without its case.</p>
<h2>Sources</h2>
+5 -5
View File
@@ -32,19 +32,19 @@ parent: "/retro/"
<p>FPGA cores on MiSTer and MiST still only emulate the native ST Shifter, with no ET4000 emulation on the horizon given the FPGA resources it would require. So the real hardware approach remains the only way to get those higher resolutions, and now it works in the Mega ST 4 "High" machine with its dedicated <a href="/retro/atari-monitor-compatibility/">monitor</a>.</p>
<h2>Gallery</h2>
<img src="et4000-1.jpg" alt="The ET4000 graphics card with STGA adapter" width="590" height="443">
<img src="et4000-1.jpg" alt="The ET4000 graphics card with STGA adapter" width="590" height="443" loading="lazy">
<p class="caption">The ET4000 graphics card ready for installation.</p>
<img src="et4000-2.jpg" alt="ET4000 card installed in the Mega ST" width="590" height="443">
<img src="et4000-2.jpg" alt="ET4000 card installed in the Mega ST" width="590" height="443" loading="lazy">
<p class="caption">The ET4000 installed in the Mega ST.</p>
<img src="et4000-3.jpg" alt="ET4000 card detail and wiring" width="590" height="443">
<img src="et4000-3.jpg" alt="ET4000 card detail and wiring" width="590" height="443" loading="lazy">
<p class="caption">Close-up of the card and its wiring.</p>
<img src="et4000-4.jpg" alt="ET4000 running at higher resolution" width="590" height="443">
<img src="et4000-4.jpg" alt="ET4000 running at higher resolution" width="590" height="443" loading="lazy">
<p class="caption">The ET4000 driving a higher resolution desktop.</p>
<img src="et4000-5.jpg" alt="ET4000 final setup in the workstation" width="590" height="443">
<img src="et4000-5.jpg" alt="ET4000 final setup in the workstation" width="590" height="443" loading="lazy">
<p class="caption">The finished ET4000 setup in the workstation.</p>
<h2>Sources</h2>
Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 350 KiB

+3 -3
View File
@@ -34,11 +34,11 @@ parent: "/retro/"
<p>For the internal mount I printed a <a href="https://www.thingiverse.com/thing:2664753" target="_blank">Gotek case from Thingiverse</a> that fits in the floppy bay. I used this to relocate the Storm/Cloudy TOS switcher: the 2-way switch is mounted in a slot at the front of the printed case, right where the floppy opening is. So the TOS switcher now sits at the front of the floppy bay, which meant no drilling into the case at all, and there was already space there for it.</p>
<h2>Gallery</h2>
<img src="gotek-switch-2.jpg" alt="The relocated TOS switcher at the front of the Gotek case" width="640" height="640">
<img src="gotek-switch-2.jpg" alt="The relocated TOS switcher at the front of the Gotek case" width="640" height="640" loading="lazy">
<p class="caption">The relocated TOS switcher at the front of the printed Gotek case, a clear view of how it sits in the floppy bay.</p>
<img src="gotek-back.jpg" alt="Gotek floppy emulator rear view" width="640" height="480">
<img src="gotek-back.jpg" alt="Gotek floppy emulator rear view" width="640" height="480" loading="lazy">
<p class="caption">The Gotek in the 3D-printed case, with the relocated TOS switcher visible at the front.</p>
<img src="gotek-switch.jpg" alt="Gotek with the relocated TOS switcher in the printed case" width="640" height="480">
<img src="gotek-switch.jpg" alt="Gotek with the relocated TOS switcher in the printed case" width="640" height="480" loading="lazy">
<p class="caption">The Gotek rear view.</p>
<h2>Sources</h2>
+1 -1
View File
@@ -29,7 +29,7 @@ parent: "/retro/"
<p>The original STM-1 mouse is a classic, but the original sensors are getting tired after decades, and the feel isn't great compared to modern pointing devices. The laser board keeps the authentic Atari mouse shell while making it genuinely usable again, which is a nice middle ground between the original mouse and something like the <a href="/retro/mouster/">mouSTer</a> with a modern USB mouse.</p>
<h2>Gallery</h2>
<img src="lasermouse.jpg" alt="The converted Atari STM-1 laser mouse" width="640" height="853">
<img src="lasermouse.jpg" alt="The converted Atari STM-1 laser mouse" width="640" height="853" loading="lazy">
<p class="caption">The original Atari STM-1 mouse converted to a laser sensor.</p>
<h2>Sources</h2>
Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 275 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 MiB

After

Width:  |  Height:  |  Size: 869 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 325 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 MiB

After

Width:  |  Height:  |  Size: 481 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 196 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 621 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 243 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 220 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 574 KiB

Executable → Regular
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 224 KiB

+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>
+3 -3
View File
@@ -53,11 +53,11 @@ parent: "/retro/"
<p>In my Mega ST 4 "High" machine the MonSTerBoard provides the 8 MB of TT-RAM that TOS 2.06 and Geneva use for real multitasking. For storage I use the dual IDE interface, booting the system directly from a CompactFlash card. I started with a 4 GB card, but that didn't work reliably, so I switched to a 1 GB card, which works fine. There's no ACSI hard drive connected in this machine; the IDE boot is noticeably faster than an ACSI drive would be. Combined with the <a href="/retro/et4000-experiment/">ET4000 graphics card</a> and its dedicated monitor, it's the most capable machine in the fleet.</p>
<h2>Gallery</h2>
<img src="monster-ide.jpg" alt="MonSTerBoard IDE adapter with CompactFlash card" width="640" height="480">
<img src="monster-ide.jpg" alt="MonSTerBoard IDE adapter with CompactFlash card" width="640" height="480" loading="lazy">
<p class="caption">The MonSTerBoard IDE adapter with a CompactFlash card attached.</p>
<img src="monster-1gb.jpg" alt="MonSTerBoard with the 1 GB CompactFlash card" width="640" height="480">
<img src="monster-1gb.jpg" alt="MonSTerBoard with the 1 GB CompactFlash card" width="640" height="640" loading="lazy">
<p class="caption">After the 4 GB card didn't work, I switched to a 1 GB CompactFlash card.</p>
<img src="monster-pins.jpg" alt="MonSTerBoard pins and jumper block" width="640" height="480">
<img src="monster-pins.jpg" alt="MonSTerBoard pins and jumper block" width="640" height="480" loading="lazy">
<p class="caption">The MonSTerBoard pins and jumper block.</p>
<h2>Sources</h2>
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 467 KiB

+4 -4
View File
@@ -21,16 +21,16 @@ parent: "/retro/"
<p>With the Storm ST and Cloudy ST combo in place, the machine boots into EmuTOS 1.0.1 with all 8 MB of Alt-RAM available, or switches over to PP's improved iTOS 1.04 for maximum software compatibility with games and demos from the era. iTOS 1.04 adds real FAT16 filesystem support, so it works much better with hard disks and mass storage, plus a few welcome extras on top of the classic TOS 1.04 behaviour. It's the best of both worlds: the modern conveniences of EmuTOS combined with the improved, authentic-feeling iTOS.</p>
<h2>Gallery</h2>
<img src="storm-cloudy-1.jpg" alt="Storm ST and Cloudy ST installed in the Mega ST" width="590" height="443">
<img src="storm-cloudy-1.jpg" alt="Storm ST and Cloudy ST installed in the Mega ST" width="590" height="443" loading="lazy">
<p class="caption">The Storm ST and Cloudy ST combo installed in the Mega ST.</p>
<img src="storm-cloudy-2.jpg" alt="Storm ST and Cloudy ST board detail" width="590" height="443">
<img src="storm-cloudy-2.jpg" alt="Storm ST and Cloudy ST board detail" width="590" height="443" loading="lazy">
<p class="caption">Close-up of the Storm ST and Cloudy ST boards.</p>
<img src="storm-cloudy-3.jpg" alt="Storm ST and Cloudy ST with wiring" width="590" height="443">
<img src="storm-cloudy-3.jpg" alt="Storm ST and Cloudy ST with wiring" width="590" height="443" loading="lazy">
<p class="caption">The Storm ST and Cloudy ST with their wiring in place.</p>
<img src="storm-cloudy-4.jpg" alt="Storm ST and Cloudy ST final install" width="590" height="443">
<img src="storm-cloudy-4.jpg" alt="Storm ST and Cloudy ST final install" width="590" height="443" loading="lazy">
<p class="caption">The finished installation in the Mega ST.</p>
<h2>Sources</h2>
+2 -2
View File
@@ -31,9 +31,9 @@ parent: "/retro/"
<p>In the Mega ST 4 "High" machine the STPSU provides clean, stable power to the <a href="/retro/monsterboard/">MonSTerBoard</a>, IDE storage, the <a href="/retro/et4000-experiment/">ET4000</a> and the rest of the workstation, keeping everything running reliably.</p>
<h2>Gallery</h2>
<img src="stpsu-installed-1.jpg" alt="The STPSU installed in the Mega ST" width="480" height="640">
<img src="stpsu-installed-1.jpg" alt="The STPSU installed in the Mega ST" width="480" height="640" loading="lazy">
<p class="caption">The STPSU installed in my Mega ST 4 "High" machine.</p>
<img src="stpsu-installed-2.jpg" alt="STPSU installation detail" width="640" height="480">
<img src="stpsu-installed-2.jpg" alt="STPSU installation detail" width="640" height="480" loading="lazy">
<p class="caption">A closer look at the installed STPSU.</p>
<h2>Manual and documentation</h2>
+12
View File
@@ -185,6 +185,18 @@ main > h1 {
text-underline-offset: 2px;
}
.detail-content a:hover { color: var(--text); }
.detail-content img {
display: block;
max-width: 100%;
height: auto;
margin: 1.5rem 0 0.5rem;
border-radius: 8px;
}
.detail-content .caption {
font-size: 0.85rem;
color: #666;
margin: 0 0 1.5rem;
}
.back-link {
display: inline-block;