the comeback with more clear titles

amplification.php

@@ -533,13 +533,22 @@
 
 
 <div class="draggable scaleable-wrapper group_menu pileM menu">
-  <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast1.php">"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div> 
 </div>
 <div class="draggable scaleable-wrapper group_menu pileM menu">
-  <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast2.php">"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div> 
 </div>
 <div class="draggable scaleable-wrapper group_menu pileM menu">
-  <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast3.php">"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div> 
 </div>
 
 
@@ -654,7 +663,7 @@ function groups(){
       $(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]})
   })
 
-  var group_metadata_position=[800,1000]
+  var group_metadata_position=[1300,1300]
   $(".group_metadata").each(function(i){
       $(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]})
   })

diary.php

@@ -94,25 +94,35 @@
     <?php include 'texts/diary.txt'; ?>
 </div>
 </div>
-<div class="draggable scaleable-wrapper menu" style="top: 1200px; right: 10px;">
+<div class="draggable scaleable-wrapper menu" style="top: 130%; left: 32%;">
   <h2 ><a href="player.php">Player</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper menu" style="top: 860px; right: 335px;">
+<div class="draggable scaleable-wrapper menu" style="top: 120%; left: 30%;">
   <h2 ><a href="index.php">About</a></h2> 
   </div>
 
-<div class="draggable scaleable-wrapper menu" style="top: 920px; left: 10px;">
+
-  <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+<div class="draggable scaleable-wrapper menu" style="top: 115%; left: 3%;">
+  <h2 ><a href="podcast1.php">"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
   </div>  
-<div class="draggable scaleable-wrapper menu" style="top: 1420px; left: 150px;">
-  <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
 </div>
-<div class="draggable scaleable-wrapper menu" style="top: 1320px; left: 380px;">
+<div class="draggable scaleable-wrapper menu" style="top: 125%; left: 5%;">
-  <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast2.php">"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div>  
+</div>
+<div class="draggable scaleable-wrapper menu" style="top: 135%; left: 3%;">
+  <h2 ><a href="podcast3.php">"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div> 
 </div>
 
 
-<div class="draggable scaleable-wrapper menu" style="top: 960px; right: 430px; z-index: 9;">
+<div class="draggable scaleable-wrapper menu" style="top: 140%; left: 25%; z-index: 9;">
   <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
 </div>
 

index.php

@@ -59,29 +59,32 @@
   <div  class="tooltip-wrap"><img src="images/carson-list.jpg" style="width: 100%;"></img><div class="tooltip-content-right" style="min-width: 40% !important;" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
 </div>
 
-<div class="draggable scaleable-wrapper menu"style="top: 60%; right: 10%;width: 10%;">
+<div class="draggable scaleable-wrapper menu"style="top: 70%; right: 25%;width: 10%;">
-  <h2 style="font-size: 110%;"><a href="podcast1.php" >Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
+  <h2 style="font-size: 110%;"><a href="podcast3.php" >"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
   <div class="drag-content">
-    <?php include 'texts/podcast1.txt'; ?>
+    (podcast)<br><br>
+    <?php include 'texts/podcast3.txt'; ?>
 </div>
 </div>
 
-
 <div class="draggable scaleable-wrapper menu"style="top: 64%; right: 18%;width: 10%;">
-  <h2 style="font-size: 110%;"><a href="podcast2.php" >Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
+  <h2 style="font-size: 110%;"><a href="podcast2.php" >"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
   <div class="drag-content">
+    (podcast)<br><br>
     <?php include 'texts/podcast2.txt'; ?>
   </div>
 </div>
 
-<div class="draggable scaleable-wrapper menu"style="top: 70%; right: 25%;width: 10%;">
+<div class="draggable scaleable-wrapper menu"style="top: 60%; right: 10%;width: 10%;">
-  <h2 style="font-size: 110%;"><a href="podcast3.php" >Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
+  <h2 style="font-size: 110%;"><a href="podcast1.php" >"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
   <div class="drag-content">
-    <?php include 'texts/podcast3.txt'; ?>
+    (podcast)<br><br>
+    <?php include 'texts/podcast1.txt'; ?>
 </div>
 </div>
 
 
+
 <div class="draggable scaleable-wrapper menu"style="top:8%;left:35%">
   <h2 ><a href="player.php" >Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
   <div class="drag-content">

player.php

@@ -365,7 +365,7 @@ $("#katalin").click(function(){
 
 <!-- soundwalk player -->
 
-  <div class="draggable full-width" style="top: 160%; left:0.2%">
+  <div class="draggable full-width" style="top: 180%; left:0.2%">
     <button id="but"><h3>listen</h3></button>
     First sample of city sounds, related to public/private and speech, and recordings of people describing them
     <div class="tooltip-wrap no-pink">
@@ -450,7 +450,7 @@ $("#katalin").click(function(){
 
 
 <!-- second sounwalk player -->
-  <div class="draggable full-width" style="top: 190%; left:0.2%">
+  <div class="draggable full-width" style="top: 210%; left:0.2%">
     <button id="butB"><h3>listen</h3></button>
     Second sample of city sounds, related to public/private and speech, and recordings of people describing them
     <div class="tooltip-wrap no-pink">
@@ -521,15 +521,8 @@ $("#katalin").click(function(){
 </div>
 
 
-
-
-
-
-
-
-
 <!-- draggable menu-->
-<div class="draggable scaleable-wrapper menu" style="top:130%;left: 5; width: 300px; font-size: 20px">
+<div class="draggable scaleable-wrapper menu" style="top:160%;left: 5; width: 300px; font-size: 20px">
   <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
   <div class="drag-content">
    (first experiments)
@@ -560,14 +553,23 @@ $("#katalin").click(function(){
 </div>
 
 
-<div class="draggable scaleable-wrapper menu" style="top: 105%; left: 2%;">
+<div class="draggable scaleable-wrapper menu" style="top: 100%; left: 2%;">
-  <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast1.php">"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div>  
+</div>
+<div class="draggable scaleable-wrapper menu" style="top: 105%; left: 3%;">
+  <h2 ><a href="podcast2.php">"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div>  
 </div>
-<div class="draggable scaleable-wrapper menu" style="top: 115%; left: 3%;">
+<div class="draggable scaleable-wrapper menu" style="top: 115%; left: 1%;">
-  <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast3.php">"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
   </div> 
-<div class="draggable scaleable-wrapper menu" style="top: 125%; left: 1%;">
-  <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
 </div>
 
 <div class="draggable scaleable-wrapper active-draggable" style="top: 1%; left: 1%;">

podcast1.php

@@ -20,10 +20,10 @@
 
 <!-- draggable -->
 <br><br>
-<h1 id="box-title" style="left: 45%; position: absolute;">
+<!-- <h1 id="box-title" style="left: 45%; position: absolute;">
   Mediating Speech
 </h1>  
-
+ -->
 
 <!-- draggable menu-->
 <div class="draggable scaleable-wrapper menu" style="top: 110%; right: 3%;">
@@ -52,18 +52,24 @@
   </div> 
 </div>
 
-<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
+<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 26%">
-  <h2 ><a class="active" href="podcast1.php">Podcast1</a></h2> 
+  <h2 ><a class="active" href="podcast1.php">"Mediating Speech"</a></h2> 
   <div class="drag-content">
     <?php include 'texts/podcast1.txt'; ?>
 </div>
 </div>
 
 <div class="draggable scaleable-wrapper menu" style="top: 34%; right: 5%">
-  <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast2.php">"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div>  
+</div>
+<div class="draggable scaleable-wrapper menu" style="top: 49%; right: 3%">
+  <h2 ><a href="podcast3.php">"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
   </div>  
-<div class="draggable scaleable-wrapper menu" style="top: 44%; right: 3%">
-  <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
 </div>
 
 <div class="draggable scaleable-wrapper menu" style="top: 110%; left: 1%;">

podcast2.php

@@ -20,9 +20,9 @@
 
 <!-- draggable -->
 <br><br>
-<h1 id="box-title" style="left: 45%; position: absolute;">
+<!-- <h1 id="box-title" style="left: 45%; position: absolute;">
   Voice's Transition
-</h1>  
+</h1>   -->
 
 
 <!-- draggable menu-->
@@ -52,18 +52,24 @@
   </div> 
 </div>
 
-<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
+<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 26%">
-  <h2 ><a class="active" href="podcast2.php">Podcast2</a></h2> 
+  <h2 ><a class="active" href="podcast2.php">"Voice's Transition"</a></h2> 
   <div class="drag-content">
     <?php include 'texts/podcast2.txt'; ?>
 </div>
 </div>
 
 <div class="draggable scaleable-wrapper menu" style="top: 34%; right: 5%">
-  <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast1.php">"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div> 
+</div>
+<div class="draggable scaleable-wrapper menu" style="top: 49%; right: 3%">
+  <h2 ><a href="podcast3.php">"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
   </div>  
-<div class="draggable scaleable-wrapper menu" style="top: 44%; right: 3%">
-  <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
 </div>
 
 

podcast3.php

@@ -20,9 +20,9 @@
 
 <!-- draggable -->
 <br><br>
-<h1 id="box-title" style="left: 45%; position: absolute;">
+<!-- <h1 id="box-title" style="left: 45%; position: absolute;">
   Blocking our Voices
-</h1>  
+</h1>  --> 
 <!-- draggable menu-->
 <div class="draggable scaleable-wrapper menu" style="top: 110%; right: 3%;">
   <h2><a href="amplification.php">Amplification of female voices</a></h2> 
@@ -50,18 +50,24 @@
   </div> 
 </div>
 
-<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
+<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 26%">
-  <h2 ><a class="active" href="podcast3.php">Podcast3</a></h2> 
+  <h2 ><a class="active" href="podcast3.php">"Blocking our Voices"</a></h2> 
   <div class="drag-content">
     <?php include 'texts/podcast3.txt'; ?>
 </div>
 </div>
 
 <div class="draggable scaleable-wrapper menu" style="top: 34%; right: 5%">
-  <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast1.php">"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div> 
+</div>
+<div class="draggable scaleable-wrapper menu" style="top: 49%; right: 3%">
+  <h2 ><a href="podcast2.php">"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
   </div> 
-<div class="draggable scaleable-wrapper menu" style="top: 44%; right: 3%">
-  <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
 </div>
 
 

texts/podcast1.txt

@@ -1,2 +1,2 @@
-Podcast1 "Mediating Speech" includes a series of episodes about the amplification of one's speech through the voice of others. 
+The podcast "Mediating Speech" includes a series of episodes about the amplification of one's speech through the voice of others. 
 <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>

texts/podcast2.txt

@@ -1 +1 @@
-Podcast2 "Voice's Transition" includes a series of episodes about the electronical transformation of one's voice into another voice in terms of gender. <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>
+The podcast "Voice's Transition" includes a series of episodes about the electronical transformation of one's voice into another voice in terms of gender. <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>

texts/podcast3.txt

@@ -1 +1 @@
-Podcast3 "Blocking our Voices" includes a series of episodes about the ways we learn to self-control and sensor our speech. <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>
+The podcast "Blocking our Voices" includes a series of episodes about the ways we learn to self-control and sensor our speech. <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>

thesis-angeliki.php

@@ -61,16 +61,26 @@
 </div>
 
 <div class="draggable scaleable-wrapper menu" style="top: 100%; right: 3%;">
-  <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast1.php">"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div>  
 </div>
 <div class="draggable scaleable-wrapper menu" style="top: 90%; right: 5%;">
-  <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast2.php">"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div>  
 </div>
 <div class="draggable scaleable-wrapper menu" style="top: 110%; right: 3%;">
-  <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <h2 ><a href="podcast3.php">"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2> 
+  <div class="drag-content">
+   (podcast)
+  </div> 
 </div>
 
 
+
 <div class="draggable scaleable-wrapper active-draggable" style="top: 30%; left: 2%; z-index: 9;">
   <h2 ><a class="active" href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
   <div class="drag-content">