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="container-fluid p-0">
<div class="bg"> <div class="bg">
<div class="row"> <div class="row">
<div class="col-md-3"><div id="title_website">Wells of Knowledge</div></div> <div class="col-md-4"><div id="title_website">Wells of Knowledge</div></div>
<div class="col-md-3 offset-md-6" id="menu"> <div class="col-md-3 offset-md-5" id="menu">
<span id="about"> <span id="about">
<a href="#" >about</a> | <a href="#" >about</a> |
</span> </span>
@ -70,7 +70,7 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
<!-- </div> --> <!-- </div> -->
<!-- map area --> <!-- map area -->
<div class="row" id="noflex"> <div class="row" id="noflex">
<div class="col-md-10 offset-md-1"> <div class="col-md-12">
<div class="map_area"> <div class="map_area">
<!-- <p>Related media</p> --> <!-- <p>Related media</p> -->
<!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> --> <!-- <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> <img class="logo" src="static/images/pzi_logo.png"></img></div>
</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> 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 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> <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 { .bg::before {
content: ""; content: "";
background-image: url("/static/images/poster1.png"); background-image: url("/static/images/crop_above.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -33,7 +33,7 @@ body {
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
opacity: 0.4; opacity: 0.4;
filter: blur(20px); filter: blur(10px);
opacity: opacity:
} }
/*Main areas*/ /*Main areas*/
@ -41,7 +41,7 @@ body {
font-family:'Walter Turncoat', cursive; font-family:'Walter Turncoat', cursive;
font-style: italic; font-style: italic;
color: #d81159; color: #d81159;
font-size: 20px; font-size: 30px;
margin-left: 50px; margin-left: 50px;
margin-top: 15px; margin-top: 15px;
} }
@ -100,7 +100,7 @@ cursor: pointer;
.group2 { .group2 {
fill: #ffbc42; fill: #ffbc42;
font-size: 20px; font-size: 16px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
z-index: 2; z-index: 2;
} }
@ -109,7 +109,7 @@ cursor: pointer;
.group1 { .group1 {
fill: #d81159; fill: #d81159;
font-size: 20px; font-size: 16px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
z-index: 1; z-index: 1;
} }
@ -117,7 +117,7 @@ cursor: pointer;
.group4 { .group4 {
fill: #73d2de; fill: #73d2de;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 20px; font-size: 16px;
z-index: 4; z-index: 4;
} }
@ -125,7 +125,7 @@ z-index: 4;
.group3 { .group3 {
fill: #218380; fill: #218380;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 20px; font-size: 16px;
z-index: 3; z-index: 3;
} }
@ -165,6 +165,8 @@ a {
margin-top: 5px; margin-top: 5px;
display: inline-block; display: inline-block;
color: #d81159; color: #d81159;
margin-bottom: 20px;
} }
#box2 { #box2 {
@ -216,7 +218,7 @@ a {
padding-left: 5px; padding-left: 5px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
display: inline; display: inline;
font-size: 0.8em; font-size: 0.9em;
} }
@ -236,6 +238,7 @@ margin-right: 10px;
margin-top: 20px; margin-top: 20px;
line-height: 1.6em; line-height: 1.6em;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 16px;
scrollbar-color: #d87fa0 #dbf6f9; scrollbar-color: #d87fa0 #dbf6f9;
position: relative; position: relative;
z-index:4; z-index:4;
@ -452,12 +455,15 @@ color: #d81159;
word-wrap: break-word; word-wrap: break-word;
background-size: 100%; background-size: 100%;
width: 50%; width: 50%;
height: auto; max-height: 500px;
border: 1px solid black; border: 1px solid black;
padding: 2%; padding: 2%;
z-index: 5; z-index: 5;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 16px; font-size: 16px;
overflow-y: scroll;
scrollbar-color: #d87fa0 #dbf6f9;
scroll-behavior: smooth;
} }