style improvements

static/css/style.css

@@ -63,7 +63,7 @@ cursor: pointer;
 
 .group2 {
 	fill: #92817a ;
-  font-size: 25px;
+  font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
@@ -71,14 +71,14 @@ cursor: pointer;
 
 .group1 {
   fill: #bedbbb;
-  font-size: 25px;
+  font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 .group4 {
   fill: #8db956;
   font-family: 'Vesper Libre', serif;
-  font-size: 25px;
+  font-size: 20px;
 
 
 }
@@ -86,7 +86,7 @@ cursor: pointer;
 .group3 {
   fill: #707070;
   font-family: 'Vesper Libre', serif;
-  font-size: 25px;
+  font-size: 20px;
 
 
 }
@@ -124,10 +124,11 @@ font-size: 1em;
 border: 1px black solid;
 padding: 2em;
 margin-right: 10px;
-margin-top: 10px;
+margin-top: 20px;
 line-height: 1.6em;
 font-family: 'Vesper Libre', serif;
-scrollbar-color: #cdcec9 #aeb10a;
+scrollbar-color: #cdcec9 #bedbbb;
+position: relative;
 }
 
 .scrollable {
@@ -208,7 +209,7 @@ draggable {
 
 
 /* pop up */
-#showdadaloglu,#showasikA {
+#showdadaloglu,#showasikA,#showasikV,#showmuharrem,#shownazim,#showneyzen,#showruhisu,#showasu {
   display: none;
   left: 20%;
   width: 50% !important;
@@ -232,5 +233,7 @@ draggable {
 }
 
 .active {
-  background-color: RGBA(174, 177, 10, 0.6);
+  background-color: RGBA(190,219,187, 0.6);
+  display: inline;
+  /* box-shadow: 5px 0 0px 0px #bedbbb, -5px 0 0px 0px #bedbbb; */
 }

static/js/d3_map.js

@@ -44,7 +44,8 @@ d3.json("/static/js/group1.json", function(error, json) {
 
 
   node.append("image")
-      .attr("xlink:href", "/static/images/squig2.png")
+      // .attr("xlink:href", "/static/images/squig2.png")
+      .attr("xlink:href", "/static/images/circleB.png")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
@@ -115,41 +116,42 @@ function popup(name,time) {
       audio1.play();
 };
 
-function
-
-// popup('dadaloglu',12);
-// popup('asikA',45);
-//
-
 
 //stop events when clicking somewhere else
-//   $(document).click(function (e) {
-//     if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
-//         $("#showdadaloglu").fadeOut();
-//         $("#audiodadaloglu").trigger('pause');
-//         var textdada = document.getElementById("textdadaloglu");
-//         textdada.classList.remove("active");
-//       };
-//     if (!$(e.target).parents().andSelf().is('#asikA')) {
-//       $("#showasikA").fadeOut();
-//         $("#audioasikA").trigger('pause');
-//         var textmuh = document.getElementById("textasikA");
-//         textmuh.classList.remove("active");
-//     };
-//
-//   });
-
-function stop(name) {
   $(document).click(function (e) {
-    if (!$(e.target).parents().andSelf().is('#'+ name)) {
+    if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
-        $("#show"+name).fadeOut();
+        $("#showdadaloglu").fadeOut();
-        $("#audio"+name).trigger('pause');
+        $("#audiodadaloglu").trigger('pause');
-        var textdada = document.getElementById("text"+name);
+        var textdada = document.getElementById("textdadaloglu");
         textdada.classList.remove("active");
       };
+    if (!$(e.target).parents().andSelf().is('#asikA')) {
+      $("#showasikA").fadeOut();
+        $("#audioasikA").trigger('pause');
+        var textmuh = document.getElementById("textasikA");
+        textmuh.classList.remove("active");
+    };
+    if (!$(e.target).parents().andSelf().is('#asikV')) {
+      $("#showasikV").fadeOut();
+        $("#audioasikV").trigger('pause');
+        var textmuh = document.getElementById("textasikV");
+        textmuh.classList.remove("active");
+    };
+
   });
-};
+
+});
+
+// function stop(name) {
+//   $(document).click(function (e) {
+//     if (!$(e.target).parents().andSelf().is('#'+ name)) {
+//         $("#show"+name).fadeOut();
+//         $("#audio"+name).trigger('pause');
+//         var textdada = document.getElementById("text"+name);
+//         textdada.classList.remove("active");
+//       };
+//   });
+// };
 
 //
 //
-// });

static/js/group1.json

@@ -113,7 +113,7 @@
       "name": "Nazım Hikmet",
       "group": 3,
       "id": "nazim",
-      "time": 1
+      "time": 10
     },
     {
       "name": "Ahmed Arif",

templates/hello.html

@@ -18,8 +18,6 @@
     <div class="scrollable">
     <div class="row">
       <div class="col-md-12">
-          <!-- <p>Merve's thesis</p> -->
-          <!-- <iframe src="../static/images/abstract.pdf" width="300px" height="500px"></iframe> -->
           <div class="thesis">
                 {% include 'thesis.html' %}
           </div>
@@ -34,7 +32,24 @@
               <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
               Your browser does not support the audio tag.
             </audio></div>
+
           <div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="315" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+          <div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="315" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+          <iframe width="560" height="315" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+
+          <div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="315" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+          <div id="shownazim"><div class='text_audio'></div><iframe width="560" height="315" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+          <div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="315" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+          <div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="315" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
+          <div id="showasu"><div class='text_audio'></div><iframe width="560" height="315" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
           <!-- <img src="../static/images/test_small.jpeg" alt="poem"> -->
         </div>
       </div>

templates/thesis.html

@@ -68,7 +68,7 @@ ers or minstrels who traveled with their instruments from land to land, chanting
 and those of their predecessor. They were storytellers who narrated with poetry, music, dance and
 plays. Such practices are common in many cultures around the world and although the societies
 and beliefs went through significant changes over time, this method of carrying knowledge re-
-mained part of everyday life.
+mained part of everyday life.<p></p>
 
 <p id="textdadaloglu">
 Kalktı Göç Eyledi Avşar Elleri,<br>
@@ -83,7 +83,7 @@ The paths overrunning the mighty mountains are ours.<br>
 
 <i>Dadaloğlu’s (18th cc) epical folk poem was chanted by Ruhi Su in 1960’s</i></p>
 
-Islam started spreading through similar traditions of folkloric chanting and poetry migrating from
+<p>Islam started spreading through similar traditions of folkloric chanting and poetry migrating from
 regions today known as Iran (Horasan) and Afghanistan. In time, many nomadic tribes of Central
 Asia started abandoning their polytheistic beliefs, like the shamanic belief Tengrism 2 , and started
 joining Islam. In this process Islam became greatly influenced by previous belief systems and
@@ -111,7 +111,7 @@ norities and critical thinking methods. To emancipate myself and my practice, it
 investigate the past through folkloric production that has reached our present day. Following Ashik
 traditions 3 and practices has been helping me to travel in time and listen to the stories of people
 from different centuries. This tradition which has been taught and transferred through mentoring,
-allows this volatile knowledge 4 to flow and continue reaching different audiences.
+allows this volatile knowledge 4 to flow and continue reaching different audiences.</p>
 Bize de Banaz'da Pir Sultan derler
 Bizi de kem kişi bellemesinler
 Paşa hademine tembih eylesin
@@ -169,7 +169,7 @@ roots to be played on the radio. Even though in the 1930’s he was titled as th
 state, his Alevi roots, were still not recognized. In the 1940’s he was teaching to play cura at several
 Village Institutes 7 (1942-1947) where he encountered Ruhi Su and many other musicians and intel-
 lectuals from Istanbul.
-<p id="textasikA">
+<p id="textmuharrem">
 The cultural production of those years can serve as a recording of the political climate around the
 country. Starting from the 1950’s the western educated musicians, like Ruhi Su, Tülay German,
 Sümeyra Çakır or Fikret Kızılok, in order to stay connected to their roots, started combining folk-