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

styled the website for presentation

Browse Source
This commit is contained in:
nglk 2020-10-19 12:51:29 +02:00
parent 210f9ee54e
commit 8df01ccf77
4 changed files with 84 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
static/css/style.css
View File

@ -2,6 +2,7 @@
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Source+Sans+Pro:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asul&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
* {
border: 0px black solid;
@ -50,115 +51,115 @@
/* Node styling */
#ahmed text {
fill: #703022;
fill: #226270 ;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#mevlana text {
fill: #703022;
fill: #226270 ;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#haci text {
fill: #703022;
fill: #226270 ;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#dadaloglu text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#dedekorkut text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#asikN text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#asikA text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#asikM text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#karacaoglan text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#asikV text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#neset text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#muharrem text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#aliekber text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#dedeoglu text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#pir text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#yunus text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#kulN text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#kaygusuz text {
fill: #C85E40;
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
svg{ width:100%; height:200%; }
svg{ width:100%; height:100%; margin:0 auto;}
path{
fill: transparent;
stroke: #000;
@ -185,15 +186,19 @@ stroke-dasharray:6px;
/* text area */
.thesis {
overflow-y: scroll;
max-height:400px;
max-height:600px;
scroll-behavior: smooth;
font-size: 1em;
border: 1px black solid;
padding: 0.5em;
padding: 2em;
margin-right: 10px;
margin-top: 10px;
line-height: 1.6em;
font-family: 'Vesper Libre', serif;
scrollbar-color: #cdcec9 #aeb10a;
}
h1 {
font-size: 1.4em !important;
}
@ -207,16 +212,19 @@ h2 {
.play-stop {
position: absolute;
bottom: 1.2em;
bottom: 1.6em;
z-index: 1;
margin-left: calc( 50% - 1.8em );
overflow: hidden;
font-size: 20px;
font-size: 1.2em;
font-weight: bold;
font-family:'Walter Turncoat', cursive;
color: #AEB10A;
cursor: pointer;
}
.play-stop:hover {
color: #AEB10A;
color: #cdcec9;
}
/* circles */
@ -262,10 +270,16 @@ draggable {
/* pop up */
#showdadaloglu,#showmuharrem {
#showdadaloglu,#showasikA {
display: none;
left: 20%;
width: 23% !important;
width: 50% !important;
}
.text_audio{
margin-bottom: 1.2em;
margin-top: 2em;
font-family:'Vesper Libre', serif;
}
@ -280,5 +294,5 @@ draggable {
}
.active {
background-color: #80ffd4;
background-color: RGBA(174, 177, 10, 0.6);
}

28
static/js/d3_map.js vendored
View File

@ -1,16 +1,18 @@
var width = 500,
height = 400
height = 380
var svg = d3.select(".map_area").append("svg")
.attr("width", width)
.attr("height", height);
.attr("height", height)
.attr("viewBox", `${-width/2.5} ${-height/2.5} ${width*2.5} ${height*2.5}`);
var force = d3.layout.force()
.gravity(0.01)
.distance(100)
.distance(300)
.charge(-50)
.size([width, height]);
d3.json("/static/js/group1.json", function(error, json) {
if (error) throw error;
@ -27,7 +29,8 @@ d3.json("/static/js/group1.json", function(error, json) {
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node "+function(d){return d.class})
.attr("class", "node ")
// .node()classList.add(function(d){return d.group});
.attr("id", function(d){return d.id})
@ -46,6 +49,11 @@ d3.json("/static/js/group1.json", function(error, json) {
.attr("width", 16)
.attr("height", 16);
node.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
}});
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
@ -106,9 +114,9 @@ d3.json("/static/js/group1.json", function(error, json) {
$("#muharrem").click(function(){$("#showmuharrem").fadeIn()
$("#asikA").click(function(){$("#showasikA").fadeIn()
console.log("around")
var muh = document.getElementById("textmuharrem");
var muh = document.getElementById("textasikA");
muh.className += " active";
muh.scrollIntoView();
var audio2 = document.getElementById("audio-1");
@ -124,10 +132,10 @@ d3.json("/static/js/group1.json", function(error, json) {
var textdada = document.getElementById("textdadaloglu");
textdada.classList.remove("active");
};
if (!$(e.target).parents().andSelf().is('#muharrem')) {
$("#showmuharrem").fadeOut();
$("audiomuharrem").trigger('pause');
var textmuh = document.getElementById("textmuharrem");
if (!$(e.target).parents().andSelf().is('#asikA')) {
$("#showasikA").fadeOut();
$("audioasikA").trigger('pause');
var textmuh = document.getElementById("textasikA");
textmuh.classList.remove("active");
};
});

6
templates/hello.html
View File

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block title %}Hello{% endblock %}
{% block title %}VVVW{% endblock %}
{% block body %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="bg">
@ -24,11 +24,11 @@
<div class="col-md-10">
<div class="media_area">
<!-- <p>Related media</p> -->
<div id="showdadaloglu">Audio for Dadaloglu<audio id="audiodadaloglu" controls>
<div id="showdadaloglu"><div class='text_audio'>Audio for Dadaloglu</div><audio id="audiodadaloglu" controls>
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></div>
<div id="showmuharrem">Audio for Muharrem Ertas<audio id="audiomuharrem" controls>
<div id="showasikA"><div class='text_audio'>Audio for Aşık Ali İzzet</div><audio id="audioasikA" controls>
<source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></div>

38
templates/thesis.html
View File

@ -1,4 +1,4 @@
<h1>Wells of Knowledge: Streams of poetry, music and resistance in Turkey</h1>
<h1>Wells of Knowledge: <p>Streams of poetry, music and resistance in Turkey</h1>
<h2>Merve Kılıçer</h2>
<p><i>“If history writing does not emancipate, it must be serving tyranny.”
Cemal Kafadar, ‘Kendine ait bir Roma’, pg.1</i><br></p>
@ -40,7 +40,7 @@ After 7 years, I’m still trying to figure out how and why we managed to come t
tecting a green area that belonged to our home, protecting friends and the increasing level of op-
pression were the instinctive push points but my real question is: how did the spirit of Gezi Park
come to life?
<p id="textdadaloglu">
The park brought together people from different economic backgrounds, ethnicities and beliefs,
manifesting the idea that when we stand together we are heard. And our voice carried all the tunes,
rhythms and stories of Turkey. To analyze this historic moment, I’ve been listening closely to the
@ -49,7 +49,7 @@ land. I asked myself: Could the accumulation of these voices and words be the fo
of Gezi Spirit? What kind of knowledge do we inherit from the land we feel rooted in? Which are
the stories we were raised with and how did they shape our perception of the world and ‘other’
people we share it with?
</p>
Learning and unlearning the tenets of our upbringing is a process of growth. At the park, we wit-
nessed the clash of all the false and accurate knowledge we were introduced to throughout our
lives. This clash brought us a little closer to the understanding of what is political and how we can
@ -69,16 +69,20 @@ and those of their predecessor. They were storytellers who narrated with poetry,
plays. Such practices are common in many cultures around the world and although the societies
and beliefs went through significant changes over time, this method of carrying knowledge re-
mained part of everyday life.
Kalktı Göç Eyledi Avşar Elleri,
Ağır Ağır Giden Eller Bizimdir.
Arap Atlar Yakın Eder ırağı,
Yüce Dağdan Aşan Yollar Bizimdir.
/
Rised and migrated the Avşar tribes,
The folk slowly moving is ours.
Arabic horses render the distances close,
The paths overrunning the mighty mountains are ours.
Dadaloğlu’s (18th cc) epical folk poem was chanted by Ruhi Su in 1960’s
<p id="textdadaloglu">
Kalktı Göç Eyledi Avşar Elleri,<br>
Ağır Ağır Giden Eller Bizimdir.<br>
Arap Atlar Yakın Eder ırağı,<br>
Yüce Dağdan Aşan Yollar Bizimdir.<br>
/<br>
Rised and migrated the Avşar tribes,<br>
The folk slowly moving is ours.<br>
Arabic horses render the distances close,<br>
The paths overrunning the mighty mountains are ours.<br>
<i>Dadaloğlu’s (18th cc) epical folk poem was chanted by Ruhi Su in 1960’s</i></p>
Islam started spreading through similar traditions of folkloric chanting and poetry migrating from
regions today known as Iran (Horasan) and Afghanistan. In time, many nomadic tribes of Central
Asia started abandoning their polytheistic beliefs, like the shamanic belief Tengrism 2 , and started
@ -116,7 +120,6 @@ Hüseyin Gazi Sultan binsin atına
Dayanılmaz çarh-ı felek zatına
Bizden selâm söylen ev külfetineÇıkıp ele karşı ağlamasınlar
/
<p id="textmuharrem">
They call me Pir Sultan in Banaz
Do not suppose I’m the sinister one
Pasha should advice his servants
@ -166,12 +169,14 @@ roots to be played on the radio. Even though in the 1930’s he was titled as th
state, his Alevi roots, were still not recognized. In the 1940’s he was teaching to play cura at several
Village Institutes 7 (1942-1947) where he encountered Ruhi Su and many other musicians and intel-
lectuals from Istanbul.
<p id="textasikA">
The cultural production of those years can serve as a recording of the political climate around the
country. Starting from the 1950’s the western educated musicians, like Ruhi Su, Tülay German,
Sümeyra Çakır or Fikret Kızılok, in order to stay connected to their roots, started combining folk-
loric tunes and themes with popular western instruments and methods. While Tülay German
adopted folklore songs into jazz tunes and collaborated with Ashiks that migrated to the city, Fikret
Kızılok went to study with Ashik Veysel in Anatolia and made records with the songs of his mentor.
Kızılok went to study with Ashik Veysel in Anatolia and made records with the songs of his mentor.</p>
This new approach was the result of the emigration of Anatolian folk (especially the minorities) to-
wards big cities to work in factories or study at the universities and technical schools. The universi-
ties became the meeting point for western educated city youth and the Anatolian youth who were
@ -181,6 +186,7 @@ ence and used their traditional cultural production to propagate ideas of equali
were showing resistance to the economic sanctions of the U.S. who had been providing financial
support to Turkey and to do so, they were using the folkloric language which created a bridge be-
tween intellectuals, factory workers (in Turkey and in Europe) and farmers of the rural areas.
Şenlik dağıldı bir acı yel kaldı bahçede yalnız
O mahur beste çalar Müjgan’la ben ağlaşırız
Gitti dostlar şölen bitti ne eski heyecan ne hız
@ -279,4 +285,4 @@ Links
-https://blog.iae.org.tr/sergiler/taksim-gezi-parkinin-tarihcesi-http://www.rusen.org/konargocer-turkler-kim/
-https://www.alevibektasi.eu/
-http://www.musikidergisi.net/
-http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu
-http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu