579 lines
7.9 KiB
CSS
579 lines
7.9 KiB
CSS
/* 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/crop_above.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(10px);
|
|
opacity:
|
|
}
|
|
/*Main areas*/
|
|
#title_website {
|
|
font-family:'Walter Turncoat', cursive;
|
|
font-style: italic;
|
|
color: #d81159 !important;
|
|
font-size: 30px;
|
|
margin-left: 50px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
|
|
/*resize thesis*/
|
|
|
|
|
|
|
|
#noflex {
|
|
display: block;
|
|
}
|
|
.map_area {
|
|
margin-right: 10px;
|
|
margin-left: 20px;
|
|
position: relative;
|
|
|
|
|
|
/*border-top: 1px dashed #d81159;*/
|
|
}
|
|
.media_area {
|
|
margin-top: 10px;
|
|
padding-right: 20px;
|
|
height:100%;
|
|
}
|
|
|
|
.media_area img {
|
|
width: 400px;
|
|
}
|
|
|
|
/* Audio in background */
|
|
.audioBG {
|
|
margin-left: 50px;
|
|
margin-top: -2px;
|
|
font-size: 20px!important;
|
|
}
|
|
|
|
button {
|
|
background-color: #fff0f000;
|
|
}
|
|
#dur1 {
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.audio-button {
|
|
background: transparent;
|
|
color:inherit;
|
|
}
|
|
|
|
|
|
.audio-button:hover {
|
|
background: grey;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.main_audio {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
/* Node styling */
|
|
|
|
.group2 {
|
|
fill: #ffbc42;
|
|
font-size: 16px;
|
|
font-family: 'Vesper Libre', serif;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
.group1 {
|
|
fill: #d81159;
|
|
font-size: 16px;
|
|
font-family: 'Vesper Libre', serif;
|
|
z-index: 1;
|
|
}
|
|
|
|
.group4 {
|
|
fill: #73d2de;
|
|
font-family: 'Vesper Libre', serif;
|
|
font-size: 16px;
|
|
z-index: 4;
|
|
|
|
}
|
|
|
|
.group3 {
|
|
fill: #218380;
|
|
font-family: 'Vesper Libre', serif;
|
|
font-size: 16px;
|
|
z-index: 3;
|
|
}
|
|
|
|
svg{
|
|
width:100%;
|
|
height:100%;
|
|
margin-left: 30px;
|
|
margin-top: 10px;
|
|
z-index: 1;
|
|
position: relative;
|
|
box-shadow: 20px 2px 15px 0px white;
|
|
|
|
/*border-top: 2px solid #d81159;*/
|
|
}
|
|
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: #d81159
|
|
}
|
|
a :hover {
|
|
text-decoration: none;
|
|
}
|
|
/* map legend */
|
|
|
|
#box1 {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-left : 58px;
|
|
margin-top: 5px;
|
|
display: inline-block;
|
|
color: #d81159;
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
#box2 {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-left : 10px;
|
|
margin-top: 5px;
|
|
color: #ffbc42;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
#box3 {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-left : 10px;
|
|
margin-top: 5px;
|
|
color: #218380;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
#box4 {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-left : 10px;
|
|
margin-top: 5px;
|
|
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: 0.9em;
|
|
}
|
|
|
|
|
|
#closeall {
|
|
display: none;
|
|
}
|
|
|
|
/* 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: 400px;
|
|
max-width: 50%;
|
|
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;
|
|
font-size: 16px;
|
|
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 */
|
|
|
|
|
|
.draggable {
|
|
position: absolute;
|
|
cursor: move;
|
|
/* 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;
|
|
z-index: 5;
|
|
border: 1px black solid;
|
|
opacity: 0.4;
|
|
|
|
}
|
|
|
|
#showvideo:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
#showbio {
|
|
/* display: none; */
|
|
right: 10%;
|
|
top:50%;
|
|
left: 60%;
|
|
bottom: 10%;
|
|
padding: 2%;
|
|
background-color: transparent;
|
|
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;
|
|
font-family: 'Vesper Libre', serif;
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
#showbio:hover {
|
|
background-color: white;
|
|
opacity: 1;
|
|
}
|
|
#closeall {
|
|
font-family:'Walter Turncoat', cursive;
|
|
cursor: pointer;
|
|
color: #d81159;
|
|
font-size: 20px;
|
|
padding-left: 50%;
|
|
}
|
|
/* .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: 16px;
|
|
color: black;
|
|
}
|
|
|
|
.thesisX {
|
|
position: absolute;
|
|
z-index:5;
|
|
left: 96%;
|
|
top: 8%;
|
|
float: right;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
color: black;
|
|
}
|
|
|
|
#nothesis {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* about and colophon */
|
|
#menu {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#about, #colophon, #how {
|
|
font-family:'Walter Turncoat', cursive;
|
|
color: #d81159;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/*#colophon {
|
|
position: absolute;
|
|
left: 50px;
|
|
bottom:30px;
|
|
z-index: 5;
|
|
}
|
|
|
|
#how {
|
|
position: absolute;
|
|
right: 50px;
|
|
bottom:30px;
|
|
z-index: 5;
|
|
}
|
|
|
|
#about {
|
|
position: absolute;
|
|
right: 50px;
|
|
top:30px;
|
|
}*/
|
|
|
|
|
|
#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%;
|
|
max-height: 500px;
|
|
border: 1px solid black;
|
|
padding: 2%;
|
|
z-index: 5;
|
|
font-family: 'Vesper Libre', serif;
|
|
font-size: 16px;
|
|
overflow-y: scroll;
|
|
scrollbar-color: #d87fa0 #dbf6f9;
|
|
scroll-behavior: smooth;
|
|
|
|
}
|
|
|
|
#showcolophon {
|
|
left: 30%;
|
|
top:10%;
|
|
}
|
|
|
|
#showhow {
|
|
left: 40%;
|
|
top:20%;
|
|
}
|
|
|
|
#showabout {
|
|
left: 20%;
|
|
}
|
|
|
|
/*d3 map*/
|
|
.link {
|
|
stroke: #c46666;
|
|
}
|
|
|
|
.node text {
|
|
font: 1em sans-serif;
|
|
}
|
|
|
|
.node text:hover {
|
|
cursor: pointer;
|
|
font-style: italic;
|
|
}
|
|
|
|
.active {
|
|
background-color: RGBA(190,219,187, 0.6);
|
|
display: inline;
|
|
/* box-shadow: 5px 0 0px 0px #bedbbb, -5px 0 0px 0px #bedbbb; */
|
|
}
|
|
|
|
/*media*/
|
|
|
|
@media (max-width: 770px) {
|
|
#menu {
|
|
text-align: center;
|
|
}
|
|
|
|
.map_legend p {
|
|
font-size: 0.8em;
|
|
}
|
|
#box1, #box2, #box3, #box4 {
|
|
display: block;
|
|
|
|
}
|
|
#box1 {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
width: 60px;
|
|
display: inline-block;
|
|
}
|
|
@media (max-width: 550px) {
|
|
|
|
.map_legend p {
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
}
|