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

changed background, colophon style

Browse Source
This commit is contained in:
alicestrt 2021-03-01 14:52:04 +01:00
parent 62c6bc0a8f
commit fc4987780f
2 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -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>

24
static/css/style.css
View File

@ -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;
}