changed colors

This commit is contained in:
alicestrt 2020-12-04 14:25:23 +01:00
parent 6d382a6333
commit 13c1c9d049
3 changed files with 25 additions and 19 deletions

View File

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

View File

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

View File

@ -4,7 +4,7 @@ var width = 700,
var svg = d3.select(".map_area").append("svg") var svg = d3.select(".map_area").append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .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() var force = d3.layout.force()
.gravity(0.009) .gravity(0.009)