style changes for presentation

wells/index.html

@@ -57,22 +57,22 @@
         <img src="static/images/poem.png">
       </div>
 
-      <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="150" height="150" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="300" height="150" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
-      <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="150" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="300" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
-      <iframe width="150" height="150" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      <iframe width="300" height="150" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
 
-      <div class="draggable" id="showmuharrem"><div class='text_audio'></div><iframe width="150" height="150" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="showmuharrem"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
-      <div class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="150" height="150" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
-      <div class="draggable" id="showneyzen"><div class='text_audio'></div><iframe width="150" height="150" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="showneyzen"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
-      <div class="draggable" id="showruhisu"><div class='text_audio'></div><iframe width="150" height="150" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="showruhisu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
-      <div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="150" height="150" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
       <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
       <script src="static/js/d3_map.js"></script>
     </div>

wells/static/css/style.css

@@ -182,7 +182,6 @@ stroke-dasharray:6px;
   font-size: .8em;
   padding-left: 2em;
   position: relative;
-  padding-top: 2em;
 }
 
 /* text area */
@@ -191,7 +190,7 @@ stroke-dasharray:6px;
 display: none;
 overflow-y: scroll;
 max-height: 300px;
-max-width: 30%;
+max-width: 40%;
 scroll-behavior: smooth;
 font-size: .6em;
 border: 1px black solid;
@@ -260,12 +259,16 @@ h2 {
 @media all and (max-width: 350px) {
 
 }
-draggable {
+.draggable {
   position: absolute;
   /* cursor: all-scroll; */
-
 }
 
+/* .scaleable-wrapper {
+  resize: both;
+  overflow: auto;
+  position:relative;
+} */
 
 
 

wells/static/js/d3_map.js

@@ -82,7 +82,7 @@ function connectedNodes() {
 
   node.append("image")
       // .attr("xlink:href", "/static/images/squig2.png")
-      .attr("xlink:href", "/static/images/circle.png")
+      .attr("xlink:href", "/static/images/circleB.png")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
@@ -191,7 +191,6 @@ function popup(name,time) {
 
   });
 
-
 });
 
 // function stop(name) {