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.
 
 
 

356 lines
5.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;
}
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%;
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;
z-index: -1 !important;
position: relative;
}
.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;
}
.main_audio {
position: relative;
}
/* Node styling */
.group2 {
fill: #92817a ;
font-size: 18px;
font-family: 'Vesper Libre', serif;
z-index: 2;
}
.group1 {
fill: #bedbbb;
font-size: 18px;
font-family: 'Vesper Libre', serif;
z-index: 1;
}
.group4 {
fill: #8db956;
font-family: 'Vesper Libre', serif;
font-size: 18px;
z-index: 4;
}
.group3 {
fill: #707070;
font-family: 'Vesper Libre', serif;
font-size: 18px;
z-index: 3;
}
svg{
width:100%;
height:100%;
margin-left: 30px;
margin-top: 10px;
z-index: 1;
position: relative;
}
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: .6em;
}
#legend_title {
font-family: 'Vesper Libre', serif;
font-size: .8em;
padding-left: 2em;
position: relative;
}
/* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis {
display: none;
overflow-y: scroll;
max-height: 300px;
max-width: 40%;
scroll-behavior: smooth;
font-size: .6em;
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: fixed;
z-index:4;
background: white;
left: 60%;
top: 2%;
}
.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: 1em; */
z-index: 1;
padding-left: 2em;
/* margin-left: calc( 50% - 1.8em );
margin-top: 5em; */
overflow: hidden;
font-size: .8em;
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;
/* cursor: all-scroll; */
}
/* .scaleable-wrapper {
resize: both;
overflow: auto;
position:relative;
} */
.draggable iframe {
padding: 1em;
}
#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: 10% !important; */
position: fixed;
z-index: 5;
border: 1px black solid;
}
.text_audio{
margin-bottom: 1.2em;
margin-top: 2em;
font-family:'Vesper Libre', serif;
font-size: .8em;
padding-left: 1em;
}
/* Style the close button */
.topleft {
float: right;
cursor: pointer;
font-size: 100%;
color: black;
}
/* about and colophon */
/* #about {
} */
#showabout, #showcolophon {
display: none;
left: 20%;
background-image: url("../images/poster1.png");
word-wrap: break-word;
background-size: 100%;
width: 50%;
height: auto;
border: 1px solid black;
padding: 2%;
}
/*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; */
}