fixed conflict index

index.html

@@ -20,8 +20,8 @@
 <div class="container-fluid p-0">
 <div class="bg">
   <div class="row">
-    <div class="col-md-3"><div id="title_website">Wells of Knowledge</div></div>
-      <div class="col-md-3 offset-md-6" id="menu">
+    <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> |
    </span>
@@ -70,7 +70,7 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
     <!-- </div> -->
     <!-- map area -->
   <div class="row" id="noflex">
-    <div class="col-md-10 offset-md-1">
+    <div class="col-md-12">
     <div class="map_area">
       <!-- <p>Related media</p> -->
       <!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> -->
@@ -120,10 +120,12 @@ provide new insights to broader audiences. For a digital version of this and oth
 publications, go to at.wdka.nl/hpresearchawards</div>
       </div>
 
-      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>How to use</h2><p>
-        The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary. Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.<br>
-        When double clicking, a name is isolated and displayed alongside its closest connections. <br>
-        When clickling once on one of the names, various kinds of media appear in connection to that name. The colors represent different categories (Folklore literature, Islamic Mysticism, etc).<br> All the elements of the map can be rearranged and moved. </p></div>
+      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3>
+        <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>
+        <p>When clickling once on one of the names, various kinds of media appear in connection to that name. The colors represent different categories (Folklore literature, Islamic Mysticism, etc).</p>
+        <p>  When double clicking, a name is isolated and displayed alongside its closest connections. </p><p>All the elements of the map can be rearranged and moved. </p></div>
       </div>
 
       <script src="static/js/d3_map.js"></script>

static/css/style.css

@@ -23,7 +23,7 @@ body {
   }
 .bg::before {
   content: "";
-  background-image: url("/static/images/poster1.png");
+  background-image: url("/static/images/crop_above.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -33,7 +33,7 @@ body {
   bottom: 0px;
   left: 0px;
   opacity: 0.4;
-  filter: blur(20px);
+  filter: blur(10px);
   opacity:
   }
 /*Main areas*/
@@ -41,7 +41,7 @@ body {
   font-family:'Walter Turncoat', cursive;
   font-style: italic;
   color: #d81159;
-  font-size: 20px;
+  font-size: 30px;
   margin-left: 50px;
   margin-top: 15px;
 }
@@ -101,7 +101,7 @@ cursor: pointer;
 
 .group2 {
 	fill: #ffbc42;
-  font-size: 20px;
+  font-size: 16px;
   font-family: 'Vesper Libre', serif;
   z-index: 2;
 }
@@ -110,7 +110,7 @@ cursor: pointer;
 
 .group1 {
   fill: #d81159;
-  font-size: 20px;
+  font-size: 16px;
   font-family: 'Vesper Libre', serif;
   z-index: 1;
 }
@@ -118,7 +118,7 @@ cursor: pointer;
 .group4 {
   fill: #73d2de;
   font-family: 'Vesper Libre', serif;
-  font-size: 20px;
+  font-size: 16px;
 z-index: 4;
 
 }
@@ -126,7 +126,7 @@ z-index: 4;
 .group3 {
   fill: #218380;
   font-family: 'Vesper Libre', serif;
-  font-size: 20px;
+  font-size: 16px;
   z-index: 3;
 }
 
@@ -166,6 +166,8 @@ a {
   margin-top: 5px;
   display: inline-block;
   color: #d81159;
+  margin-bottom: 20px;
+
 }
 
 #box2 {
@@ -217,7 +219,7 @@ a {
   padding-left: 5px;
   font-family: 'Vesper Libre', serif;
   display: inline;
-  font-size: 0.8em;
+  font-size: 0.9em;
 }
 
 
@@ -237,6 +239,7 @@ margin-right: 10px;
 margin-top: 20px;
 line-height: 1.6em;
 font-family: 'Vesper Libre', serif;
+font-size: 16px;
 scrollbar-color: #d87fa0 #dbf6f9;
 position: relative;
 z-index:4;
@@ -454,12 +457,15 @@ color: #d81159;
   word-wrap: break-word;
   background-size: 100%;
   width: 50%;
-  height: auto;
+  max-height: 500px;
   border: 1px solid black;
   padding: 2%;
   z-index: 5;
   font-family: 'Vesper Libre', serif;
   font-size: 16px;
+  overflow-y: scroll;
+  scrollbar-color: #d87fa0 #dbf6f9;
+  scroll-behavior: smooth;
 
 }
 

static/js/d3_map.js

@@ -4,12 +4,12 @@ var width = 700,
 var svg = d3.select(".map_area").append("svg")
   .attr("width", width)
   .attr("height", height)
-  .attr("viewBox", `${-width/1.7} ${-height/1.6} ${width*2.3} ${height*2.2}`);
+  .attr("viewBox", `${-width/1.7} ${-height/1.8} ${width*2.3} ${height*2.2}`);
 
 var force = d3.layout.force()
   .gravity(0.008)
-  .distance(200)
-  .charge(-40)
+  .distance(180)
+  .charge(-35)
   .size([width, height]);