alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixed errors

Browse Source
This commit is contained in:
nglk 2021-01-15 18:48:40 +01:00
commit d9ca7073e7
2 changed files with 48 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@ -19,16 +19,27 @@
<body> <body>
<div class="container-fluid p-0"> <div class="container-fluid p-0">
<div class="bg"> <div class="bg">
<div class="row">
<div class="col-md-4 offset-md-8" id="menu">
<span id="about">
<a href="#" >about</a> |
</span>
<span id="colophon">
<a href="#" >colophon</a> |
</span>
<span id="how">
<a href="#" >how to use</a>
</span>
</div>
</div>
<div class="row"> <div class="row">
<!-- background audio --> <!-- background audio -->
<div class="col-md-9" style="position: static;"> <div class="col-md-9" style="position: static;">
<div class="row"> <div class="row">
<div class="col-md-12">
<div class="row"> <div class="col-md-5 offset-md-1 col-sm-6 offset-sm-3 col-xs-6 offset-xs-3">
<div class="col-md-1"> <button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button></div>
<div class="col-md-5">
<audio id="audioBG" <audio id="audioBG"
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)"> preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
<source src="static/audio/output.webm" type="audio/mpeg"> <source src="static/audio/output.webm" type="audio/mpeg">
@ -48,26 +59,6 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<span id="about">
<a href="#" >about</a> |
</span>
<span id="colophon">
<a href="#" >colophon</a> |
</span>
<span id="how">
<a href="#" >how to use</a>
</span>
<!-- <h1 id="about">Wells of Knowledge</h1> -->
</div>
</div>
</div>
</div> </div>
<!-- new row should start here --> <!-- new row should start here -->

49
static/css/style.css
View File

@ -4,7 +4,7 @@
@import url('https://fonts.googleapis.com/css2?family=Asul&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'); @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
* { * {
border: 0px black solid; border: 1px black solid;
} }
body { body {
@ -61,7 +61,8 @@ body {
/* Audio in background */ /* Audio in background */
.audioBG { .audioBG {
padding-top: 10px; margin-top: 35px;
margin-left: 50px;
} }
button { button {
@ -70,6 +71,7 @@ button {
#dur1 { #dur1 {
margin-top: 18px; margin-top: 18px;
} }
.audio-button { .audio-button {
background: transparent; background: transparent;
color:inherit; color:inherit;
@ -152,7 +154,7 @@ a {
#box1 { #box1 {
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-left : 10px; margin-left : 58px;
margin-top: 5px; margin-top: 5px;
display: inline-block; display: inline-block;
color: #d81159; color: #d81159;
@ -297,19 +299,7 @@ h2 {
/* circles */ /* circles */
#first_circle {
width: 100%;
height: 100%;
}
#second_circle {
width: 100%;
height: 100%;
}
@media all and (max-width: 350px) {
}
.draggable { .draggable {
position: absolute; position: absolute;
cursor: move; cursor: move;
@ -466,8 +456,6 @@ color: #d81159;
left: 20%; left: 20%;
} }
/*d3 map*/ /*d3 map*/
.link { .link {
stroke: #c46666; stroke: #c46666;
@ -487,3 +475,30 @@ color: #d81159;
display: inline; display: inline;
/* box-shadow: 5px 0 0px 0px #bedbbb, -5px 0 0px 0px #bedbbb; */ /* 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;
}
}
@media (max-width: 550px) {
.map_legend p {
font-size: 0.5em;
}
}