From ecb1c528d695f314687bdcf7b92f59d2cc291883 Mon Sep 17 00:00:00 2001
From: nglk <diakaggel@gmail.com>
Date: Thu, 12 Nov 2020 14:00:10 +0100
Subject: [PATCH] styled a bit more the draggable objects

---
 wells/index.html           | 16 ++++++++--------
 wells/static/css/style.css | 15 +++++++++++----
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/wells/index.html b/wells/index.html
index 87b857e..b3cdc3f 100644
--- a/wells/index.html
+++ b/wells/index.html
@@ -52,22 +52,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="560" height="280" 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="400" height="200" 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="560" height="280" 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="400" height="200" 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="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      <iframe width="400" height="200" 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="560" height="280" 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="400" height="200" 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="560" height="280" 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="400" height="200" 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="560" height="280" 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="400" height="200" 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="560" height="280" 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="400" height="200" 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="560" height="280" 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="400" height="200" 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>
diff --git a/wells/static/css/style.css b/wells/static/css/style.css
index 07b24f1..9f13789 100644
--- a/wells/static/css/style.css
+++ b/wells/static/css/style.css
@@ -9,6 +9,7 @@
 
 body {
   overflow: scroll;
+  font-size: .8em;
 }
 .container-fluid {
   overflow: hidden;
@@ -188,7 +189,7 @@ stroke-dasharray:6px;
 .thesis {
 display: none;
 overflow-y: scroll;
-max-height: 500px;
+max-height: 300px;
 max-width: 30%;
 scroll-behavior: smooth;
 font-size: .6em;
@@ -202,7 +203,7 @@ scrollbar-color: #cdcec9 #bedbbb;
 position: fixed;
 z-index:4;
 background: white;
-left: 40%;
+left: 60%;
 top: 2%;
 }
 
@@ -260,13 +261,15 @@ h2 {
 }
 draggable {
   position: absolute;
+  /* cursor: all-scroll; */
+
 }
 
 
 
 
 .draggable iframe {
-  padding: 20px;
+  padding: 1em;
 }
 
 #transcriptWrapper {
@@ -289,15 +292,18 @@ draggable {
 #showdadaloglu,#showasikA,#showasikV,#showmuharrem,#shownazim,#showneyzen,#showruhisu,#showasu {
   display: none;
   left: 20%;
-  width: 50% !important;
+  /* width: 10% !important; */
   position: fixed;
   z-index: 5;
+  border: 1px black solid;
 }
 
 .text_audio{
   margin-bottom: 1.2em;
   margin-top: 2em;
   font-family:'Vesper Libre', serif;
+  font-size: .8em;
+  padding-left: 1em;
 }
 
 /* Style the close button */
@@ -305,6 +311,7 @@ draggable {
   float: right;
   cursor: pointer;
   font-size: 100%;
+  color: red;
 }
 
 /*d3 map*/