styled the website for presentation

static/css/style.css

@@ -2,6 +2,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Source+Sans+Pro:wght@300&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Asul&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
 * {
   border: 0px black solid;
 
@@ -50,115 +51,115 @@
 /* Node styling */
 
 #ahmed text {
-	fill: #703022;
+	fill: #226270 ;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #mevlana text {
-  fill: #703022;
+  fill: #226270 ;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 
 }
 
 #haci text {
-  fill: #703022;
+  fill: #226270 ;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #dadaloglu text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #dedekorkut text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #asikN text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #asikA text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #asikM text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #karacaoglan text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #asikV text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #neset text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #muharrem text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #aliekber text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #dedeoglu text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #pir text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #yunus text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #kulN text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
 #kaygusuz text {
-  fill: #C85E40;
+  fill: #703022;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
 }
 
-svg{  width:100%; height:200%; }
+svg{  width:100%; height:100%; margin:0 auto;}
 path{
 fill: transparent;
 stroke: #000;
@@ -185,15 +186,19 @@ stroke-dasharray:6px;
 /* text area */
 .thesis {
 overflow-y: scroll;
-max-height:400px;
+max-height:600px;
 scroll-behavior: smooth;
 font-size: 1em;
 border: 1px black solid;
-padding: 0.5em;
+padding: 2em;
 margin-right: 10px;
 margin-top: 10px;
+line-height: 1.6em;
+font-family: 'Vesper Libre', serif;
+scrollbar-color: #cdcec9 #aeb10a;
 }
 
+
 h1 {
   font-size: 1.4em !important;
 }
@@ -207,16 +212,19 @@ h2 {
 
 .play-stop {
     position: absolute;
-    bottom: 1.2em;
+    bottom: 1.6em;
     z-index: 1;
     margin-left: calc( 50% - 1.8em );
     overflow: hidden;
-    font-size: 20px;
+    font-size: 1.2em;
     font-weight: bold;
+    font-family:'Walter Turncoat', cursive;
+    color: #AEB10A;
+    cursor: pointer;
 }
 
 .play-stop:hover {
-  color: #AEB10A;
+  color: #cdcec9;
 }
 
 /* circles */
@@ -262,10 +270,16 @@ draggable {
 
 
 /* pop up */
-#showdadaloglu,#showmuharrem {
+#showdadaloglu,#showasikA {
   display: none;
   left: 20%;
-  width: 23% !important;
+  width: 50% !important;
+}
+
+.text_audio{
+  margin-bottom: 1.2em;
+  margin-top: 2em;
+  font-family:'Vesper Libre', serif;
 }
 
 
@@ -280,5 +294,5 @@ draggable {
 }
 
 .active {
-  background-color: #80ffd4;
+  background-color: RGBA(174, 177, 10, 0.6);
 }

static/js/d3_map.js

@@ -1,16 +1,18 @@
 var width = 500,
-    height = 400
+    height = 380
 
 var svg = d3.select(".map_area").append("svg")
     .attr("width", width)
-    .attr("height", height);
+    .attr("height", height)
+    .attr("viewBox", `${-width/2.5} ${-height/2.5} ${width*2.5} ${height*2.5}`);
 
 var force = d3.layout.force()
     .gravity(0.01)
-    .distance(100)
+    .distance(300)
     .charge(-50)
     .size([width, height]);
 
+
 d3.json("/static/js/group1.json", function(error, json) {
   if (error) throw error;
 
@@ -27,7 +29,8 @@ d3.json("/static/js/group1.json", function(error, json) {
   var node = svg.selectAll(".node")
       .data(json.nodes)
     .enter().append("g")
-      .attr("class", "node "+function(d){return d.class})
+      .attr("class", "node ")
+      // .node()classList.add(function(d){return d.group});
       .attr("id", function(d){return d.id})
 
 
@@ -46,6 +49,11 @@ d3.json("/static/js/group1.json", function(error, json) {
       .attr("width", 16)
       .attr("height", 16);
 
+  node.on({
+  "mouseover": function(d) {
+    d3.select(this).style("cursor", "pointer");
+  }});
+
   node.append("text")
       .attr("dx", 12)
       .attr("dy", ".35em")
@@ -106,9 +114,9 @@ d3.json("/static/js/group1.json", function(error, json) {
 
 
 
-    $("#muharrem").click(function(){$("#showmuharrem").fadeIn()
+    $("#asikA").click(function(){$("#showasikA").fadeIn()
     console.log("around")
-    var muh = document.getElementById("textmuharrem");
+    var muh = document.getElementById("textasikA");
     muh.className += " active";
     muh.scrollIntoView();
     var audio2 = document.getElementById("audio-1");
@@ -124,10 +132,10 @@ d3.json("/static/js/group1.json", function(error, json) {
         var textdada = document.getElementById("textdadaloglu");
         textdada.classList.remove("active");
       };
-    if (!$(e.target).parents().andSelf().is('#muharrem')) {
-      $("#showmuharrem").fadeOut();
-        $("audiomuharrem").trigger('pause');
-        var textmuh = document.getElementById("textmuharrem");
+    if (!$(e.target).parents().andSelf().is('#asikA')) {
+      $("#showasikA").fadeOut();
+        $("audioasikA").trigger('pause');
+        var textmuh = document.getElementById("textasikA");
         textmuh.classList.remove("active");
     };
   });

templates/hello.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}Hello{% endblock %}
+{% block title %}VVVW{% endblock %}
 {% block body %}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <div class="bg">
@@ -24,11 +24,11 @@
       <div class="col-md-10">
         <div class="media_area">
           <!-- <p>Related media</p> -->
-          <div id="showdadaloglu">Audio for Dadaloglu<audio id="audiodadaloglu" controls>
+          <div id="showdadaloglu"><div class='text_audio'>Audio for Dadaloglu</div><audio id="audiodadaloglu" controls>
               <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
               Your browser does not support the audio tag.
             </audio></div>
-          <div id="showmuharrem">Audio for Muharrem Ertas<audio id="audiomuharrem" controls>
+          <div id="showasikA"><div class='text_audio'>Audio for Aşık Ali İzzet</div><audio id="audioasikA" controls>
               <source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
               Your browser does not support the audio tag.
             </audio></div>

templates/thesis.html

@@ -1,4 +1,4 @@
-<h1>Wells of Knowledge: Streams of poetry, music and resistance in Turkey</h1>
+<h1>Wells of Knowledge: <p>Streams of poetry, music and resistance in Turkey</h1>
 <h2>Merve Kılıçer</h2>
 <p><i>“If history writing does not emancipate, it must be serving tyranny.”
 Cemal Kafadar, ‘Kendine ait bir Roma’, pg.1</i><br></p>
@@ -40,7 +40,7 @@ After 7 years, I’m still trying to figure out how and why we managed to come t
 tecting a green area that belonged to our home, protecting friends and the increasing level of op-
 pression were the instinctive push points but my real question is: how did the spirit of Gezi Park
 come to life?
-<p id="textdadaloglu">
+
 The park brought together people from different economic backgrounds, ethnicities and beliefs,
 manifesting the idea that when we stand together we are heard. And our voice carried all the tunes,
 rhythms and stories of Turkey. To analyze this historic moment, I’ve been listening closely to the
@@ -49,7 +49,7 @@ land. I asked myself: Could the accumulation of these voices and words be the fo
 of Gezi Spirit? What kind of knowledge do we inherit from the land we feel rooted in? Which are
 the stories we were raised with and how did they shape our perception of the world and ‘other’
 people we share it with?
-</p>
+
 Learning and unlearning the tenets of our upbringing is a process of growth. At the park, we wit-
 nessed the clash of all the false and accurate knowledge we were introduced to throughout our
 lives. This clash brought us a little closer to the understanding of what is political and how we can
@@ -69,16 +69,20 @@ and those of their predecessor. They were storytellers who narrated with poetry,
 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.
-Kalktı Göç Eyledi Avşar Elleri,
-Ağır Ağır Giden Eller Bizimdir.
-Arap Atlar Yakın Eder ırağı,
-Yüce Dağdan Aşan Yollar Bizimdir.
-/
-Rised and migrated the Avşar tribes,
-The folk slowly moving is ours.
-Arabic horses render the distances close,
-The paths overrunning the mighty mountains are ours.
-Dadaloğlu’s (18th cc) epical folk poem was chanted by Ruhi Su in 1960’s
+
+<p id="textdadaloglu">
+Kalktı Göç Eyledi Avşar Elleri,<br>
+Ağır Ağır Giden Eller Bizimdir.<br>
+Arap Atlar Yakın Eder ırağı,<br>
+Yüce Dağdan Aşan Yollar Bizimdir.<br>
+/<br>
+Rised and migrated the Avşar tribes,<br>
+The folk slowly moving is ours.<br>
+Arabic horses render the distances close,<br>
+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
 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
@@ -116,7 +120,6 @@ Hüseyin Gazi Sultan binsin atına
 Dayanılmaz çarh-ı felek zatına
 Bizden selâm söylen ev külfetineÇıkıp ele karşı ağlamasınlar
 /
-<p id="textmuharrem">
 They call me Pir Sultan in Banaz
 Do not suppose I’m the sinister one
 Pasha should advice his servants
@@ -166,12 +169,14 @@ 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">
 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-
 loric tunes and themes with popular western instruments and methods. While Tülay German
 adopted folklore songs into jazz tunes and collaborated with Ashiks that migrated to the city, Fikret
-Kızılok went to study with Ashik Veysel in Anatolia and made records with the songs of his mentor.
+Kızılok went to study with Ashik Veysel in Anatolia and made records with the songs of his mentor.</p>
+
 This new approach was the result of the emigration of Anatolian folk (especially the minorities) to-
 wards big cities to work in factories or study at the universities and technical schools. The universi-
 ties became the meeting point for western educated city youth and the Anatolian youth who were
@@ -181,6 +186,7 @@ ence and used their traditional cultural production to propagate ideas of equali
 were showing resistance to the economic sanctions of the U.S. who had been providing financial
 support to Turkey and to do so, they were using the folkloric language which created a bridge be-
 tween intellectuals, factory workers (in Turkey and in Europe) and farmers of the rural areas.
+
 Şenlik dağıldı bir acı yel kaldı bahçede yalnız
 O mahur beste çalar Müjgan’la ben ağlaşırız
 Gitti dostlar şölen bitti ne eski heyecan ne hız
@@ -279,4 +285,4 @@ Links
 -https://blog.iae.org.tr/sergiler/taksim-gezi-parkinin-tarihcesi-http://www.rusen.org/konargocer-turkler-kim/
 -https://www.alevibektasi.eu/
 -http://www.musikidergisi.net/
--http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu
+-http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu