Hybrid Publishing hybrid publication of the project Volitional Volutions of the Volatile Waters
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

293 lines
4.2 KiB

/* Everything*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Source+Sans+Pro:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asul&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
* {
border: 0px black solid;
}
.container-fluid {
overflow: hidden;
}
.bg {
/* background-image: url("/static/images/book.jpeg");*/
/* background-image: linear-gradient(#CDCEC9, #9494A0, #652A2E); */
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}*/
/*Main areas*/
.map_area {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 20px;
}
.media_area {
margin-top: 10px;
padding-right: 20px;
height:100%;
}
.media_area img {
width: 400px;
/*height: 150px;*/
}
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
}
/* Audio in background */
.audio-button {
background: white;
}
.audio-button:hover {
background: grey;
cursor: pointer;
}
/* Node styling */
.group2 {
fill: #92817a ;
font-size: 18px;
font-family: 'Vesper Libre', serif;
}
.group1 {
fill: #bedbbb;
font-size: 18px;
font-family: 'Vesper Libre', serif;
}
.group4 {
fill: #8db956;
font-family: 'Vesper Libre', serif;
font-size: 18px;
}
.group3 {
fill: #707070;
font-family: 'Vesper Libre', serif;
font-size: 18px;
}
svg{
width:100%;
height:100%;
margin-left: 30px;
margin-top: 10px;
}
path{
fill: transparent;
stroke: #000;
stroke-dasharray:6px;
}
#map_div{
position:absolute;
top:20px;
left:0;
right:0;
margin:auto;
height:500px;
width:700px;
}
/* map legend */
.box1 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
display: inline-block;
background-color: #bedbbb;
}
.box2 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
background-color: #92817a;
display: inline-block;
}
.box3 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
background-color: #707070;
display: inline-block;
}
.box4 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
display: inline-block;
background-color: #8db956;
}
.map_legend p {
padding-left: 5px;
font-family: 'Vesper Libre', serif;
display: inline;
font-size: 15px;
}
#legend_title {
font-family: 'Vesper Libre', serif;
font-size: 20px;
padding-left: 10px;
}
/* text area */
.thesis {
overflow-y: scroll;
max-height:450px;
scroll-behavior: smooth;
font-size: 1em;
border: 1px black solid;
padding: 2em;
margin-right: 10px;
margin-top: 20px;
line-height: 1.6em;
font-family: 'Vesper Libre', serif;
scrollbar-color: #cdcec9 #bedbbb;
position: relative;
}
.scrollable {
overflow-y: scroll;
scroll-behavior: smooth;
overflow: hidden;
}
h1 {
font-size: 1.4em !important;
}
h2 {
font-size: 1.2em !important;
}
/* background audio */
.play-stop {
position: absolute;
bottom: 1.6em;
z-index: 1;
margin-left: calc( 50% - 1.8em );
overflow: hidden;
font-size: 1.2em;
font-weight: bold;
font-family:'Walter Turncoat', cursive;
color: #AEB10A;
cursor: pointer;
}
.play-stop:hover {
color: #cdcec9;
}
/* circles */
#first_circle {
width: 100%;
height: 100%;
}
#second_circle {
width: 100%;
height: 100%;
}
@media all and (max-width: 350px) {
}
draggable {
position: absolute;
}
.draggable iframe {
padding: 20px;
}
#transcriptWrapper {
overflow: hidden;
}
#transcript > div {
transition: all 0.8s ease;
list-style-type: disc;
}
.speaking {
font-weight: bold;
}
/* pop up */
#showdadaloglu,#showasikA,#showasikV,#showmuharrem,#shownazim,#showneyzen,#showruhisu,#showasu {
display: none;
left: 20%;
width: 50% !important;
}
.text_audio{
margin-bottom: 1.2em;
margin-top: 2em;
font-family:'Vesper Libre', serif;
}
/*d3 map*/
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 1em sans-serif;
}
.active {
background-color: RGBA(190,219,187, 0.6);
display: inline;
/* box-shadow: 5px 0 0px 0px #bedbbb, -5px 0 0px 0px #bedbbb; */
}