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.
 
 
 

488 lines
6.9 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 {
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.4;
filter: blur(20px);
opacity:
}
/*Main areas*/
#noflex {
display: block;
}
.map_area {
text-align: center;
/* margin-top: 20px; */
/* margin-bottom: 20px; */
margin-right: 10px;
margin-left: 20px;
position: relative;
}
.media_area {
margin-top: 10px;
padding-right: 20px;
height:100%;
}
.media_area img {
width: 400px;
}
.node text {
pointer-events: none;
}
/* Audio in background */
.audio-button {
background: transparent;
color:inherit;
}
audio {
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
width: 200px;
height: 25px;
}
.audio-button:hover {
background: grey;
cursor: pointer;
}
.main_audio {
position: relative;
}
/* Node styling */
.group2 {
fill: #ffbc42;
font-size: 20px;
font-family: 'Vesper Libre', serif;
z-index: 2;
}
.group1 {
fill: #d81159;
font-size: 20px;
font-family: 'Vesper Libre', serif;
z-index: 1;
}
.group4 {
fill: #73d2de;
font-family: 'Vesper Libre', serif;
font-size: 20px;
z-index: 4;
}
.group3 {
fill: #218380;
font-family: 'Vesper Libre', serif;
font-size: 20px;
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;
}
a {
text-decoration: none;
color: #218380;
}
/* map legend */
#box1 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
display: inline-block;
color: #d81159;
}
#box2 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
color: #ffbc42;
display: inline-block;
}
#box3 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
color: #218380;
display: inline-block;
}
#box4 {
height: 15px;
width: 15px;
margin-left : 10px;
margin-top: 10px;
display: inline-block;
color: #73d2de;
}
#box1:hover {
cursor: pointer;
}
#box2:hover {
cursor: pointer;
}
#box3:hover {
cursor: pointer;
}
#box4:hover {
cursor: pointer;
}
.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: 1em;
padding-left: 2em;
position: relative;
margin-top: 1em;
}
/* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis {
text-align: left !important;
display: none;
overflow-y: scroll;
max-height: 300px;
max-width: 30%;
scroll-behavior: smooth;
font-size: .9em;
border: 1px black solid;
padding: 1.5em;
margin-right: 10px;
margin-top: 20px;
line-height: 1.6em;
font-family: 'Vesper Libre', serif;
scrollbar-color: #d87fa0 #dbf6f9;
position: relative;
z-index:4;
background: transparent;
left: 2px;
top: 10%;
opacity: 0.4;
}
.thesis:hover {
opacity: 1;
background-color: white;
}
.scaleable-wrapper {
padding: 0.8%;
padding-bottom: 0.8%;
resize: both;
position: relative;
}
/* #resizable {
} */
.ui-resizable-se {
width: 10px;
height: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.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; */
color: #d81159;
cursor: pointer;
}
/* 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 */
#showvideo {
/* display: none; */
right: 6%;
top:10%;
padding: 0.5%;
background-color: transparent;
position: absolute;
z-index: 5;
border: 1px black solid;
opacity: 0.4;
}
#showvideo:hover {
opacity: 1;
}
#showbio {
/* display: none; */
right: 10%;
top:70%;
left: 70%;
bottom: 10%;
padding: 2%;
background-color: transparent;
position: absolute;
z-index: 5;
border: 1px black solid;
overflow-y: scroll;
scroll-behavior: smooth;
max-height: 300px;
max-width: 700px;
scrollbar-color: #d87fa0 #dbf6f9;
opacity: 0.4;
}
#showbio:hover {
background-color: white;
opacity: 1;
}
/* .bio{
margin-bottom: 1.2em;
margin-top: 2em;
font-family:'Vesper Libre', serif;
font-size: .8em;
padding-left: 1em;
z-index: 5;
background-color: white;
border:1px black solid;
} */
/* Style the close button */
.topleft {
float: right;
cursor: pointer;
font-size: 100%;
color: black;
}
#thesisX {
position: absolute;
z-index:5;
left: 480px;
top: 14%;
display: none;
}
/* about and colophon */
#about, #colophon, #how {
font-family:'Walter Turncoat', cursive;
color: #d81159;
}
#about a {
text-decoration: none;
color: #d81159;
}
#colophon a {
text-decoration: none;
color: #d81159;
}
#how a {
text-decoration: none;
color: #d81159;
}
#showabout, #showcolophon, #showhow {
display: none;
/* background-image: url("../images/poster1.png"); */
background-color: white;
word-wrap: break-word;
background-size: 100%;
width: 50%;
height: auto;
border: 1px solid black;
padding: 2%;
z-index: 5;
}
#showcolophon {
left: 30%;
top:10%;
}
#showhow {
left: 40%;
top:20%;
}
#showabout {
left: 20%;
}
/*d3 map*/
.link {
stroke: #c46666;
}
.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; */
}