From 3bc02053ba8c25fd46c3d48db0968fa453226b9e Mon Sep 17 00:00:00 2001
From: MrHeadwar <edwsaintesprit@hotmail.com>
Date: Wed, 23 Nov 2022 09:35:13 +0100
Subject: [PATCH] Added an #hdimage class to avoid hard coding image resizing
 for high quality images

---
 include/bbt-markers.html                        |  6 +++---
 include/cd-markers.html                         |  5 ++---
 include/control-surfaces-websockets-server.html | 15 +++++----------
 include/cue-markers.html                        |  4 ++--
 include/export-dialog.html                      |  8 ++++----
 include/external-sends.html                     |  2 +-
 include/import-dialog.html                      |  2 +-
 include/inserts.html                            |  2 +-
 include/io-plugins.html                         | 14 +++++++-------
 include/patchbay.html                           |  2 +-
 include/performance-meters.html                 |  6 +++---
 include/plugin-dsp-load.html                    | 14 +++++++-------
 include/quick-audio-export.html                 |  5 ++---
 include/time-signature-ruler.html               |  6 ++----
 include/track-modes.html                        |  2 +-
 include/working-with-markers.html               |  8 ++++----
 source/css/common.css                           |  4 ++++
 17 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/include/bbt-markers.html b/include/bbt-markers.html
index 0bb3553..4a622b1 100644
--- a/include/bbt-markers.html
+++ b/include/bbt-markers.html
@@ -14,7 +14,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/new-music-time.png" alt="New Music Time dialog">
+  <img class="hdimage" src="/images/new-music-time.png" alt="New Music Time dialog">
   <figcaption>New Music Time dialog</figcaption>
 </figure>
 
@@ -23,7 +23,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/bbt-marker-resets-musical-time.png" alt="The BBT marker resets the musical time">
+  <img class="hdimage" src="/images/bbt-marker-resets-musical-time.png" alt="The BBT marker resets the musical time">
   <figcaption>The BBT marker resets the musical time</figcaption>
 </figure>
 
@@ -44,7 +44,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/edit-bbt-marker.png" alt="Edit Musical Time">
+  <img class="hdimage" src="/images/edit-bbt-marker.png" alt="Edit Musical Time">
   <figcaption>The Edit Musical Time dialog</figcaption>
 </figure>
 
diff --git a/include/cd-markers.html b/include/cd-markers.html
index 3bb0056..36c0bdc 100644
--- a/include/cd-markers.html
+++ b/include/cd-markers.html
@@ -5,8 +5,7 @@
 </p>
 
 <figure>
-  <img style="width:75%;" width="50%" src="/images/cd-markers.png"
-  alt="CD Markers ruler">
+  <img class="hdimage" src="/images/cd-markers.png" alt="CD Markers ruler">
   <figcaption>CD Markers ruler</figcaption>
 </figure>
 
@@ -189,4 +188,4 @@
 	markers replicates that of
 	<a href="@@creating-location-markers">location markers</a> and
 	<a href="@@creating-range-markers">range markers</a> respectively.
-</p>
\ No newline at end of file
+</p>
diff --git a/include/control-surfaces-websockets-server.html b/include/control-surfaces-websockets-server.html
index df76b4c..3958e73 100644
--- a/include/control-surfaces-websockets-server.html
+++ b/include/control-surfaces-websockets-server.html
@@ -40,8 +40,7 @@
 </p>
 
 <figure>
-  <img src="/images/websockets-main.png" alt="WebSockets Server main page" 
-  width="50%" >
+  <img class="hdimage"src="/images/websockets-main.png" alt="WebSockets Server main page">
   <figcaption>
     WebSockets Server main page
   </figcaption>
@@ -124,8 +123,7 @@
 </ul>
 
 <figure>
-  <img src="/images/websockets-mixer.png" alt="Mixer view in WebSockets Server" 
-  width="50%" >
+  <img class="hdimage"src="/images/websockets-mixer.png" alt="Mixer view in WebSockets Server">
   <figcaption>
     Mixer view in WebSockets Server
   </figcaption>
@@ -139,8 +137,7 @@
 </p>
 
 <figure>
-  <img src="/images/websockets-plugins.png"
-  alt="Plugins view in WebSockets Server" width="50%" >
+  <img class="hdimage" src="/images/websockets-plugins.png" alt="Plugins view in WebSockets Server">
   <figcaption>
     Plugins view in WebSockets Server
   </figcaption>
@@ -154,8 +151,7 @@
 </p>
 
 <figure>
-  <img src="/images/websockets-transport.png"
-  alt="Transport view in WebSockets Server" width="50%" >
+  <img class="hdimage" src="/images/websockets-transport.png" alt="Transport view in WebSockets Server">
   <figcaption>
     Transport view in WebSockets Server
   </figcaption>
@@ -174,8 +170,7 @@
 </p>
 
 <figure>
-  <img src="/images/websockets-protocol.png"
-  alt="Protocol view in WebSockets Server" width="50%" >
+  <img class="hdimage" src="/images/websockets-protocol.png" alt="Protocol view in WebSockets Server">
   <figcaption>
     Protocol view in WebSockets Server
   </figcaption>
diff --git a/include/cue-markers.html b/include/cue-markers.html
index 8b35831..7734ecc 100644
--- a/include/cue-markers.html
+++ b/include/cue-markers.html
@@ -7,7 +7,7 @@
 </p>
 
 <figure>
-  <img style="width:75%;" width="50%" src="/images/cue-markers-ruler-example.png" alt="Cue Markers Ruler">
+  <img class="hdimage" src="/images/cue-markers-ruler-example.png" alt="Cue Markers Ruler">
   <figcaption>Cue Markers Ruler</figcaption>
 </figure>
 
@@ -26,7 +26,7 @@
 </ul>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/cue-marker-ruler-right-click-menu.png" alt="Right-click menu for the Cue Markers ruler">
+  <img class="hdimage" src="/images/cue-marker-ruler-right-click-menu.png" alt="Right-click menu for the Cue Markers ruler">
   <figcaption>Right-click menu for the Cue Markers ruler</figcaption>
 </figure>
 
diff --git a/include/export-dialog.html b/include/export-dialog.html
index 4ebfcf2..40b9730 100644
--- a/include/export-dialog.html
+++ b/include/export-dialog.html
@@ -8,7 +8,7 @@
 </p>
 
 <figure class="right">
-  <img width="50%" src="/images/export-dialog-file-format.png" alt="The Export window">
+  <img class="hdimage" src="/images/export-dialog-file-format.png" alt="The Export window">
   <figcaption>
     The Export window
   </figcaption>
@@ -93,7 +93,7 @@
 <h2 id="export_analyze">Analyze exported audio</h2>
 
 <figure>
-  <img width="50%" src="/images/export-report-analysis.png" alt="The Export Report/Analysis window">
+  <img class="hdimage" src="/images/export-report-analysis.png" alt="The Export Report/Analysis window">
   <figcaption>
     The Export Report/Analysis window
   </figcaption>
@@ -131,7 +131,7 @@
 <h2>Time Span</h2>
 
 <figure>
-  <img width="50%" src="/images/export-dialog-timespan.png" alt="The Time Span tab">
+  <img class="hdimage" src="/images/export-dialog-timespan.png" alt="The Time Span tab">
   <figcaption>
     The Time Span tab
   </figcaption>
@@ -153,7 +153,7 @@
 <h2>Channels</h2>
 
 <figure>
-  <img width="50%" src="/images/export-dialog-channels.png" alt="The Channels tab">
+  <img class="hdimage" src="/images/export-dialog-channels.png" alt="The Channels tab">
   <figcaption>
     The Channels tab
   </figcaption>
diff --git a/include/external-sends.html b/include/external-sends.html
index 26caa1d..7cb199a 100644
--- a/include/external-sends.html
+++ b/include/external-sends.html
@@ -60,7 +60,7 @@
 </p>
 
 <figure class="right">
-  <img src="/images/external-send-dialog.png" width="50%" alt="External Send Dialog">
+  <img class="hdimage" src="/images/external-send-dialog.png" alt="External Send Dialog">
   <figcaption>
     External Send Dialog
   </figcaption>
diff --git a/include/import-dialog.html b/include/import-dialog.html
index 3c0b7bd..3afb35d 100644
--- a/include/import-dialog.html
+++ b/include/import-dialog.html
@@ -1,6 +1,6 @@
 
 <figure class="right">
-	<img src="/images/import-window.png" alt="The import window" width="50%">
+	<img class="hdimage" src="/images/import-window.png" alt="The import window">
 	<figcaption>
 		The import window.
 	</figcaption>
diff --git a/include/inserts.html b/include/inserts.html
index ed8d20a..4ef8b4e 100644
--- a/include/inserts.html
+++ b/include/inserts.html
@@ -36,7 +36,7 @@
 </p>
 
 <figure>
-  <img src="/images/port-insert-send.png" width="50%" alt="Insert / Send">
+  <img class="hdimage" src="/images/port-insert-send.png" alt="Insert / Send">
   <figcaption>
     Insert Dialog, the Send/Output tab
   </figcaption>
diff --git a/include/io-plugins.html b/include/io-plugins.html
index 2a76031..93416e5 100644
--- a/include/io-plugins.html
+++ b/include/io-plugins.html
@@ -32,7 +32,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/io-plugins-ndi-input.png" alt="NDI Input plugin loaded as a pre-processing I/O plugin">
+  <img class="hdimage" src="/images/io-plugins-ndi-input.png" alt="NDI Input plugin loaded as a pre-processing I/O plugin">
   <figcaption>NDI Input plugin loaded as a pre-processing I/O plugin</figcaption>
 </figure>
 
@@ -49,7 +49,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/io-plugins-empty-slots.png" alt="Empty slots in the I/O Plugins dialog">
+  <img class="hdimage" src="/images/io-plugins-empty-slots.png" alt="Empty slots in the I/O Plugins dialog">
   <figcaption>Empty slots in the I/O Plugins dialog</figcaption>
 </figure> 
 
@@ -59,7 +59,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/io-plugins-right-click-menu.png" alt="Right-click menu in the I/O Plugins dialog">
+  <img class="hdimage" src="/images/io-plugins-right-click-menu.png" alt="Right-click menu in the I/O Plugins dialog">
   <figcaption>Right-click menu in the I/O Plugins dialog</figcaption>
 </figure> 
 
@@ -73,7 +73,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/io-plugins-one-plugin-added.png" alt="ACE Compressor added to the pre- section">
+  <img class="hdimage" src="/images/io-plugins-one-plugin-added.png" alt="ACE Compressor added to the pre- section">
   <figcaption>ACE Compressor added to the Pre-process section</figcaption>
 </figure> 
 
@@ -87,7 +87,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/io-plugins-choose-output.png" alt="Choosing output for an I/O plugin">
+  <img class="hdimage" src="/images/io-plugins-choose-output.png" alt="Choosing output for an I/O plugin">
   <figcaption>Choosing output for an I/O plugin</figcaption>
 </figure> 
 
@@ -98,7 +98,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/io-plugins-new-track-from-io-plugin.png" alt="New track connected to an I/O plugin">
+  <img class="hdimage" src="/images/io-plugins-new-track-from-io-plugin.png" alt="New track connected to an I/O plugin">
   <figcaption>New track connected to an I/O plugin</figcaption>
 </figure> 
 
@@ -110,6 +110,6 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/io-plugins-in-audio-connections.png" alt="I/O Plugins in the Audio Connections dialog">
+  <img class="hdimage" src="/images/io-plugins-in-audio-connections.png" alt="I/O Plugins in the Audio Connections dialog">
   <figcaption>I/O Plugins in the Audio Connections dialog</figcaption>
 </figure> 
diff --git a/include/patchbay.html b/include/patchbay.html
index dbb85b1..e51e375 100644
--- a/include/patchbay.html
+++ b/include/patchbay.html
@@ -1,5 +1,5 @@
 <figure class="right">
-  <img width="50%" src="/images/connection-manager.png" alt="An example patchbay">
+  <img class="hdimage" src="/images/connection-manager.png" alt="An example patchbay">
   <figcaption>
     An example patchbay
   </figcaption>
diff --git a/include/performance-meters.html b/include/performance-meters.html
index 1d6ace1..c93b213 100644
--- a/include/performance-meters.html
+++ b/include/performance-meters.html
@@ -5,9 +5,9 @@
 	whether Ardour is in charge for excessive xruns.
 </p>
 
-<figure class=center>
-<img src="/images/performance-meters.png" alt="The Performance Meters window" width="50%" />
-<figcaption class=center>The Performance Meters window</figcaption>
+<figure class="center">
+<img class="hdimage" src="/images/performance-meters.png" alt="The Performance Meters window">
+<figcaption class="center">The Performance Meters window</figcaption>
 </figure>
 
 <p>
diff --git a/include/plugin-dsp-load.html b/include/plugin-dsp-load.html
index e25b435..253c74f 100644
--- a/include/plugin-dsp-load.html
+++ b/include/plugin-dsp-load.html
@@ -6,9 +6,9 @@
 	but you need actual stats.
 </p>
 
-<figure class=center>
-<img src="/images/plugin-dsp-load.png" alt="The Plugin DSP Load window" width="50%" />
-<figcaption class=center>The Plugin DSP Load window</figcaption>
+<figure class="center">
+<img class="hdimage" src="/images/plugin-dsp-load.png" alt="The Plugin DSP Load window">
+<figcaption class="center">The Plugin DSP Load window</figcaption>
 </figure>
 
 <p>
@@ -19,9 +19,9 @@
 	going on in the session.
 </p>
 
