From fc4987780f15b76c1682c6e2a77dfc59fe2998ac Mon Sep 17 00:00:00 2001
From: alicestrt <alice.strt@gmail.com>
Date: Mon, 1 Mar 2021 14:52:04 +0100
Subject: [PATCH] changed background, colophon style

---
 index.html           | 10 ++++++----
 static/css/style.css | 24 +++++++++++++++---------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 66a787a..cde1544 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,8 @@
 <div class="container-fluid p-0">
 <div class="bg">
   <div class="row">
-    <div class="col-md-3"><div id="title_website">Wells of Knowledge</div></div>
-      <div class="col-md-3 offset-md-6" id="menu">
+    <div class="col-md-4"><div id="title_website">Wells of Knowledge</div></div>
+      <div class="col-md-3 offset-md-5" id="menu">
     <span id="about">
      <a href="#" >about</a> |
    </span>
@@ -70,7 +70,7 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
     <!-- </div> -->
     <!-- map area -->
   <div class="row" id="noflex">
-    <div class="col-md-10 offset-md-1">
+    <div class="col-md-12">
     <div class="map_area">
       <!-- <p>Related media</p> -->
       <!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> -->
@@ -135,7 +135,9 @@ Through the map, we give shape to a common context in Turkish culture. The map a
   <img class="logo" src="static/images/pzi_logo.png"></img></div>
       </div>
 
-      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3><p>
+      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3>
+        <p>This website is best displayed on a desktop, using the latest available Firefox version.</p>
+        <p>
         The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary.</p> <p>Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.</p>
         <p>When clickling once on one of the names, various kinds of media appear in connection to that name. The colors represent different categories (Folklore literature, Islamic Mysticism, etc).</p>
         <p>  When double clicking, a name is isolated and displayed alongside its closest connections. </p><p>All the elements of the map can be rearranged and moved. </p></div>
diff --git a/static/css/style.css b/static/css/style.css
index 0949731..e843968 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -23,7 +23,7 @@ body {
   }
 .bg::before {
   content: "";
-  background-image: url("/static/images/poster1.png");
+  background-image: url("/static/images/crop_above.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -33,7 +33,7 @@ body {
   bottom: 0px;
   left: 0px;
   opacity: 0.4;
-  filter: blur(20px);
+  filter: blur(10px);
   opacity:
   }
 /*Main areas*/
@@ -41,7 +41,7 @@ body {
   font-family:'Walter Turncoat', cursive;
   font-style: italic;
   color: #d81159;
-  font-size: 20px;
+  font-size: 30px;
   margin-left: 50px;
   margin-top: 15px;
 }
@@ -100,7 +100,7 @@ cursor: pointer;
 
 .group2 {
 	fill: #ffbc42;
-  font-size: 20px;
+  font-size: 16px;
   font-family: 'Vesper Libre', serif;
   z-index: 2;
 }
@@ -109,7 +109,7 @@ cursor: pointer;
 
 .group1 {
   fill: #d81159;
-  font-size: 20px;
+  font-size: 16px;
   font-family: 'Vesper Libre', serif;
   z-index: 1;
 }
@@ -117,7 +117,7 @@ cursor: pointer;
 .group4 {
   fill: #73d2de;
   font-family: 'Vesper Libre', serif;
-  font-size: 20px;
+  font-size: 16px;
 z-index: 4;
 
 }
@@ -125,7 +125,7 @@ z-index: 4;
 .group3 {
   fill: #218380;
   font-family: 'Vesper Libre', serif;
-  font-size: 20px;
+  font-size: 16px;
   z-index: 3;
 }
 
@@ -165,6 +165,8 @@ a {
   margin-top: 5px;
   display: inline-block;
   color: #d81159;
+  margin-bottom: 20px;
+
 }
 
 #box2 {
@@ -216,7 +218,7 @@ a {
   padding-left: 5px;
   font-family: 'Vesper Libre', serif;
   display: inline;
-  font-size: 0.8em;
+  font-size: 0.9em;
 }
 
 
@@ -236,6 +238,7 @@ 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;
@@ -452,12 +455,15 @@ color: #d81159;
   word-wrap: break-word;
   background-size: 100%;
   width: 50%;
-  height: auto;
+  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;
 
 }