map size

wells/index.html

@@ -44,7 +44,7 @@
 
     <!-- map area -->
   <div class="row">
-    <div class="col-md-8 offset-md-1">
+    <div class="col-md-10 offset-md-1">
     <div class="map_area">
       <div w3-include-html="thesis.html" class="thesis draggable" id="showthesis">
       </div>
@@ -66,7 +66,7 @@
 
       <div class="draggable" id="showmuharrem"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
-      <div class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="300" height="150" 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 class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="360" height="80" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="false"></iframe></div>
 
       <div class="draggable" id="showneyzen"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 

wells/static/css/style.css

@@ -45,9 +45,6 @@ position: relative;
   /*height: 150px;*/
 }
 
-.link {
-  stroke: #ccc;
-}
 
 .node text {
   pointer-events: none;
@@ -73,7 +70,7 @@ cursor: pointer;
 
 .group2 {
 	fill: #92817a ;
-  font-size: 18px;
+  font-size: 20px;
   font-family: 'Vesper Libre', serif;
   z-index: 2;
 }
@@ -82,7 +79,7 @@ cursor: pointer;
 
 .group1 {
   fill: #bedbbb;
-  font-size: 18px;
+  font-size: 20px;
   font-family: 'Vesper Libre', serif;
   z-index: 1;
 }
@@ -90,7 +87,7 @@ cursor: pointer;
 .group4 {
   fill: #8db956;
   font-family: 'Vesper Libre', serif;
-  font-size: 18px;
+  font-size: 20px;
 z-index: 4;
 
 }
@@ -98,7 +95,7 @@ z-index: 4;
 .group3 {
   fill: #707070;
   font-family: 'Vesper Libre', serif;
-  font-size: 18px;
+  font-size: 20px;
   z-index: 3;
 
 
@@ -179,9 +176,10 @@ stroke-dasharray:6px;
 
 #legend_title {
   font-family: 'Vesper Libre', serif;
-  font-size: .8em;
+  font-size: 1em;
   padding-left: 2em;
   position: relative;
+  margin-top: 1em;
 }
 
 /* text area */
@@ -320,7 +318,7 @@ h2 {
 
 /*d3 map*/
 .link {
-  stroke: #ccc;
+  stroke: #c46666;
 }
 
 .node text {

wells/static/js/d3_map.js

@@ -4,7 +4,7 @@ var width = 700,
 var svg = d3.select(".map_area").append("svg")
     .attr("width", width)
     .attr("height", height)
-    .attr("viewBox", `${-width/1.3} ${-height/1.6} ${width*2.3} ${height*2.3}`);
+    .attr("viewBox", `${-width/1.5} ${-height/1.6} ${width*2.7} ${height*2.3}`);
 
 var force = d3.layout.force()
     .gravity(0.009)
@@ -82,7 +82,7 @@ function connectedNodes() {
 
   node.append("image")
       // .attr("xlink:href", "/static/images/squig2.png")
-      .attr("xlink:href", "../images/circleB.png")
+      .attr("xlink:href", "/static/images/circleB.png")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)