-<figure class=center>
-<img src="/images/plugin-dsp-load-graph_en.svg" alt="The Plugin DSP Load window" width="75%" />
-<figcaption class=center>Plugin DSP Load chart legend</figcaption>
+<figure class="center">
+<img class="hdimage" src="/images/plugin-dsp-load-graph_en.svg" alt="The Plugin DSP Load window">
+<figcaption class="center">Plugin DSP Load chart legend</figcaption>
 </figure>
 
 
@@ -41,4 +41,4 @@
 <p>
 	It's worth noting that certain type of plugins, like convolution reverbs
 	and guitar amp simulators, tend to consume more resources.
-</p>
\ No newline at end of file
+</p>
diff --git a/include/quick-audio-export.html b/include/quick-audio-export.html
index 423391f..a93ef8e 100644
--- a/include/quick-audio-export.html
+++ b/include/quick-audio-export.html
@@ -7,8 +7,7 @@
 
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/quick-audio-export-dialog.png"
-  alt="Quick Audio Export Dialog">
+  <img class="hdimage" src="/images/quick-audio-export-dialog.png" alt="Quick Audio Export Dialog">
   <figcaption>Quick Audio Export Dialog</figcaption>
 </figure>
 
@@ -38,4 +37,4 @@
 <p>
   Ongoing export can be canceled by pressing the
   <kbd class="button">Abort</kbd> button.
-</p>
\ No newline at end of file
+</p>
diff --git a/include/time-signature-ruler.html b/include/time-signature-ruler.html
index b47a042..e99d986 100644
--- a/include/time-signature-ruler.html
+++ b/include/time-signature-ruler.html
@@ -6,8 +6,7 @@
 </p>
 
 <figure>
-  <img style="width:75%;" width="50%" src="/images/multiple-time-signatures.png"
-  alt="Multiple Time Signatures">
+  <img class="hdimage" src="/images/multiple-time-signatures.png" alt="Multiple Time Signatures">
   <figcaption>Multiple Time Signatures</figcaption>
 </figure>
 
@@ -30,8 +29,7 @@
 </p>
 
 <figure>
-  <img style="width:50%;" width="50%" src="/images/new-time-signature-marker.png"
-  alt="New Time Signature dialog">
+  <img class="hdimage" src="/images/new-time-signature-marker.png" alt="New Time Signature dialog">
   <figcaption>New Time Signature dialog</figcaption>
 </figure>
 
diff --git a/include/track-modes.html b/include/track-modes.html
index da4304b..89d2f91 100644
--- a/include/track-modes.html
+++ b/include/track-modes.html
@@ -70,7 +70,7 @@
 </p>
 
 <figure class="left">
-  <img src="/images/layering-switch.png" alt="Layering switch" width="50%">
+  <img class="hdimage" src="/images/layering-switch.png" alt="Layering switch">
   <figcaption>
     Layering switch
   </figcaption>
diff --git a/include/working-with-markers.html b/include/working-with-markers.html
index ddc2af2..4c030bf 100644
--- a/include/working-with-markers.html
+++ b/include/working-with-markers.html
@@ -19,7 +19,7 @@
 </p>
 
 <figure>
-    <img width="50%" src="/images/new-range-markers.gif" alt="Adding a New Range Marker">
+    <img class="hdimage" src="/images/new-range-markers.gif" alt="Adding a New Range Marker">
     <figcaption>
       Adding a New Range Marker
     </figcaption>
@@ -83,7 +83,7 @@
 </p>
 
 <figure>
-    <img width="50%" src="/images/renaming-a-marker.gif" alt="Renaming a Marker">
+    <img class="hdimage" src="/images/renaming-a-marker.gif" alt="Renaming a Marker">
     <figcaption>
       Renaming a Marker
     </figcaption>
@@ -116,7 +116,7 @@
 </p>
 
 <figure>
-    <img width="50%" src="/images/regions-and-marks.png" alt="Hiding Markers">
+    <img class="hdimage" src="/images/regions-and-marks.png" alt="Hiding Markers">
     <figcaption>
       Hiding Markers
     </figcaption>
@@ -136,7 +136,7 @@
 </p>
 
 <figure>
-    <img width="50%" src="/images/remove-a-marker.png" alt="Removing a Location Marker">
+    <img class="hdimage" src="/images/remove-a-marker.png" alt="Removing a Location Marker">
     <figcaption>
       Removing a Location Marker
     </figcaption>
diff --git a/source/css/common.css b/source/css/common.css
index 2900e04..a606561 100644
--- a/source/css/common.css
+++ b/source/css/common.css
@@ -151,6 +151,10 @@ code {
   display: none;
 }
 
+img.hdimage {
+  width: 50%;
+}
+
 /* Keyboard modifiers */
 .mod1:before {        content: "Ctrl ";}
 .mod2:before {        content: "Alt ";}