HPR/hpr_generator
8
1
Fork 5
Code Issues 36 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Make images and iframe on about page responsive

Browse Source
This commit is contained in:
Roan Horning
2025-10-12 23:05:20 -04:00
parent fb01dd8e3f
commit 4e853f04f3
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public_html/css/hpr.css
View File

@@ -593,6 +593,11 @@ fieldset > table td input[type="radio"] {
width: initial; width: initial;
margin-bottom: 0.5rem; 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 { #search form {
flex: 1 1 100%; flex: 1 1 100%;
} }

14
templates/content-about.tpl.html
View File

@@ -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. import the file you recorded earlier and edit it as you wish.
</p> </p>
<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> </p>
<blockquote>Audacity is a free, easy-to-use and multilingual audio editor and recorder for <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> 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> <p>
When you have finished editing your podcast you can export it. When you have finished editing your podcast you can export it.
</p> </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> <li>Set <em>Bit depth</em> to <strong>24</strong>.</li>
</ol> </ol>
<p> <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> </p>
<h2 id="phone_interviews">Recording Interviews with the Phone<a href="<!--% absolute_url(baseurl,'about.html#phone_interviews') %-->">.</a></h2> <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. has produced a number of short shows on how to configure the audio quality.
</p> </p>
<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> </p>
<h2 id="background_music">Avoid Bedding/background music<a href="<!--% absolute_url(baseurl,'about.html#background_music') %-->">.</a></h2> <h2 id="background_music">Avoid Bedding/background music<a href="<!--% absolute_url(baseurl,'about.html#background_music') %-->">.</a></h2>