fixed errors

3 years ago · d9ca7073e7
2 changed files with 48 additions and 42 deletions
--- a/index.html
+++ b/index.html
@ -19,16 +19,27 @@
 <body>
 <div class="container-fluid p-0">
 <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">
  <!-- background audio -->
  <div class="col-md-9" style="position: static;">
    <div class="row">
-      <div class="col-md-12">

-<div class="row">
-<div class="col-md-1">
-<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button></div>
-  <div class="col-md-5">
+  <div class="col-md-5 offset-md-1 col-sm-6 offset-sm-3 col-xs-6 offset-xs-3">
+    <button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
 <audio id="audioBG"
 preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
 <source src="static/audio/output.webm" type="audio/mpeg">
@ -47,28 +58,8 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
  </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>
    <!-- new row should start here -->
    <!-- pop up thesis -->
--- a/static/css/style.css
+++ b/static/css/style.css
@ -4,7 +4,7 @@
@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;
+  border: 1px black solid;
 }

 body {
@ -61,7 +61,8 @@ body {

 /* Audio in background */
 .audioBG {
-  padding-top: 10px;
+  margin-top: 35px;
+  margin-left: 50px;
  }

 button {
@ -70,6 +71,7 @@ button {
 #dur1 {
  margin-top: 18px;
 }
+
 .audio-button {
  background: transparent;
  color:inherit;
@ -152,7 +154,7 @@ a {
 #box1 {
  height: 15px;
  width: 15px;
-  margin-left : 10px;
+  margin-left : 58px;
  margin-top: 5px;
  display: inline-block;
  color: #d81159;
@ -297,19 +299,7 @@ h2 {

 /* circles */

-#first_circle {
-  width: 100%;
-  height: 100%;
-}

-#second_circle {
-  width: 100%;
-  height: 100%;
-}
-
-@media all and (max-width: 350px) {
-
-}
 .draggable {
  position: absolute;
  cursor: move;
@ -466,8 +456,6 @@ color: #d81159;
    left: 20%;
 }

-
-
 /*d3 map*/
 .link {
  stroke: #c46666;
@ -487,3 +475,30 @@ color: #d81159;
  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;
+}
+}
+
+@media (max-width: 550px) {
+
+  .map_legend p {
+    font-size: 0.5em;
+  }
+
+}