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

styled the website for presentation

master
nglk 4 years ago
parent
210f9ee54e
commit
8df01ccf77
4 changed files with 84 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      static/css/style.css
  2. 28
      static/js/d3_map.js
  3. 6
      templates/hello.html
  4. 36
      templates/thesis.html

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

28
static/js/d3_map.js
View File

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

6
templates/hello.html
View File

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Hello{% endblock %} {% block title %}VVVW{% endblock %}
{% block body %} {% block body %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="bg"> <div class="bg">
@ -24,11 +24,11 @@
<div class="col-md-10"> <div class="col-md-10">
<div class="media_area"> <div class="media_area">
<!-- <p>Related media</p> --> <!-- <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"> <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag. Your browser does not support the audio tag.
</audio></div> </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"> <source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag. Your browser does not support the audio tag.
</audio></div> </audio></div>

36
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> <h2>Merve Kılıçer</h2>
<p><i>“If history writing does not emancipate, it must be serving tyranny.” <p><i>“If history writing does not emancipate, it must be serving tyranny.”
Cemal Kafadar, ‘Kendine ait bir Roma’, pg.1</i><br></p> 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- 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 pression were the instinctive push points but my real question is: how did the spirit of Gezi Park
come to life? come to life?
<p id="textdadaloglu">
The park brought together people from different economic backgrounds, ethnicities and beliefs, 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, 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 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 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’ the stories we were raised with and how did they shape our perception of the world and ‘other’
people we share it with? people we share it with?
</p>
Learning and unlearning the tenets of our upbringing is a process of growth. At the park, we wit- 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 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 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 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- and beliefs went through significant changes over time, this method of carrying knowledge re-
mained part of everyday life. mained part of everyday life.
Kalktı Göç Eyledi Avşar Elleri,
Ağır Ağır Giden Eller Bizimdir. <p id="textdadaloglu">
Arap Atlar Yakın Eder ırağı, Kalktı Göç Eyledi Avşar Elleri,<br>
Yüce Dağdan Aşan Yollar Bizimdir. Ağır Ağır Giden Eller Bizimdir.<br>
/ Arap Atlar Yakın Eder ırağı,<br>
Rised and migrated the Avşar tribes, Yüce Dağdan Aşan Yollar Bizimdir.<br>
The folk slowly moving is ours. /<br>
Arabic horses render the distances close, Rised and migrated the Avşar tribes,<br>
The paths overrunning the mighty mountains are ours. The folk slowly moving is ours.<br>
Dadaloğlu’s (18th cc) epical folk poem was chanted by Ruhi Su in 1960’s 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 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 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 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 Dayanılmaz çarh-ı felek zatına
Bizden selâm söylen ev külfetineÇıkıp ele karşı ağlamasınlar 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 They call me Pir Sultan in Banaz
Do not suppose I’m the sinister one Do not suppose I’m the sinister one
Pasha should advice his servants 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 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- Village Institutes 7 (1942-1947) where he encountered Ruhi Su and many other musicians and intel-
lectuals from Istanbul. lectuals from Istanbul.
<p id="textasikA">
The cultural production of those years can serve as a recording of the political climate around the 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, 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- 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 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 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- 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- 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 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 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- 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. 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 Şenlik dağıldı bir acı yel kaldı bahçede yalnız
O mahur beste çalar Müjgan’la ben ağlaşırız O mahur beste çalar Müjgan’la ben ağlaşırız
Gitti dostlar şölen bitti ne eski heyecan ne hız Gitti dostlar şölen bitti ne eski heyecan ne hız

Write Preview
Loading…
Cancel
Save