Add icon, some text edits and styling

index.html

@@ -3,8 +3,14 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>An Audio Guide to Occupation</title>
+    <title>An Audio Guide to Occupation &mdash; part 1 A-D</title>
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="icon" href="agto.png">
+    <meta property="og:title" content="An Audio Guide to Occupation">
+    <meta property="og:description" content="An Audio Guide to Occupation &mdash; part 1 A-D">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://nandn.org.il/agto">
+    <meta property="og:image" content="https://nandn.org.il/agto/agto.png">
   </head>
   <body onclick="fullScreen()">
     <main>
@@ -12,26 +18,29 @@
         <div class="row my-3">
           <div class="col-12">
             <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-intro.mp3')" class="btn btn-secondary text-center w-100 h-100">
-              <h1>
-                An Audio Guide to Occupation &mdash; part 1 A-D<br/>
-                <small>by Ma'ayan Tsadka</small>
-              </h1>
+              <h2>
+                <strong>An Audio Guide to Occupation &mdash; part 1 A-D</strong>
+              </h2>
+              <h4>by Ma'ayan Tsadka</h4>
+              <h5>
+                (Originally appeared at <em>“From the Red Sea to the Dead Sea: a Soundscape of an Occupation 2018"</em> @ kunstradio.at)
+              </h5>
             </button>
           </div>
         </div>
         <div class="row mb-3" style="height: 35vh">
           <div class="col-6">
-            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-a.mp3')" class="btn btn-secondary text-center w-100 h-100">
+            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-a.mp3')" class="btn btn-secondary text-center w-100 h-100" style="padding-top:0; vertical-align:top">
               <h3>
-                A. Means of Intimidation
+                <strong>A.</strong> Means of Intimidation
               </h3>
               <h5>Israeli military night raid</h5>
             </button>
           </div>
           <div class="col-6">
-            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-b.mp3')" class="btn btn-secondary text-center w-100 h-100">
+            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-b.mp3')" class="btn btn-secondary text-center w-100 h-100" style="padding-top:0; vertical-align:top">
               <h3>
-                B. Means of Crowd Control <br/>
+                <strong>B.</strong> Means of Crowd Control <br/>
               </h3>
               <h5>
                 Tear Gas &bull;
@@ -42,9 +51,9 @@
         </div>
         <div class="row mb-3" style="height: 35vh">
           <div class="col-6">
-            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-c.mp3')" class="btn btn-secondary text-center w-100 h-100">
+            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-c.mp3')" class="btn btn-secondary text-center w-100 h-100" style="padding-top:0; vertical-align:top">
               <h3>
-                C. Means of Killing<br/>
+                <strong>C.</strong> Means of Killing<br/>
               </h3>
               <h5>
                 Rubber-Coated Steel Bullets &bull;
@@ -55,9 +64,10 @@
             </button>
           </div>
           <div class="col-6">
-            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-d.mp3')" class="btn btn-secondary text-center w-100 h-100">
+            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-d.mp3')" class="btn btn-secondary text-center w-100 h-100" style="padding-top:0; vertical-align:top">
               <h3>
-                D. Means of Resistance
+                <strong>D.</strong> Means of Resistance
+              <h5>&nbsp;</h5>
               </h3>
             </button>
           </div>
@@ -65,11 +75,11 @@
         <div class="row mb-3">
           <div class="col-12">
             <button onclick="stopSound()" class="btn btn-secondary text-center w-100 h-100">
-              <h1>
+              <h2>
                 <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-stop-fill" viewBox="0 0 16 16">
                   <path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5"></path>
                 </svg>
-              </h1>
+              </h2>
             </button>
           </div>
         </div>