From 4e853f04f36bf2152a4e8e960caa67d5bc1d3b70 Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sun, 12 Oct 2025 23:05:20 -0400
Subject: [PATCH] Make images and iframe on about page responsive

---
 public_html/css/hpr.css          |  5 +++++
 templates/content-about.tpl.html | 14 ++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 62c71d5..5dbb956 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -593,6 +593,11 @@ fieldset > table td input[type="radio"] {
 	width: initial;
 	margin-bottom: 0.5rem;
 }
+#youtube {
+	--video-ratio: calc(390 / 640);
+	width: min(calc(95vw + 0px), 640px);
+	height: min(calc(calc(95vw + 0px) * var(--video-ratio)), 320px);
+}
 #search form {
 	flex: 1 1 100%;
 }
diff --git a/templates/content-about.tpl.html b/templates/content-about.tpl.html
index 41efc1b..48edabb 100644
--- a/templates/content-about.tpl.html
+++ b/templates/content-about.tpl.html
@@ -655,11 +655,13 @@ First set the Project Rate to 44100Hz, then you can either record your show in A
 import the file you recorded earlier and edit it as you wish.
 </p>
 <p>
-<img width="600" src="images/contribute-audacity-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
+<img srcset="images/contribute-audacity-record-sm.png 460w, images/contribute-audacity-record.png 640w"
+     sizes="95vw" 
+     src="images/contribute-audacity-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
 </p>
 <blockquote>Audacity is a free, easy-to-use and multilingual audio editor and recorder for 
 	Windows, Mac OS X, GNU/Linux and other operating systems.</blockquote>
-<iframe width="640" height="390" src="//www.youtube.com/embed/ss8CyTwBOPY" style="border: none"></iframe>
+<iframe id="youtube" src="//www.youtube.com/embed/ss8CyTwBOPY"></iframe>
 <p>
 When you have finished editing your podcast you can export it.
 </p>
@@ -671,7 +673,9 @@ When you have finished editing your podcast you can export it.
 	<li>Set <em>Bit depth</em> to <strong>24</strong>.</li>
 </ol>
 <p>
-<img width="600" src="images/contribute-audacity-export.png" alt="Audacity Export Settings" title="Audacity Screenshot of an Export" >
+<img srcset="images/contribute-audacity-export-sm.png 460w, images/contribute-audacity-export.png 640w"
+     sizes="95vw" 
+src="images/contribute-audacity-export.png" alt="Audacity Export Settings" title="Audacity Screenshot of an Export" >
 </p>
 
 <h2 id="phone_interviews">Recording Interviews with the Phone<a href="<!--% absolute_url(baseurl,'about.html#phone_interviews') %-->">.</a></h2>
@@ -696,7 +700,9 @@ which you might find useful and <a href="<!--% absolute_url(baseurl) %-->corresp
 has produced a number of short shows on how to configure the audio quality.
 </p>
 <p>
-<img width="600" src="images/contribute-mumble-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
+<img srcset="images/contribute-mumble-record-sm.png 460w, images/contribute-mumble-record.png 640w"
+     sizes="95vw" 
+     src="images/contribute-mumble-record.png" alt="Audacity Can Record" title="Audacity Screenshot of Recording" >
 </p>
 
 <h2 id="background_music">Avoid Bedding/background music<a href="<!--% absolute_url(baseurl,'about.html#background_music') %-->">.</a></h2>