From 10307c3a4229142baa52845efa31dee43e901a02 Mon Sep 17 00:00:00 2001 From: Angeliki Date: Thu, 6 Jun 2019 23:17:13 +0200 Subject: [PATCH] added information --- amplification.php | 257 +++++-- diary.php | 100 +-- index.php | 39 +- player.php | 181 ++--- podcast1.php | 3 +- podcast2.php | 3 +- podcast3.php | 3 +- podcast4.php | 3 +- styles/smallscreen.css | 663 +++++++++++++++++ .../{stylesheet.css => widescreen (copy).css} | 15 +- styles/widescreen.css | 676 ++++++++++++++++++ thesis-angeliki.php | 135 ++-- 12 files changed, 1783 insertions(+), 295 deletions(-) create mode 100644 styles/smallscreen.css rename styles/{stylesheet.css => widescreen (copy).css} (98%) create mode 100644 styles/widescreen.css diff --git a/amplification.php b/amplification.php index 36bf208..375ecea 100644 --- a/amplification.php +++ b/amplification.php @@ -3,7 +3,8 @@ - + + @@ -22,35 +23,32 @@ Filter by: - -
- -
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -70,6 +68,8 @@ Filter by:
+
+ @@ -77,102 +77,223 @@ Filter by: -
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+

Workshop 1

-
  • Actions:
  • +
  • Actions:
    • +
  • Equipment:
    • + -
  • Outcome: Score of vowels
  • -
  • Date: 28/3/2019
  • -
  • Location: Leeszaal
  • +
  • Outcome:
    • + +
  • Date: 28/3/2019
    • +
  • Location: Leeszaal, Rotterdam

    • Workshop 2

    -
  • Actions:
  • +
  • Actions:
    • +
  • Equipment:
    • + +
  • Outcome:
    • + -
  • Outcome: Score of vowels
  • -
  • Date: 29/3/2019
  • -
  • Location: Fine Arts
  • +
  • Date: 29/3/2019
    • +
  • Location: Fine Arts/KDH, Rotterdam

    • Workshop 3

    -
  • Actions:
  • +
  • Actions:
    • +
  • Equipment:
    • + +
  • Outcome:
    • + -
  • Outcome: Score of vowels
  • -
  • Date: 08/5/2019
  • -
  • Location: Leeszaal
  • +
  • Date: 8/5/2019
    • +
  • Location: Leeszaal, Rotterdam

    • Workshop 4

    -
  • Actions:
  • +
  • Actions:
    • -
  • Outcome: Score of vowels
  • -
  • Date: 23/5/2019
  • -
  • Location: Leeszaal
  • +
  • Equipment:
    • + +
  • Outcome:
    • + +
  • Date: 23/5/2019
    • +
  • Location: outside of Leeszaal, Rotterdam

    • Workshop 5

    -
  • Actions:
  • +
  • Actions:
    • -
  • Outcome: Score of vowels
  • -
  • Date: 30/5/2019
  • -
  • Location: Leeszaal
  • +
  • Equipment:
    • + +
  • Outcome:
    • + +
  • Date: 30/5/2019
    • +
  • Location: Leeszaal, Rotterdam
    • +
  • Other: Part of Women@ArtA series of workshops dedicated to 'wereldvrouwen', a group of women around the world. They meet every Wednesday at Leeszaal
    • + -
    +

    Amplification of female voices

    @@ -186,7 +307,7 @@ Filter by:
    -

    Player

    +

    Player

    (audio archive)
    @@ -231,14 +352,14 @@ groups() function piles(){ - var pileM_position=[1800,900] + var pileM_position=[1300,900] $(".pileM").each(function(i){ $(this).css({"top":i*60+pileM_position[1],"left":i*20+pileM_position[0]}) }) var pile0_position=[30,2500] $(".pile0").each(function(i){ - $(this).css({"top":pile0_position[1],"left":i*300+pile0_position[0]}) + $(this).css({"top":pile0_position[1],"left":i*80+pile0_position[0]}) }) var pile1_position=[30,300] @@ -251,18 +372,18 @@ function piles(){ $(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]}) }) - var pile3_position=[900,850] + var pile3_position=[700,750] $(".pile3").each(function(i){ $(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]}) }) - var pile4_position=[1600,1600] + var pile4_position=[1200,1600] $(".pile4").each(function(i){ $(this).css({"top":i*distance+pile4_position[1],"left":i*distance+pile4_position[0]}) }) - var pile5_position=[1000,100] + var pile5_position=[800,100] $(".pile5").each(function(i){ $(this).css({"top":i*distance+pile5_position[1],"left":i*distance+pile5_position[0]}) }) @@ -277,7 +398,7 @@ function piles(){ function groups(){ - var group_vowels_position=[800,100] + var group_vowels_position=[700,100] $(".group_vowels").each(function(i){ $(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]}) }) @@ -292,12 +413,12 @@ function groups(){ $(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]}) }) - var group_metadata_position=[1000,1000] + var group_metadata_position=[800,1000] $(".group_metadata").each(function(i){ $(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]}) }) - var group_menu_position=[1800,900] + var group_menu_position=[1300,900] $(".group_menu").each(function(i){ $(this).css({"top":i*60+group_menu_position[1],"left":i*20+group_menu_position[0]}) }) diff --git a/diary.php b/diary.php index e14b74f..40ae11a 100644 --- a/diary.php +++ b/diary.php @@ -3,68 +3,33 @@ - + + Diary of West Rotterdam -

    Diary of West Rotterdam

    +

    - -
    -

    Amplification of female voices

    -
    - -
    -

    Diary of West Rotterdam

    -
    - -
    -
    -
    -

    Player

    -
    -
    -

    About

    -
    - -
    -

    Podcast4

    -
    -
    -

    Podcast1

    -
    -
    -

    Podcast2

    -
    -
    -

    Podcast3

    -
    - - -
    -

    "Let' s Talk About Unspeakable Things"

    -
    - - +
    +
    -
    -
    +
    - annotated_track + annotated_track
    22-1-2019
    @@ -72,26 +37,26 @@
    -
    +
    - annotated_track + annotated_track
    23-1-2019
    -
    +
    - annotated_track + annotated_track
    28-1-2019
    @@ -99,7 +64,7 @@
    -
    +
    @@ -111,13 +76,52 @@

    Tracking private places. Relations of street names, sounds of that time and wifi names around

    -
    +
    5-2-2019
    + +
    +

    Amplification of female voices

    +
    + +
    +

    Diary of West Rotterdam

    +
    + +
    +
    +
    +

    Player

    +
    +
    +

    About

    +
    + +
    +

    Podcast4

    +
    + +
    +

    Podcast1

    +
    +
    +

    Podcast2

    +
    +
    +

    Podcast3

    +
    + + +
    +

    "Let' s Talk About Unspeakable Things"

    +
    + + + diff --git a/index.php b/index.php index de22de2..54cc2ef 100644 --- a/index.php +++ b/index.php @@ -4,7 +4,8 @@ - + + @@ -21,7 +22,7 @@
    -

    Let's amplify unspeakable things

    overlayered utterances

    +

    Let's amplify unspeakable things

    @@ -30,44 +31,44 @@ -
    -
    this is how female/high-pitched voices have been described since acient times as Anne Carson observes
    +
    +
    this is how female/high-pitched voices have been described since acient times as Anne Carson observes
    -
    -

    Podcast1

    +
    +

    Podcast1

    -
    -

    Amplification of female voices

    +
    +

    Amplification of female voices

    -
    -

    Podcast2

    +
    +

    Podcast2

    -
    -

    Podcast3

    +
    +

    Podcast3

    -
    -

    Podcast4

    +
    +

    Podcast4

    -
    -

    Diary of West Rotterdam

    +
    +

    Diary of West Rotterdam

    @@ -75,7 +76,7 @@ -
    +

    Player

    @@ -83,14 +84,14 @@
    -

    About

    +

    About

    -
    +

    Colophon

  • This work has been produced in the context of the graduation research of Angeliki Diakrousi from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.
  • XPUB is a two year Master of Arts in Fine Art and Design that focuses on the intents, means and consequences of making things public and creating publics in the age of post-digital networks.
    • diff --git a/player.php b/player.php index 5c9464a..759d01d 100644 --- a/player.php +++ b/player.php @@ -1,7 +1,8 @@ - + + @@ -26,7 +27,7 @@ -
    +

    Online Sources

  • Angela Davis @Occupy Wall Street @@ -82,186 +83,186 @@ $("#katalin").click(function(){
    -
    - +
    + - +

    warming up @Leeszaal 28/3

    -
    - +
    + - +

    discussing about voice in public @Leeszaal 30/5

    -
    - +
    + - +

    trascribing+singing vowels @Leeszaal 3/5

    -
    - +
    + - +

    reading extracts @outside Leeszaal 23/5

    -
    - +
    + - +

    singing vowels @outside Leeszaal 28/3

    -
    - +
    + - +

    warming up @outside Leeszaal 23/5

    -
    - +
    + - +

    personal experiences-distorted voice @outside Leeszaal 23/5

    -
    - +
    + - +

    reading extracts @Leeszaal 30/5

    -
    - - +
    + +

    discussing about voice in public @Fine Arts 29/3

    -
    - - +
    + +

    warming up @Leeszaal 8/5

    -
    - - +
    + +

    transcribing vowels @Leeszaal 28/3

    -
    - - +
    + +

    warming up @Leeszaal 30/5

    -
    - - +
    + +

    singing vowels @Fine Arts 29/3

    -
    - - +
    + +

    coffee time @Leeszaal 30/5

    -
    - +
    + - +

    singing vowels-distorted voice @outside Leeszaal 23/5

    -
    - +
    + - +

    transcribing vowels @Fine Arts 29/3

    -
    - +
    + - +

    reading extracts @Fine Arts 29/3

    -
    - +
    + - +

    transcribing vowels @outside Leeszaal 23/5

    -
    - +
    + - +

    statements- distorted voice @Leeszaal 30/5

    -
    - +
    + - +

    discussing about voice in public @Leeszaal 28/3

    -
    - +
    + - +

    singing vowels- distorted voice @Leeszaal 30/5

    -
    - - +
    + +

    singing vowels (high) @Fine Arts 29/3

    -
    - - +
    + +

    reading extracts @Leeszaal 8/5

    -
    - - +
    + +

    warming up @Fine Arts 29/3

    @@ -274,10 +275,10 @@ $("#katalin").click(function(){ -
    +
    - +
    selection of recordings while wandering around Leeszaal
    @@ -285,7 +286,7 @@ $("#katalin").click(function(){
    - +

    Lidia

    @@ -304,7 +305,7 @@ $("#katalin").click(function(){
    - +

    Eugenie

    @@ -327,7 +328,7 @@ $("#katalin").click(function(){
    - +
    @@ -359,7 +360,7 @@ Oh, I hear children in the background crying
    - +
    @@ -367,7 +368,7 @@ Oh, I hear children in the background crying
    - +
    @@ -395,7 +396,7 @@ Oh, I hear children in the background crying
    - +
    @@ -435,14 +436,14 @@ Oh, I hear children in the background crying
    -
    +

    Diary of West Rotterdam

    (first experiments)
    -
    +

    Amplification of female voices

    (workshops) @@ -458,28 +459,28 @@ Oh, I hear children in the background crying
    -
    +

    "Let' s Talk About Unspeakable Things"

    (thesis)
    -
    +

    Podcast4

    -
    +

    Podcast1

    -
    +

    Podcast2

    -
    +

    Podcast3

    -
    +

    Player

    diff --git a/podcast1.php b/podcast1.php index bb1ad81..fa5a953 100644 --- a/podcast1.php +++ b/podcast1.php @@ -3,7 +3,8 @@ - + + Podcast1 diff --git a/podcast2.php b/podcast2.php index d4065cb..2be2802 100644 --- a/podcast2.php +++ b/podcast2.php @@ -3,7 +3,8 @@ - + + Podcast2 diff --git a/podcast3.php b/podcast3.php index ae9bf7f..6ff135e 100644 --- a/podcast3.php +++ b/podcast3.php @@ -3,7 +3,8 @@ - + + Podcast3 diff --git a/podcast4.php b/podcast4.php index fd57e39..65f2f3b 100644 --- a/podcast4.php +++ b/podcast4.php @@ -3,7 +3,8 @@ - + + Podcast4 diff --git a/styles/smallscreen.css b/styles/smallscreen.css new file mode 100644 index 0000000..5447286 --- /dev/null +++ b/styles/smallscreen.css @@ -0,0 +1,663 @@ +@media only screen and (max-width: 600px) { +body { + background: #F6F5F5; + font-family: "Old Standard TT"; + font-size: 0.8rem; + line-height: 1.3; + letter-spacing: 1px; + padding: 20px; + /*transform: scale(1.0);*/ +} + +section { + margin-bottom: 50px; + margin-top: 20px; +} + +a { + /*font-weight: normal;*/ + text-decoration: none; + color: #A19696; +} + +.active { + color: red; + font-size: 30px ; +} + +.active-draggable{ + width: 800px !important; + font-size: 14px; +} + +a img { + line-height: 0px; +} + +.navbar { + letter-spacing: 4px; + text-align: center; +} + +.navbar a:hover { + background-color: #ddd; + color: black; + font-weight: thin; +} + +.navbar a.active { + font-size: 40px; + font-weight: bold; +} + +h2 { + text-align: center; + letter-spacing: 4px; + font-size: 16px; + margin: 5px; + margin-bottom: 10px; + color: red; + +} + +h3 { + font-size: 10px; +} + +table, th, td { + vertical-align: top; + text-align: left; + border-collapse: separate; + padding:20px; +} + +button { + width: 100px; +} + +.short-description { + margin-left: 40%; + margin-right: 40%; + text-align: center; +} + +.internet { + font-weight: regular; + font-size: 8px; + text-decoration: none; +} + +.list a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + + + +.list { + padding-top: 10px; + padding-bottom: 10px; + padding-left: 0; + list-style: none; + border-top: 1px solid #47505e; +} + +/* .mini-player { + background-size: 100% 100%; + background-image: url(/project/images/player.png); + cursor: pointer; +}*/ +.audio-mini { + width: 50px; +} + +.dropbtn { + font-family: "Old Standard TT"; + font-weight: bold; + font-size: 24px; + color: black; + padding: 16px; + border: none; + cursor: pointer; +} + +.dropbtn:hover, .dropbtn:focus { + background-color: pink; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: white; + min-width: 1900px; + overflow: auto; + z-index: 1; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown a:hover { + background-color: none; +} + +.show { + display: block; +} + +/*style internet sources*/ +.dropbtn2 { + font-family: "Old Standard TT"; + font-weight: regular; + font-size: 14px; + color: black; + padding: 16px; + cursor: pointer; + background-color: rgba(255, 255, 255, 0.9); + border: 1px; + border-style: solid; + border-color: black; +} + +.dropbtn2:hover, .dropbtn2:focus { + background-color: pink; +} + +.dropdown2 { + position: absolute; + display: inline-block; +} + +.dropdown-content2 { + display: none; + position: absolute; + background-color: white; + min-width: 1000px; + overflow: auto; + z-index: 1; + border: 1px; + border-style: solid; + border-color: black; + right: 5px; +} + +.dropdown-content2 a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown2 a:hover { + background-color: none; +} + +.show2 { + display: block; +} + +/*style list of podcasts*/ +.dropbtn3 { + font-family: "Old Standard TT"; + font-weight: regular; + font-size: 14px; + color: black; + padding: 16px; + border: none; + cursor: pointer; +} + +.dropbtn3:hover, .dropbtn3:focus { + background-color: pink; +} + +.dropdown3 { + position: relative; + display: inline-block; +} + +.dropdown-content3 { + display: none; + position: absolute; + background-color: white; + min-width: 1000px; + overflow: auto; + z-index: 1; +} + +.dropdown-content3 a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown3 a:hover { + background-color: none; +} + +.show3 { + display: block; +} + +/* Make the clips use as much space as possible, and +* also show a scrollbar when there are too many clips to show +* in the available space */ +.sound-clips { + flex: 1; + overflow: auto; +} + +/*section, article { +display: block; +}*/ +.clip { + padding-bottom: 1rem; +} + +/*audio { +width: 100%; +display: block; +margin: 1rem auto 0.5rem; +}*/ +.clip p { + display: inline-block; + font-size: 0.7rem; +} + +.clip button { + font-size: 0.7rem; +} + +button.delete { + background: #f00; + padding: 0.5rem 0.75rem; + font-size: 0.5rem; +} + +/* Checkbox hack to control information box display */ +/*label { +font-size: 3rem; +position: absolute; +top: 2px; +right: 3px; +z-index: 5; +cursor: pointer; +}*/ +input[type=checkbox] { + position: absolute; + top: -100px; +} + +/*aside { +position: fixed; +top: 0; +left: 0; +width: 100%; +height: 100%; +transform: translateX(100%); +transition: 0.3s all ease-out; +background-color: #efefef; +padding: 1rem; +} + +aside p { +font-size: 1.2rem; +margin: 0.5rem 0; +} + +aside a { +color: #666; +} +*/ +/* Toggled State of information box */ +input[type=checkbox]:checked ~ aside { + transform: translateX(0); +} + +/* Cursor when clip name is clicked over */ +.clip p { + cursor: pointer; +} + + +/*hover of images and transcriptions style*/ +.tooltip-wrap { + position: relative; +} + +.tooltip-wrap .tooltip-content-down { + display: none; + position: absolute; + z-index: 1; + top: 50px; + /*bottom: 100%;*/ + left: 50px; + /*right: 100%;*/ + padding: 0.2em; + background-color: white; + /*background-color: rgba(255, 255, 255, 0.8);*/ + border: 1px; + border-style: solid; + border-color: black; + text-align: left; + min-width:600px; +} + +.tooltip-wrap .tooltip-content-right { + display: none; + position: absolute; + z-index: 1; + top: 100%; + /*bottom: 100%;*/ + left: 2%; + /*right: 100%;*/ + padding: 0.2em; + background-color: pink; + border: none; + text-align: left; + min-width: 400px; + font-size: 20px; +} + +.tooltip-wrap .tooltip-content-up { + display: none; + position: absolute; + z-index: 1; + /*top: 100%;*/ + bottom: 100%; + left: 2%; + /*right: 100%;*/ + padding: 0.2em; + background-color: rgba(255, 255, 255, 0.93); + border: 1px; + border-style: solid; + border-color: black; + text-align: left; +} + +.tooltip-wrap:hover .tooltip-content-down { + display: block; +} + +.tooltip-wrap:hover .tooltip-content-up { + display: block; +} + +.tooltip-wrap:hover .tooltip-content-right { + display: block; +} + +/*.tooltip-wrap:hover { + background-color: pink; +} +*/ +/*transcript wrapper,text following audio style*/ +#transcriptWrapper { + overflow: hidden; +} + +#transcript > div { + transition: all 0.8s ease; + list-style-type: disc; +} + +.speaking { + font-weight: bold; +} + +#transcriptWrapper3 { + overflow: hidden; +} + +#transcript3 > div { + transition: all 0.8s ease; + list-style-type: disc; +} + +.speaking3 { + font-weight: bold; +} + +/*one image next to the other*/ +.column { + float: left; + width: 30%; +} + +/* Clear floats after image containers */ +.row::after { + content: ""; + clear: both; + display: table; +} + +/* Style the tab */ +.tab { + overflow: hidden; + width: 100px; +} + +/* Style the buttons inside the tab */ +.tab button { + background-color: inherit; + border: 1px solid black; + outline: none; + cursor: pointer; + padding: 12px; + transition: 0.3s; + font-size: 10px; + width: 150px; +} + +/* Change background color of buttons on hover */ +.tab button:hover { + background-color: #ddd; +} + +/* Create an active/current tablink class */ +.tab button.active { + background-color: #ccc; +} + +.tabpink { + overflow: hidden; + width: 100px; +} + +.tabpink button { + background-color: inherit; + border: 1px solid black; + outline: none; + cursor: pointer; + padding: 12px; + transition: 0.3s; + font-size: 10px; + width: 150px; +} + +.tabpink button:hover { + background-color: pink; +} + +/* Create an active/current tablink class */ +.tabpink button.active { + background-color: pink; +} + +/* Style the tab content */ +.tabcontent { + display: none; + padding: 6px 12px; + border: 1px solid black; + float: left; + position: absolute; + width: 800px; + z-index: 1; + background-color: white; + top: 5px; +} + +/* Style the close button */ +.topleft { + float: right; + cursor: pointer; + font-size: 18px; +} + +.container .rowcircle { + margin: 25px; + text-align: center; +} + +.container .rowcircle span { + margin: 0 200px; + /*margin-right: 90px;*/ +} + +.draggable { + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); + background-color: white; + /* border:1px; + border-style:solid; + border-color:black;*/ + cursor: all-scroll; + position: absolute !important; + width: 400px; + display: inline; +/* transform: scale(20);*/ + /*min-height: 100px;*/ +} + +#img { + line-height: 0 !important; +} + +.drag-content { + /*float: right;*/ + font-weight: normal !important; + padding: 5px; + padding-bottom: 20px; + text-align: center; + /*font-size: 20px;*/ +} + +.scaleable-wrapper { + padding: 20px; + padding-bottom: 20px; + resize: both; + position: relative; + /*height: 400px;*/ + /*min-height: 100px; */ +} + +.ui-resizable-se { + width: 10px; + height: 10px; + background: pink; + position: absolute; + bottom: 0; + right: 0; +} + + +#show1, #show2, #show3, #show4 { + display: none; + left: 20%; + width: 550px !important; +} + +#box-title { + border: 1px solid; + background-color: white; + padding: 10px; + position: absolute; +} + +/*for thesis html*/ +#maintext { + margin-left: 400px; + margin-right: 400px; + margin-top: 5px; +} + +.toc_title { + font-weight: 700; + text-align: center; +} + +#toc_container li, #toc_container ul, #toc_container ul li { + list-style: outside none none !important; +} + +li, #angela, #judith, #laurie, #dana, #katalin { + border-bottom: 1px dashed; + list-style: none; + color: #A19696; +} + + + +.box_metadata { + background: white none repeat scroll 0 0; + border: 1px solid #aaa; + display: table; + font-size: 95%; + margin-bottom: 1em; + padding: 20px; + /*width: 1000px;*/ + left: 0px; + position: absolute; +} + +#metadata-thesis { + width:1000px; +} +/*# sourceMappingURL=stylesheet.css.map */ + +.status { + color: red; +} + +/*#button_upload { + background-color: pink; + padding: 10px; + font-size: 20px; +}*/ + +#saved_msg { + color: red; + font-size: 20px; +} + + +/*reshuffle piles*/ +.group_vowels { + position:absolute; +} + +.group_photos { + position:absolute; +} + + +.group_extracts { + position:absolute; +} + +.group_metadata { + position:absolute; +} + +} \ No newline at end of file diff --git a/styles/stylesheet.css b/styles/widescreen (copy).css similarity index 98% rename from styles/stylesheet.css rename to styles/widescreen (copy).css index dc849cc..96efd7d 100644 --- a/styles/stylesheet.css +++ b/styles/widescreen (copy).css @@ -1,3 +1,4 @@ +/*@media only screen and (min-width: 900px) {*/ body { background: #F6F5F5; font-family: "Old Standard TT"; @@ -21,12 +22,12 @@ a { .active { color: red; - font-size: 40px ; + font-size: 95% ; } .active-draggable{ - width: 800px !important; - font-size: 24px; + width: 70% !important; + font-size: 100%; } a img { @@ -52,7 +53,7 @@ a img { h2 { text-align: center; letter-spacing: 4px; - font-size: 26px; + font-size: 100%; margin: 5px; margin-bottom: 10px; color: red; @@ -60,7 +61,7 @@ h2 { } h3 { - font-size: 20px; + font-size: 95%; } table, th, td { @@ -657,4 +658,6 @@ li, #angela, #judith, #laurie, #dana, #katalin { .group_metadata { position:absolute; -} \ No newline at end of file +} + +/*}*/ \ No newline at end of file diff --git a/styles/widescreen.css b/styles/widescreen.css new file mode 100644 index 0000000..03de347 --- /dev/null +++ b/styles/widescreen.css @@ -0,0 +1,676 @@ +/*@media only screen and (min-width: 900px) {*/ +body { + background: #F6F5F5; + font-family: "Old Standard TT"; + font-size: 95%; + line-height: 1.3; + letter-spacing: 1px; + padding: 20px; + /*transform: scale(1.0);*/ +} + +section { + margin-bottom: 50px; + margin-top: 20px; +} + +a { + /*font-weight: normal;*/ + text-decoration: none; + color: #A19696; +} + +.active { + color: red; + font-size: 120% ; +} + +.active-draggable{ + width: 30% !important; + font-size: 110%; +} + +a img { + line-height: 0px; +} + +.navbar { + letter-spacing: 4px; + text-align: center; +} + +.navbar a:hover { + background-color: #ddd; + color: black; + font-weight: thin; +} + +.navbar a.active { + font-size: 50px; + font-weight: bold; +} + +h1 { + font-size: 180%; +} + +h2 { + text-align: center; + letter-spacing: 4px; + font-size: 120%; + margin: 5px; + margin-bottom: 10px; + color: red; + +} + +h3 { + font-size: 95%; + text-align: center; +} + +table, th, td { + vertical-align: top; + text-align: left; + border-collapse: separate; + padding:20px; +} + +button { + width: 100px; +} + +.short-description { + margin-left: 40%; + margin-right: 40%; + text-align: center; +} + +.internet { + font-weight: regular; + font-size: 70%; + text-decoration: none; +} + +.list a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + + + +.list { + padding-top: 10px; + padding-bottom: 10px; + padding-left: 0; + list-style: none; + border-top: 1px solid #47505e; +} + +/* .mini-player { + background-size: 100% 100%; + background-image: url(/project/images/player.png); + cursor: pointer; +}*/ +.audio-mini { + width: 50px; +} + +.dropbtn { + font-family: "Old Standard TT"; + font-weight: bold; + font-size: 24px; + color: black; + padding: 16px; + border: none; + cursor: pointer; +} + +.dropbtn:hover, .dropbtn:focus { + background-color: pink; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: white; + min-width: 1900px; + overflow: auto; + z-index: 1; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown a:hover { + background-color: none; +} + +.show { + display: block; +} + +/*style internet sources*/ +.dropbtn2 { + font-family: "Old Standard TT"; + font-weight: regular; + font-size: 24px; + color: black; + padding: 16px; + cursor: pointer; + background-color: rgba(255, 255, 255, 0.9); + border: 1px; + border-style: solid; + border-color: black; +} + +.dropbtn2:hover, .dropbtn2:focus { + background-color: pink; +} + +.dropdown2 { + position: absolute; + display: inline-block; +} + +.dropdown-content2 { + display: none; + position: absolute; + background-color: white; + min-width: 1000px; + overflow: auto; + z-index: 1; + border: 1px; + border-style: solid; + border-color: black; + right: 5px; +} + +.dropdown-content2 a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown2 a:hover { + background-color: none; +} + +.show2 { + display: block; +} + +/*style list of podcasts*/ +.dropbtn3 { + font-family: "Old Standard TT"; + font-weight: regular; + font-size: 24px; + color: black; + padding: 16px; + border: none; + cursor: pointer; +} + +.dropbtn3:hover, .dropbtn3:focus { + background-color: pink; +} + +.dropdown3 { + position: relative; + display: inline-block; +} + +.dropdown-content3 { + display: none; + position: absolute; + background-color: white; + min-width: 1000px; + overflow: auto; + z-index: 1; +} + +.dropdown-content3 a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown3 a:hover { + background-color: none; +} + +.show3 { + display: block; +} + +/* Make the clips use as much space as possible, and +* also show a scrollbar when there are too many clips to show +* in the available space */ +.sound-clips { + flex: 1; + overflow: auto; +} + +/*section, article { +display: block; +}*/ +.clip { + padding-bottom: 1rem; +} + +/*audio { +width: 100%; +display: block; +margin: 1rem auto 0.5rem; +}*/ +.clip p { + display: inline-block; + font-size: 1rem; +} + +.clip button { + font-size: 1rem; +} + +button.delete { + background: #f00; + padding: 0.5rem 0.75rem; + font-size: 0.8rem; +} + +/* Checkbox hack to control information box display */ +/*label { +font-size: 3rem; +position: absolute; +top: 2px; +right: 3px; +z-index: 5; +cursor: pointer; +}*/ +input[type=checkbox] { + position: absolute; + top: -100px; +} + +/*aside { +position: fixed; +top: 0; +left: 0; +width: 100%; +height: 100%; +transform: translateX(100%); +transition: 0.3s all ease-out; +background-color: #efefef; +padding: 1rem; +} + +aside p { +font-size: 1.2rem; +margin: 0.5rem 0; +} + +aside a { +color: #666; +} +*/ +/* Toggled State of information box */ +input[type=checkbox]:checked ~ aside { + transform: translateX(0); +} + +/* Cursor when clip name is clicked over */ +.clip p { + cursor: pointer; +} + + +/*hover of images and transcriptions style*/ +.tooltip-wrap { + position: relative; + text-decoration: underline; +} + +.tooltip-wrap .tooltip-content-down { + display: none; + position: absolute; + z-index: 1; + top: 50%; + /*bottom: 100%;*/ + left: 50%; + /*right: 100%;*/ + padding: 0.2em; + background-color: white; + /*background-color: rgba(255, 255, 255, 0.8);*/ + border: 1px; + border-style: solid; + border-color: black; + text-align: left; + min-width:200%; +} + +.tooltip-wrap .tooltip-content-right { + display: none; + position: absolute; + z-index: 1; + top: 100%; + /*bottom: 100%;*/ + left: 2%; + /*right: 100%;*/ + padding: 0.2em; + background-color: pink; + border: none; + text-align: left; + min-width: 400%; + font-size: 90%; +} + +.tooltip-wrap .tooltip-content-up { + display: none; + position: absolute; + z-index: 1; + /*top: 100%;*/ + bottom: 100%; + left: 2%; + /*right: 100%;*/ + padding: 0.2em; + background-color: rgba(255, 255, 255, 0.93); + border: 1px; + border-style: solid; + border-color: black; + text-align: left; +} + +.tooltip-wrap:hover .tooltip-content-down { + display: block; +} + +.tooltip-wrap:hover .tooltip-content-up { + display: block; +} + +.tooltip-wrap:hover .tooltip-content-right { + display: block; +} + +/*.tooltip-wrap:hover { + background-color: pink; +} +*/ +/*transcript wrapper,text following audio style*/ +#transcriptWrapper { + overflow: hidden; +} + +#transcript > div { + transition: all 0.8s ease; + list-style-type: disc; +} + +.speaking { + font-weight: bold; +} + +#transcriptWrapper3 { + overflow: hidden; +} + +#transcript3 > div { + transition: all 0.8s ease; + list-style-type: disc; +} + +.speaking3 { + font-weight: bold; +} + +/*one image next to the other*/ +.column { + float: left; + width: 30%; +} + +/* Clear floats after image containers */ +.row::after { + content: ""; + clear: both; + display: table; +} + +/* Style the tab */ +.tab { + overflow: hidden; + width: 20%; +} + +/* Style the buttons inside the tab */ +.tab button { + background-color: inherit; + border: 1px solid black; + outline: none; + cursor: pointer; + padding: 12px; + transition: 0.3s; + font-size: 80%; + width: 30%; +} + +/* Change background color of buttons on hover */ +.tab button:hover { + background-color: #ddd; +} + +/* Create an active/current tablink class */ +.tab button.active { + background-color: #ccc; +} + +.tabpink { + overflow: hidden; + width: 50%; +} + +.tabpink button { + background-color: inherit; + border: 1px solid black; + outline: none; + cursor: pointer; + padding: 12px; + transition: 0.3s; + font-size: 10%; + width: 50%; +} + +.tabpink button:hover { + background-color: pink; +} + +/* Create an active/current tablink class */ +.tabpink button.active { + background-color: pink; +} + +/* Style the tab content */ +.tabcontent { + display: none; + padding: 6px 12px; + border: 1px solid black; + float: left; + position: absolute; + width: 40%; + z-index: 1; + background-color: white; + top: 5px; +} + +/* Style the close button */ +.topleft { + float: right; + cursor: pointer; + font-size: 100%; +} + +.container .rowcircle { + margin: 25px; + text-align: center; +} + +.container .rowcircle span { + margin: 0 200px; + /*margin-right: 90px;*/ +} + +.draggable { + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); + background-color: white; + /* border:1px; + border-style:solid; + border-color:black;*/ + cursor: all-scroll; + position: absolute !important; + width: 20%; + display: inline; +/* transform: scale(20);*/ + /*min-height: 100px;*/ +} + +.draggable p { + text-align: center; + color: #A19696; +} + +#img { + line-height: 0 !important; +} + +.drag-content { + /*float: right;*/ + font-weight: normal !important; + padding: 0.8%; + padding-bottom: 0.8%; + text-align: center; +} + +.scaleable-wrapper { + padding: 0.8%; + padding-bottom: 0.8%; + resize: both; + position: relative; + /*height: 400px;*/ + /*min-height: 100px; */ +} + +.ui-resizable-se { + width: 10px; + height: 10px; + background: pink; + position: absolute; + bottom: 0; + right: 0; +} + + +#show1, #show2, #show3, #show4 { + display: none; + left: 20%; + width: 23% !important; +} + +#box-title { + border: 1px solid; + background-color: white; + padding: 10px; + position: absolute; +} + +/*for thesis html*/ +#maintext { + width: 120%; + margin-top: 2%; +} + +.toc_title { + font-weight: 700; + text-align: center; +} + +#toc_container li, #toc_container ul, #toc_container ul li { + list-style: outside none none !important; +} + +li, #angela, #judith, #laurie, #dana, #katalin { + border-bottom: 1px dashed; + list-style: none; + color: #A19696; +} + + + +.box_metadata { + background: white none repeat scroll 0 0; + border: 1px solid #aaa; + display: table; + font-size: 95%; + margin-bottom: 1em; + padding: 20px; + /*width: 1000px;*/ + left: 0px; + position: absolute; +} + +#metadata-thesis { + width:50%; +} +/*# sourceMappingURL=stylesheet.css.map */ + +.status { + color: red; +} + +/*#button_upload { + background-color: pink; + padding: 10px; + font-size: 20px; +}*/ + +#saved_msg { + color: red; + font-size: 100%; +} + + +/*reshuffle piles*/ +.group_vowels { + position:absolute; +} + +.group_photos { + position:absolute; +} + + +.group_extracts { + position:absolute; +} + +.group_metadata { + position:absolute; +} + +.audio-tag { + width: 100%; +} + +/*}*/ \ No newline at end of file diff --git a/thesis-angeliki.php b/thesis-angeliki.php index 2af4aac..74d4577 100644 --- a/thesis-angeliki.php +++ b/thesis-angeliki.php @@ -3,7 +3,8 @@ Let' s Talk About Unspeakable Things - + + @@ -14,150 +15,164 @@ h1,h2 { text-align: center !important; } + + h2 { + color: black; + } + .draggable { + padding:0 !important; + } + + .tooltip-content-right { + min-width: 40% !important; + } -


    Let' s Talk About Unspeakable Things    by Angeliki Diakrousi


    -
    -
    - -
    + -
    +

    Amplification of female voices

    (workshops)
    -
    +

    Diary of West Rotterdam

    (first experiments)
    -
    +

    Player

    (audio archive)
    -
    +

    About

    (main page)
    -
    +

    Podcast4

    -
    +

    Podcast1

    -
    +

    Podcast2

    -
    +

    Podcast3

    -
    +

    "Let' s Talk About Unspeakable Things"

    +
    +
    + +
    + + -
    Figure 1: Describing how female voices sound like +
    Figure 1: Describing how female voices sound like
    -
    -
    Figure 2: Vocal performance of Katalin Ladik -
    +
    Figure 2: Vocal performance of Katalin Ladik
    -
    Figure 3: Cartoon from Riana Dunkan +
    Figure 3: Cartoon from Riana Dunkan
    -
    Figure 4: Cartoon from Gonzalo Rocha +
    Figure 4: Cartoon from Gonzalo Rocha
    -
    -
    Figure 5: Performance from Laurie Anderson -
    + +
    Figure 5: Performance from Laurie Anderson
    + + +
    Figure 6: Speeches of Angela Davis and Judith Butler in Occupy Wall Street
    -
    Figure 7: 'Mikrophoniki' demonstration in Athens +
    Figure 7: 'Mikrophoniki' demonstration in Athens
    -
    Figure 8: Speech Matters: Violence and the Feminist Voice +
    Figure 8: Speech Matters: Violence and the Feminist Voice
    -
    Figure 9: 'The Broadcast Cart' of Miranda Zúñiga transmitting +
    Figure 9: 'The Broadcast Cart' of Miranda Zúñiga transmitting
    -
    Figure 10: A sculpture of Baubo, goddess of sacred and sexual humor +
    Figure 10: A sculpture of Baubo, goddess of sacred and sexual humor
    -
    Figure 11: Live streaming from Occupy Wall Street +
    Figure 11: Live streaming from Occupy Wall Street
    -

    Name: Angeliki Diakrousi
    -

    Title: Let's Talk About Unspeakable Things
    -

    Student number: 0956090
    -

    Thesis, in partial fulfillment of the requirements for the final examination for Master of Arts in Fine Art and Design: Experimental Publishing. Piet Zwart Institute, Willem de Kooning Academy.
    -

    Adviser: Steve Rushton
    -

    Second Reader: Kate Briggs

    Word count: 8380

    +
  • Author: Angeliki Diakrousi
    • +
  • Title: Let's Talk About Unspeakable Things
    • +
  • Student number: 0956090
    • +
  • Thesis, in partial fulfillment of the requirements for the final examination for Master of Arts in Fine Art and Design: Experimental Publishing. Piet Zwart Institute, Willem de Kooning Academy.
    • +
  • Adviser: Steve Rushton
    • +
  • Second Reader: Kate Briggs
    • +
  • Word count: 8380