From a7840f331efeb6d39299b152b657eec46677e862 Mon Sep 17 00:00:00 2001
From: nglk <diakaggel@gmail.com>
Date: Wed, 3 Mar 2021 13:23:31 +0100
Subject: [PATCH] unsuccesful try outs

---
 index.html           | 25 +++++++++++++------------
 static/css/style.css | 26 ++++++++++++++++++++++++--
 static/js/d3_map.js  |  7 ++-----
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 8561f8c..d32cf0b 100644
--- a/index.html
+++ b/index.html
@@ -23,14 +23,8 @@
     <div class="col-md-4"><div id="title_website">Wells of Knowledge</div></div>
       <div class="col-md-3 offset-md-5" id="menu">
     <span id="about">
-     <a href="#" >about</a> |
+     <a href="#" >about</a>
    </span>
-    <span id="colophon">
-     <a href="#" >colophon</a> |
-   </span>
-   <span id="how">
-    <a href="#" >how to use</a>
-  </span>
   </div>
 
   </div>
@@ -54,7 +48,7 @@
     <button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
 <audio id="audioBG"
 preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
-<source src="static/audio/HNI_Soundinstall_3tracks_together.webm" type="audio/mpeg">
+<source src="static/audio/HNI_Soundinstall_3tracks_together.webm">
 </audio>
 <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
 </div>
@@ -83,7 +77,6 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
       <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
 
       <!-- popups about and colophon -->
-    </div>
       <div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>Wells of Knowledge</h2><p>
 This web platform is a publishing moment/fragment of the work "Volitional Volutions of the Volatile Waters" by Merve Kilicer. <br>
 How can oral knowledge can be 'recorded', 'documented', 'transferred' through a digital online space? This is the question that drove the research behind this website, which has the map of connections as the main navigation point. The visualisation is inspired by the common history and references that people in Gezi Park shared during the 2013 occupation. Their presence together in the square became a melange of their different voices, slogans, poems and memories. "Could the accumulation of these voices and words be the forming substances of Gezi Spirit?"
@@ -139,7 +132,7 @@ Through the map, we give shape to a common context in Turkish culture. The map a
     </div>
       </div>
 
-      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3>
+      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>How to use</h2>
         <p>This website is best displayed on a desktop, using the latest available Firefox version.</p>
         <p>
         The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary.</p> <p>Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.</p>
@@ -148,15 +141,23 @@ Through the map, we give shape to a common context in Turkish culture. The map a
       </div>
 
       <script src="static/js/d3_map.js"></script>
-    </div>
+
+  </div>
+
 
 <div id="nothesis">
         <div w3-include-html="thesis.html" id="thesis" class="draggable thesis">
         </div>
-</div>
   </div>
+</div>
 
+           <span id="colophon">
+     <a href="#" >colophon</a>
+   </span>
 
+      <span id="how">
+    <a href="#" >how to use</a>
+  </span>
 
 </div>
 </div>
diff --git a/static/css/style.css b/static/css/style.css
index e1ce88f..69fad7c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -58,6 +58,7 @@ body {
   margin-right: 10px;
   margin-left: 20px;
   position: relative;
+  
 
   /*border-top: 1px dashed #d81159;*/
 }
@@ -433,16 +434,37 @@ h2 {
 
 
 /* about and colophon */
-#menu {
+/*#menu {
   margin-top: 15px;
+}*/
 
-}
 #about, #colophon, #how {
 font-family:'Walter Turncoat', cursive;
 color: #d81159;
 font-size: 16px;
 }
 
+#colophon {
+  position: absolute;
+  left: 50px;
+  bottom:15px;
+  z-index: 5;
+}
+
+#how {
+  position: absolute;
+  right: 50px;
+  bottom:15px;
+  z-index: 5;
+}
+
+#about {
+    position: absolute;
+  right: 50px;
+  top:15px;
+}
+
+
 #about a {
 text-decoration: none;
 color: #d81159;
diff --git a/static/js/d3_map.js b/static/js/d3_map.js
index 0030993..6db16c9 100644
--- a/static/js/d3_map.js
+++ b/static/js/d3_map.js
@@ -13,6 +13,7 @@ var force = d3.layout.force()
   .size([width, height]);
 
 
+
 d3.json("/static/js/group1.json", function(error, json) {
   if (error) throw error;
 
@@ -53,11 +54,10 @@ d3.json("/static/js/group1.json", function(error, json) {
     });
 
 
+
   var divVideo = d3.select("body").append("div").style("opacity", 1);
   var divBio = d3.select("body").append("div").style("opacity", 1);
 
-
-
   node.on({
       "mouseover": function(d) {
         d3.select(this).style("cursor", "pointer");
@@ -100,9 +100,6 @@ d3.json("/static/js/group1.json", function(error, json) {
 
   });
 
-
-
-
   // highlight NodeLists//Toggle stores whether the highlighting is on
   var toggle = 0;
   //Create an array logging what is connected to what