ForkAwesome reintroduced to fix compatibility of media buttons

9 files changed, 49 insertions, 42 deletions

diff --git a/about.html b/about.html
index 4c67424..124dbe4 100644
--- a/about.html
+++ b/about.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
   <title>pdp8</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="/style.css">
   <link rel="icon" type="image/png" href="/pdp8.png">
   <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
diff --git a/code.html b/code.html
index 8436233..1477170 100644
--- a/code.html
+++ b/code.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
   <title>pdp8</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="/style.css">
   <link rel="icon" type="image/png" href="/pdp8.png">
   <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
diff --git a/contact.html b/contact.html
index 164a9f3..8828948 100644
--- a/contact.html
+++ b/contact.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
   <title>pdp8</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="/style.css">
   <link rel="icon" type="image/png" href="/pdp8.png">
   <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
diff --git a/index.html b/index.html
index 79b9147..7c390a1 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
   <title>pdp8</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="/style.css">
   <link rel="icon" type="image/png" href="/pdp8.png">
   <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
@@ -19,16 +20,16 @@
     <p><img class='cover' src='/music/2022-08-20_when_legends_die/cover.jpeg' alt='cover'></p>
     <table>
       <tr>
-        <td>01-a</td>
         <td>
           <audio controls=""><source src='/music/2022-08-20_when_legends_die/01-a.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>a</td>
       </tr>
       <tr>
-        <td>02-b</td>
         <td>
           <audio controls=""><source src='/music/2022-08-20_when_legends_die/02-b.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>b</td>
       </tr>
     </table>
     <p>Bandcamp: <a href='https://pdp8.bandcamp.com/when-legends-die'>https://pdp8.bandcamp.com/when-legends-die</a></p>
@@ -39,70 +40,70 @@
     <p><img class='cover' src='/music/2021-09-25_calling_home/cover.jpeg' alt='cover'></p>
     <table>
       <tr>
-        <td>01-amazon</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/01-amazon.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>amazon</td>
       </tr>
       <tr>
-        <td>02-apple</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/02-apple.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>apple</td>
       </tr>
       <tr>
-        <td>03-facebook</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/03-facebook.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>facebook</td>
       </tr>
       <tr>
-        <td>04-google</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/04-google.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>google</td>
       </tr>
       <tr>
-        <td>05-instagram</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/05-instagram.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>instagram</td>
       </tr>
       <tr>
-        <td>06-microsoft</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/06-microsoft.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>microsoft</td>
       </tr>
       <tr>
-        <td>07-soundcloud</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/07-soundcloud.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>soundcloud</td>
       </tr>
       <tr>
-        <td>08-spotify</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/08-spotify.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>spotify</td>
       </tr>
       <tr>
-        <td>09-tiktok</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/09-tiktok.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>tiktok</td>
       </tr>
       <tr>
-        <td>10-twitter</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/10-twitter.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>twitter</td>
       </tr>
       <tr>
-        <td>11-youtube</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/11-youtube.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>youtube</td>
       </tr>
     </table>
     <p>Bandcamp: <a href='https://pdp8.bandcamp.com/calling-home'>https://pdp8.bandcamp.com/calling-home</a></p>
@@ -113,34 +114,34 @@
     <p><img class='cover' src='/music/2020-04-17_ringleitung_schaum/cover.jpeg' alt='cover'></p>
     <table>
       <tr>
-        <td>01-druckentlueftungsanlage</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/01-druckentlueftungsanlage.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>druckentlueftungsanlage</td>
       </tr>
       <tr>
-        <td>02-innenhydrantensystem</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/02-innenhydrantensystem.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>innenhydrantensystem</td>
       </tr>
       <tr>
-        <td>03-vollkegelspruehduesen</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/03-vollkegelspruehduesen.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>vollkegelspruehduesen</td>
       </tr>
       <tr>
-        <td>04-extinktionsbrandmelder</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/04-extinktionsbrandmelder.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>extinktionsbrandmelder</td>
       </tr>
       <tr>
-        <td>05-schaummonitor</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/05-schaummonitor.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>schaummonitor</td>
       </tr>
     </table>
     <p>Bandcamp: <a href='https://pdp8.bandcamp.com/ringleitung-schaum'>https://pdp8.bandcamp.com/ringleitung-schaum</a></p>
diff --git a/music.html b/music.html
index 79b9147..7c390a1 100644
--- a/music.html
+++ b/music.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
   <title>pdp8</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="/style.css">
   <link rel="icon" type="image/png" href="/pdp8.png">
   <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
@@ -19,16 +20,16 @@
     <p><img class='cover' src='/music/2022-08-20_when_legends_die/cover.jpeg' alt='cover'></p>
     <table>
       <tr>
-        <td>01-a</td>
         <td>
           <audio controls=""><source src='/music/2022-08-20_when_legends_die/01-a.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>a</td>
       </tr>
       <tr>
-        <td>02-b</td>
         <td>
           <audio controls=""><source src='/music/2022-08-20_when_legends_die/02-b.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>b</td>
       </tr>
     </table>
     <p>Bandcamp: <a href='https://pdp8.bandcamp.com/when-legends-die'>https://pdp8.bandcamp.com/when-legends-die</a></p>
@@ -39,70 +40,70 @@
     <p><img class='cover' src='/music/2021-09-25_calling_home/cover.jpeg' alt='cover'></p>
     <table>
       <tr>
-        <td>01-amazon</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/01-amazon.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>amazon</td>
       </tr>
       <tr>
-        <td>02-apple</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/02-apple.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>apple</td>
       </tr>
       <tr>
-        <td>03-facebook</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/03-facebook.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>facebook</td>
       </tr>
       <tr>
-        <td>04-google</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/04-google.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>google</td>
       </tr>
       <tr>
-        <td>05-instagram</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/05-instagram.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>instagram</td>
       </tr>
       <tr>
-        <td>06-microsoft</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/06-microsoft.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>microsoft</td>
       </tr>
       <tr>
-        <td>07-soundcloud</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/07-soundcloud.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>soundcloud</td>
       </tr>
       <tr>
-        <td>08-spotify</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/08-spotify.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>spotify</td>
       </tr>
       <tr>
-        <td>09-tiktok</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/09-tiktok.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>tiktok</td>
       </tr>
       <tr>
-        <td>10-twitter</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/10-twitter.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>twitter</td>
       </tr>
       <tr>
-        <td>11-youtube</td>
         <td>
           <audio controls=""><source src='/music/2021-09-25_calling_home/11-youtube.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>youtube</td>
       </tr>
     </table>
     <p>Bandcamp: <a href='https://pdp8.bandcamp.com/calling-home'>https://pdp8.bandcamp.com/calling-home</a></p>
@@ -113,34 +114,34 @@
     <p><img class='cover' src='/music/2020-04-17_ringleitung_schaum/cover.jpeg' alt='cover'></p>
     <table>
       <tr>
-        <td>01-druckentlueftungsanlage</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/01-druckentlueftungsanlage.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>druckentlueftungsanlage</td>
       </tr>
       <tr>
-        <td>02-innenhydrantensystem</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/02-innenhydrantensystem.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>innenhydrantensystem</td>
       </tr>
       <tr>
-        <td>03-vollkegelspruehduesen</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/03-vollkegelspruehduesen.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>vollkegelspruehduesen</td>
       </tr>
       <tr>
-        <td>04-extinktionsbrandmelder</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/04-extinktionsbrandmelder.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>extinktionsbrandmelder</td>
       </tr>
       <tr>
-        <td>05-schaummonitor</td>
         <td>
           <audio controls=""><source src='/music/2020-04-17_ringleitung_schaum/05-schaummonitor.mp3' type='audio/mpeg'></audio>
         </td>
+        <td>schaummonitor</td>
       </tr>
     </table>
     <p>Bandcamp: <a href='https://pdp8.bandcamp.com/ringleitung-schaum'>https://pdp8.bandcamp.com/ringleitung-schaum</a></p>
diff --git a/pictures.html b/pictures.html
index 43e8d3c..84bf54b 100644
--- a/pictures.html
+++ b/pictures.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
   <title>pdp8</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="/style.css">
   <link rel="icon" type="image/png" href="/pdp8.png">
   <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
@@ -18,9 +19,9 @@
     <script src="/distances.js"></script> 
     <script src="/slideshow.js"></script> <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" alt="">
     <div id="controller">
-      <a class="btn" onclick="toggle_play()"><span id="play-indicator" title="Pause slideshow">⏸</span></a> <a class="btn" onclick="new_selection()"><span title="Next slideshow">⏩︎</span></a>
+      <a class="btn" onclick="toggle_play()"><i id="play-indicator" title="Pause slideshow" class="fa fa-pause" aria-hidden="true"></i></a> <a class="btn" onclick="new_selection()"><i id="shuffle-indicator" title="Next slideshow" class="fa fa-random" aria-hidden="true"></i></a>
       <p>© pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a></p>
-    </div><a id="prev" onclick="prev()">❮</a> <a id="next" onclick="next()">❯</a> 
+    </div><a id="prev" onclick="prev()">‹</a> <a id="next" onclick="next()">›</a> 
     <script>
 
     (function() { new_selection(); play() })();
diff --git a/slideshow.js b/slideshow.js
index 4ed2ef8..23d7c3e 100644
--- a/slideshow.js
+++ b/slideshow.js
@@ -52,7 +52,7 @@ function play() {
   playing = 1
   interval = setInterval(function () { next() }, 3000);
   document.getElementById("play-indicator").title = "Pause slideshow"
-  document.getElementById("play-indicator").innerText = "\u23F8"
+  document.getElementById("play-indicator").className = "fa fa-pause"
   hide_controls()
 }
 
@@ -60,7 +60,7 @@ function stop() {
   playing = 0
   clearInterval(interval)
   document.getElementById("play-indicator").title = "Play slideshow"
-  document.getElementById("play-indicator").innerText = "\u23F5"
+  document.getElementById("play-indicator").className = "fa fa-play"
   show_controls()
 }
 
diff --git a/style.css b/style.css
index 6dcd519..63fdb65 100644
--- a/style.css
+++ b/style.css
@@ -43,7 +43,7 @@ nav a:hover { color: #fff; }
   }
 }
 
-.post { padding: 2em; }
+.post { padding: 1em; }
 
 img, video {
   max-width: 100%;
diff --git a/videos.html b/videos.html
index 48931ef..a2cccb3 100644
--- a/videos.html
+++ b/videos.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
   <title>pdp8</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="/style.css">
   <link rel="icon" type="image/png" href="/pdp8.png">
   <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
@@ -41,7 +42,7 @@
     <p>YouTube: <a href="https://www.youtube.com/watch?v=801Dr3kHdek">https://www.youtube.com/watch?v=801Dr3kHdek</a></p>
   </div>
   <hr>
-  <p>© pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a> 
+  <p>&nbsp;© pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a> 
   <script>
 
       function show_vertical_menu() {