changed colors

wells/index.html

@@ -101,7 +101,6 @@
 
 <div class="row">
   <div class="col-md-6">
-    <p id="legend_title">Map legend</p>
 
     <div class="map_legend">
     <div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p>

wells/static/css/style.css

@@ -11,19 +11,30 @@ body {
   overflow: scroll;
   font-size: .8em;
 }
+
+
 .container-fluid {
   overflow: hidden;
 }
 
 .bg {
-/*  background-image: url("/static/images/book.jpeg");*/
-  /* background-image: linear-gradient(#CDCEC9, #9494A0, #652A2E); */
   height: 100%;
+  width: 100%;
+  }
+.bg::before {
+  content: "";
+  background-image: url("/static/images/poster1.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
-
-}*/
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  opacity: 0.2;
+  filter: blur(20px);
+  }
 /*Main areas*/
 .map_area {
   text-align: center;
@@ -31,8 +42,7 @@ body {
   margin-bottom: 20px;
   margin-right: 10px;
   margin-left: 20px;
-z-index: -1 !important;
-position: relative;
+  position: relative;
 }
 .media_area {
   margin-top: 10px;
@@ -42,7 +52,6 @@ position: relative;
 
 .media_area img {
   width: 400px;
-  /*height: 150px;*/
 }
 
 
@@ -70,7 +79,7 @@ cursor: pointer;
 /* Node styling */
 
 .group2 {
-	fill: #92817a ;
+	fill: #ffbc42;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
   z-index: 2;
@@ -79,14 +88,14 @@ cursor: pointer;
 
 
 .group1 {
-  fill: #bedbbb;
+  fill: #d81159;
   font-size: 20px;
   font-family: 'Vesper Libre', serif;
   z-index: 1;
 }
 
 .group4 {
-  fill: #8db956;
+  fill: #73d2de;
   font-family: 'Vesper Libre', serif;
   font-size: 20px;
 z-index: 4;
@@ -94,7 +103,7 @@ z-index: 4;
 }
 
 .group3 {
-  fill: #707070;
+  fill: #218380;
   font-family: 'Vesper Libre', serif;
   font-size: 20px;
   z-index: 3;
@@ -124,7 +133,6 @@ stroke-dasharray:6px;
   margin:auto;
   height:500px;
   width:700px;
-
 }
 
 /* map legend */
@@ -135,8 +143,7 @@ stroke-dasharray:6px;
   margin-left : 10px;
   margin-top: 10px;
   display: inline-block;
-
-  background-color: #bedbbb;
+  background-color: #d81159;
 }
 
 #box2 {
@@ -144,7 +151,7 @@ stroke-dasharray:6px;
   width: 15px;
   margin-left : 10px;
   margin-top: 10px;
-  background-color: #92817a;
+  background-color: #ffbc42;
   display: inline-block;
 
 }
@@ -154,7 +161,7 @@ stroke-dasharray:6px;
   width: 15px;
   margin-left : 10px;
   margin-top: 10px;
-  background-color: #707070;
+  background-color: #218380;
   display: inline-block;
 
 }
@@ -165,7 +172,7 @@ stroke-dasharray:6px;
   margin-left : 10px;
   margin-top: 10px;
   display: inline-block;
-  background-color: #8db956;
+  background-color: #73d2de;
 }
 
 .map_legend p {

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.7} ${-height/1.6} ${width*2.3} ${height*2.2}`);
 
 var force = d3.layout.force()
     .gravity(0.009)