fixed resizable draggable divs

master
Angeliki 6 years ago
parent f9efbfd9f3
commit f69a9919e8

2
.gitignore vendored

@ -1,6 +1,6 @@
project/podcasts/* project/podcasts/*
thesis/*.pdf thesis/*.pdf
thesis/drafts/ thesis/drafts/*
project/audio/ project/audio/
project/images/ project/images/

@ -26,37 +26,50 @@
<!-- draggable --> <!-- draggable -->
<div class="draggable" style="top:9%;left:6%;">
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:9%;left:6%;">
<h2 ><a href="index.php" target="_blank">About</a></h2> <h2 ><a href="index.php" target="_blank">About</a></h2>
<div class="drag-content"> <div class="drag-content">
'Let's amplify unspeakable things' is an online platform that supports a space for exploration and research, regarding voice in public and its amplification, developed by Angeliki Diakrousi. It consists of a set of experiments that questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>that revisit an archive of audio recordings produced in situated meetings and soundwalks. Every podcast exists on a way that creates repetetive layers of the same material. I perceive amplification as a way to create presence through repetition and multiplication. 'Let's amplify unspeakable things' is upsetting binaries such as male/female, expert/amateur, rational/irrational. It is about creating poetic (audio) narratives emerging from the contribution of people. 'Let's amplify unspeakable things' is an online platform that supports a space for exploration and research, regarding voice in public and its amplification, developed by Angeliki Diakrousi. It consists of a set of experiments that questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>that revisit an archive of audio recordings produced in situated meetings and soundwalks. Every podcast exists on a way that creates repetetive layers of the same material. I perceive amplification as a way to create presence through repetition and multiplication. 'Let's amplify unspeakable things' is upsetting binaries such as male/female, expert/amateur, rational/irrational. It is about creating poetic (audio) narratives emerging from the contribution of people.
</div></div> </div></div>
<div class="draggable" id="resize" style="top:12%;left:55%;width: 500px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:12%;left:55%;width: 500px;">
<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/carson-list.jpg" style="width: 100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div> <div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/carson-list.jpg" style="width: 100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
</div> </div>
<div class="draggable" style="top:81%;left:76%;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 4px; right: 1500px;z-index: 1;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2> <h2 ><a href="podcast1.php" target="_blank">Podcast1</a></h2>
<div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator. <div class="drag-content">Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i>
</div>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 220px; right: 10px;">
<h2 ><a href="podcast2.php" target="_blank">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 320px; right: 100px;">
<h2 ><a href="podcast3.php" target="_blank">Podcast3</a></h2>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php" target="_blank">Podcast4</a></h2>
</div>
</div> </div>
<div class="draggable" style="top:4%;left:80%;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:4%;left:80%;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let's Talk About Unspeakable Things"</a></h2> <h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let's Talk About Unspeakable Things"</a></h2>
<div class="drag-content"> <div class="drag-content">
This thesis is a series of three essays which relate to female and collective voices, and their mediation. They address the voice as a feminist tool for communication; studying how the female voice creates conditions for forms of listening and making space. Historically, some modes of address have been marginalized and shut out of the public domain. Collective voices are marginalized under the realm of patriarchal individualistic society. Even though voice is a medium for collective practice it is situated in a context that tends towards social binary structures and oppositions that restrict its possibilities. These binaries, which favor the 'civilized white male' subjectivities, have held influence on Western thinking since antiquity. Nevertheless, the nature of voice and its mediation overpass oppositions of gender, nationality, culture, space, technology and power relations. My research seeks to unravel these political capabilities of voices, in order to explore democratic ways of communication that embrace excluded forms of address. This thesis is a series of three essays which relate to female and collective voices, and their mediation. They address the voice as a feminist tool for communication; studying how the female voice creates conditions for forms of listening and making space. Historically, some modes of address have been marginalized and shut out of the public domain. Collective voices are marginalized under the realm of patriarchal individualistic society. Even though voice is a medium for collective practice it is situated in a context that tends towards social binary structures and oppositions that restrict its possibilities. These binaries, which favor the 'civilized white male' subjectivities, have held influence on Western thinking since antiquity. Nevertheless, the nature of voice and its mediation overpass oppositions of gender, nationality, culture, space, technology and power relations. My research seeks to unravel these political capabilities of voices, in order to explore democratic ways of communication that embrace excluded forms of address.
</div> </div>
</div> </div>
<div class="draggable" style="top:35%;left:25%;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:35%;left:25%;">
<h2 ><a href="amplification.html" target="_blank">Amplification of female voices</a></h2> <h2 ><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
<div class="drag-content">Part of the project is a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- and try vocal exercises and reading in moments of Leeszaal, an open library that I consider a diverse public space. How can we engage politically with the exclusion of specific voices from the public sphere? Here I have documented our attempts. Here I document my attempts to create a safe common space of trying methods and discussing that topic in Leeszaal, an open library that I consider a diverse public space. I am borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. Some methods are vocal performances in situ, the "human microphone", speech acts, listening practices, making podcasts, mediating speech, transform our voices, situated experiments. <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. Elements from the meetings: discuss previous material, reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>personal associations and experiences with voice in public, warm up, say a sentence of personal experience in any language, transcribe only the vowels, read back the vowels, read outloud all together the score of vowels, repeat sentences with distorted voice, make podcasts. The produced material is being included in an audio archive, the player. </div> <div class="drag-content">Part of the project is a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- and try vocal exercises and reading in moments of Leeszaal, an open library that I consider a diverse public space. How can we engage politically with the exclusion of specific voices from the public sphere? Here I have documented our attempts. Here I document my attempts to create a safe common space of trying methods and discussing that topic in Leeszaal, an open library that I consider a diverse public space. I am borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. Some methods are vocal performances in situ, the "human microphone", speech acts, listening practices, making podcasts, mediating speech, transform our voices, situated experiments. <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. Elements from the meetings: discuss previous material, reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>personal associations and experiences with voice in public, warm up, say a sentence of personal experience in any language, transcribe only the vowels, read back the vowels, read outloud all together the score of vowels, repeat sentences with distorted voice, make podcasts. The produced material is being included in an audio archive, the player. </div>
</div> </div>
<div class="draggable" style="top:75%;left:47%;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:75%;left:47%;">
<h2 ><a href="player.html" target="_blank">Diary of West Rotterdam</a></h2> <h2 ><a href="player.html" target="_blank">Diary of West Rotterdam</a></h2>
<div class="drag-content">I recorded sounds from the West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" target="_blank">Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space. <div class="drag-content">I recorded sounds from the West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" target="_blank">Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space.
</div></div> </div></div>
<div class="draggable" style="top:1%;left:36%;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:1%;left:36%;">
<h2 ><a href="player.html" target="_blank">Player</a></h2> <h2 ><a href="player.html" target="_blank">Player</a></h2>
<div class="drag-content">The player is an audio collection of voices and sounds from the meetings I have co-organised, references from my research, various internet sources, and soundwalks that I have done. It is a digital utterance that intends to be a reminder to the first forms of excluded female vocal expressions. I am using this material in my podcasts by mixing and overlayering them and creating a form of narrative with my own voice. </div> <div class="drag-content">The player is an audio collection of voices and sounds from the meetings I have co-organised, references from my research, various internet sources, and soundwalks that I have done. It is a digital utterance that intends to be a reminder to the first forms of excluded female vocal expressions. I am using this material in my podcasts by mixing and overlayering them and creating a form of narrative with my own voice. </div>
</div> </div>

3
js/jquery.min.js vendored

File diff suppressed because one or more lines are too long

@ -6,12 +6,54 @@ $(document).ready(function() {
$('.draggable').draggable({ $('.draggable').draggable({
start: function(event, ui) { $(this).css("z-index", a++); } start: function(event, ui) { $(this).css("z-index", a++); }
}); });
$('#resize').resizable({handles: 'e'}).draggable({ // $('#resize').resizable({handles: 'se'}).draggable({
start: function(event, ui) { $(this).css("z-index", a++); } // start: function(event, ui) { $(this).css("z-index", a++); }
});; // });;
// font size relative to div draggable/resizable size
var $wrapper = $(".scaleable-wrapper");
$wrapper.each(function (d) {
var $this = $(this);
// var $el = $("#very-specific-design");
var elHeight = $this.outerHeight();
var elWidth = $this.outerWidth();
$this.resizable({
resize: doResize
});
function doResize(event, ui) {
var scale, origin;
scale = Math.min(
ui.size.width / elWidth,
ui.size.height / elHeight
);
// scale=1.0;
// scale=2*scale
$this.css({
transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
}); });
}
var starterData = {
size: {
width: $this.width(),
height: $this.height()
}
}
// console.log("starterData", starterData, this);
doResize(null, starterData);
});
@ -223,5 +265,6 @@ window.onclick2 = function(event) {
} }
// for thesis // for thesis
var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`) // var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`)
});

@ -12,12 +12,6 @@
</head> </head>
<body> <body>
<div class="navbar">
<a href="podcast1.php" class="active">Podcast1 </a>
<a href="podcast2.php">Podcast2 </a>
<a href="podcast3.php">Podcast3 </a>
<a href="podcast4.php">Podcast4 </a>
</div>
<br><br> <br><br>
<h3 id="box-title" style="width: 200px; left: 45%; position: absolute;"> <h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
@ -25,27 +19,38 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 0px;"> <div class="draggable" style="top: 740px; right: 300px;">
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2> <h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 0px;"> <div class="draggable" style="top: 948.6px; right: 30px;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2> <h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 848.533px; right: 0px;"> <div class="draggable" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.html" target="_blank">Player</a></h2> <h2 ><a href="player.html" target="_blank">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 540px; right: 0px;"> <div class="draggable" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php" target="_blank">About</a></h2> <h2 ><a href="index.php" target="_blank">About</a></h2>
</div> </div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;"> <div class="draggable" style="top: 4px; right: 1500px;z-index: 1;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2> <h2 ><a href="podcast1.php" target="_blank">Podcast1</a></h2>
<div class="drag-content">Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<br><i> Podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i> <div class="drag-content">Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i>
</div>
</div>
<div class="draggable" style="top: 220px; right: 10px;">
<h2 ><a href="podcast2.php" target="_blank">Podcast2</a></h2>
</div>
<div class="draggable" style="top: 320px; right: 100px;">
<h2 ><a href="podcast3.php" target="_blank">Podcast3</a></h2>
</div> </div>
<div class="draggable" style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php" target="_blank">Podcast4</a></h2>
</div> </div>
<div class="draggable" style="top: 640px; right: 0px; z-index: 9;">
<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>

@ -40,11 +40,14 @@
</div> </div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;"> <div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2> <h2 ><a href="podcast1.php" target="_blank">Podcast1</a></h2>
<div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator. <div class="drag-content"> Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i>
</div> </div>
</div> </div>
<div class="draggable" style="top: 640px; right: 0px; z-index: 9;"> <div class="draggable" style="top: 640px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>

@ -1,13 +1,27 @@
body { body {
background-color: #F6F5F5; font-family: "Old Standard TT"; font-size: 20px; line-height: 1.2; letter-spacing: 1px;} background: #F6F5F5;
section {margin-bottom: 50px;margin-top: 20px;} font-family: "Old Standard TT";
a {font-weight: normal; text-decoration: none; } font-size: 1rem;
line-height: 1.3;
letter-spacing: 1px;
padding: 20px;
}
section {
margin-bottom: 50px;
margin-top: 20px;
}
a {
font-weight: normal;
text-decoration: none;
}
.navbar { .navbar {
letter-spacing: 4px; letter-spacing: 4px;
text-align: center; text-align: center;
} }
.navbar a:hover { .navbar a:hover {
background-color: #ddd; background-color: #ddd;
color: black; color: black;
@ -16,26 +30,42 @@ a {font-weight: normal; text-decoration: none; }
.navbar a.active { .navbar a.active {
font-size: 50px; font-size: 50px;
font-weight: bold;} font-weight: bold;
}
h2 { h2 {
text-align: center; text-align: center;
letter-spacing: 4px; letter-spacing: 4px;
font-size: 22px;} font-size: 28px;
}
h3 { h3 {
font-size: 20px; font-size: 20px;
} }
table, th, td {vertical-align: top; text-align: left; border-collapse: separate; padding: 6px;} table, th, td {
button {width: 100px;} vertical-align: top;
text-align: left;
border-collapse: separate;
padding: 6px;
}
button {
width: 100px;
}
.short-description { .short-description {
margin-left: 40%; margin-left: 40%;
margin-right: 40%; margin-right: 40%;
text-align: center; text-align: center;
} }
.internet {font-weight: regular; font-size: 18px; text-decoration: none; } .internet {
font-weight: regular;
font-size: 18px;
text-decoration: none;
}
.list a { .list a {
color: black; color: black;
padding: 12px 16px; padding: 12px 16px;
@ -46,6 +76,7 @@ display: block;
li { li {
list-style: none; list-style: none;
} }
.list { .list {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
@ -62,6 +93,7 @@ li {
.audio-mini { .audio-mini {
width: 50px; width: 50px;
} }
.dropbtn { .dropbtn {
font-family: "Old Standard TT"; font-family: "Old Standard TT";
font-weight: bold; font-weight: bold;
@ -97,11 +129,13 @@ text-decoration: none;
display: block; display: block;
} }
.dropdown a:hover {background-color: none;} .dropdown a:hover {
background-color: none;
.show {display: block;} }
.show {
display: block;
}
/*style internet sources*/ /*style internet sources*/
.dropbtn2 { .dropbtn2 {
@ -146,9 +180,13 @@ text-decoration: none;
display: block; display: block;
} }
.dropdown2 a:hover {background-color: none;} .dropdown2 a:hover {
background-color: none;
}
.show2 {display: block;} .show2 {
display: block;
}
/*style list of podcasts*/ /*style list of podcasts*/
.dropbtn3 { .dropbtn3 {
@ -186,11 +224,13 @@ text-decoration: none;
display: block; display: block;
} }
.dropdown3 a:hover {background-color: none;} .dropdown3 a:hover {
background-color: none;
.show3 {display: block;} }
.show3 {
display: block;
}
/* Make the clips use as much space as possible, and /* Make the clips use as much space as possible, and
* also show a scrollbar when there are too many clips to show * also show a scrollbar when there are too many clips to show
@ -203,7 +243,6 @@ overflow: auto;
/*section, article { /*section, article {
display: block; display: block;
}*/ }*/
.clip { .clip {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -213,7 +252,6 @@ width: 100%;
display: block; display: block;
margin: 1rem auto 0.5rem; margin: 1rem auto 0.5rem;
}*/ }*/
.clip p { .clip p {
display: inline-block; display: inline-block;
font-size: 1rem; font-size: 1rem;
@ -230,7 +268,6 @@ font-size: 0.8rem;
} }
/* Checkbox hack to control information box display */ /* Checkbox hack to control information box display */
/*label { /*label {
font-size: 3rem; font-size: 3rem;
position: absolute; position: absolute;
@ -239,7 +276,6 @@ right: 3px;
z-index: 5; z-index: 5;
cursor: pointer; cursor: pointer;
}*/ }*/
input[type=checkbox] { input[type=checkbox] {
position: absolute; position: absolute;
top: -100px; top: -100px;
@ -272,27 +308,17 @@ transform: translateX(0);
} }
/* Cursor when clip name is clicked over */ /* Cursor when clip name is clicked over */
.clip p { .clip p {
cursor: pointer; cursor: pointer;
} }
/* Adjustments for wider screens */
@media all and (min-width: 800px) {
/* Don't take all the space as readability is lost when line length
goes past a certain size */
/*.wrapper {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}*/
}
/*hover of images and transcriptions style*/ /*hover of images and transcriptions style*/
.tooltip-wrap { .tooltip-wrap {
position: relative; position: relative;
font-size: 1.6rem;
} }
.tooltip-wrap .tooltip-content-down { .tooltip-wrap .tooltip-content-down {
display: none; display: none;
position: absolute; position: absolute;
@ -301,7 +327,7 @@ cursor: pointer;
/*bottom: 100%;*/ /*bottom: 100%;*/
left: 2%; left: 2%;
/*right: 100%;*/ /*right: 100%;*/
padding: .2em; padding: 0.2em;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
border: 1px; border: 1px;
border-style: solid; border-style: solid;
@ -317,12 +343,12 @@ cursor: pointer;
/*bottom: 100%;*/ /*bottom: 100%;*/
left: 2%; left: 2%;
/*right: 100%;*/ /*right: 100%;*/
padding: .2em; padding: 0.2em;
background-color: pink; background-color: pink;
border: none; border: none;
text-align: left; text-align: left;
min-width: 400px;} min-width: 400px;
}
.tooltip-wrap .tooltip-content-up { .tooltip-wrap .tooltip-content-up {
display: none; display: none;
@ -332,17 +358,18 @@ cursor: pointer;
bottom: 100%; bottom: 100%;
left: 2%; left: 2%;
/*right: 100%;*/ /*right: 100%;*/
padding: .2em; padding: 0.2em;
background-color: rgba(255, 255, 255, 0.93); background-color: rgba(255, 255, 255, 0.93);
border: 1px; border: 1px;
border-style: solid; border-style: solid;
border-color: black; border-color: black;
text-align: left; text-align: left;
} }
.tooltip-wrap:hover .tooltip-content-down { .tooltip-wrap:hover .tooltip-content-down {
display: block; display: block;
} }
.tooltip-wrap:hover .tooltip-content-up { .tooltip-wrap:hover .tooltip-content-up {
display: block; display: block;
} }
@ -355,30 +382,31 @@ cursor: pointer;
background-color: pink; background-color: pink;
} }
*/ */
/*transcript wrapper,text following audio style*/ /*transcript wrapper,text following audio style*/
#transcriptWrapper { #transcriptWrapper {
overflow: hidden; overflow: hidden;
} }
#transcript > div { #transcript > div {
transition: all .8s ease; transition: all 0.8s ease;
list-style-type: disc; list-style-type: disc;
} }
.speaking { .speaking {
font-weight:bold font-weight: bold;
} }
#transcriptWrapper3 { #transcriptWrapper3 {
overflow: hidden; overflow: hidden;
} }
#transcript3 > div { #transcript3 > div {
transition: all .8s ease; transition: all 0.8s ease;
list-style-type: disc; list-style-type: disc;
} }
.speaking3 { .speaking3 {
font-weight:bold font-weight: bold;
} }
/*one image next to the other*/ /*one image next to the other*/
@ -394,7 +422,6 @@ cursor: pointer;
display: table; display: table;
} }
/* Style the tab */ /* Style the tab */
.tab { .tab {
overflow: hidden; overflow: hidden;
@ -479,26 +506,42 @@ cursor: pointer;
} }
.draggable { .draggable {
box-shadow: 5px 5px 10px rgba(0,0,0,.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 1) ; background-color: white;
/* border:1px; /* border:1px;
border-style:solid; border-style:solid;
border-color:black;*/ border-color:black;*/
cursor: all-scroll; cursor: all-scroll;
position: absolute !important; position: absolute !important;
width: 400px; width: 400px;
display: inline;
} }
#img { #img {
line-height: 0 !important; line-height: 0 !important;
} }
.drag-content { .drag-content {
font-size: 16px;
/*float: right;*/ /*float: right;*/
font-weight: normal !important; font-weight: normal !important;
padding: 0.8em; padding: 0.8em;
font-size: 1rem;
}
.scaleable-wrapper {
padding: 20px;
resize: both;
position: relative;
/*height: 400px;*/
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: orange;
position: absolute;
bottom: 0;
right: 0;
} }
@ -509,12 +552,18 @@ cursor: pointer;
} }
#box-title { #box-title {
border:1px solid; background-color: white; padding: 10px; position: absolute; border: 1px solid;
background-color: white;
padding: 10px;
position: absolute;
} }
/*for thesis html*/ /*for thesis html*/
#maintext{margin:50px;} #maintext {
margin-left: 400px;
margin-right: 400px;
margin-top: 5px;
}
.toc_title { .toc_title {
font-weight: 700; font-weight: 700;
@ -526,7 +575,7 @@ cursor: pointer;
} }
#dashed, #angela, #judith, #laurie, #dana, #katalin { #dashed, #angela, #judith, #laurie, #dana, #katalin {
border-bottom: 1px dashed border-bottom: 1px dashed;
} }
#box_metadata { #box_metadata {
@ -540,3 +589,5 @@ cursor: pointer;
left: 0px; left: 0px;
position: absolute; position: absolute;
} }
/*# sourceMappingURL=stylesheet.css.map */

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["stylesheet.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AACF;EAAS;EAAoB;;;AAC7B;EAAG;EAAqB;;;AAExB;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAGF;EAAe;EAAqB;EAAkB;EAA2B;;;AACjF;EAAQ;;;AACR;EACE;EACA;EACA;;;AAGF;EAAW;EAAsB;EAAiB;;;AAClD;EACA;EACA;EACA;EACA;;;AAGA;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAKA;EACA;;;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;;;AAGA;EAAmB;;;AAEnB;EAAO;;;AAIP;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;;;AAGA;EAAoB;;;AAEpB;EAAQ;;;AAER;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;EACA;;;AAGA;EAAoB;;;AAEpB;EAAQ;;;AAIR;AAAA;AAAA;AAGA;EACA;EACA;;;AAGA;AAAA;AAAA;AAIA;EACA;;;AAGA;AAAA;AAAA;AAAA;AAAA;AAMA;EACA;EACA;;;AAGA;EACA;;;AAGA;EACA;EACA;EACA;;;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAqBA;AACA;EACA;;;AAGA;AAEA;EACA;;;AAGA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;;AAQA;AACA;EACE;;;AAEF;EACE;EACA;EACA;EACA;AACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;AACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;AACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAEA;EACI;;;AAGJ;EACI;EACA;;;AAEJ;EACE;;;AAGF;EACI;;;AAEJ;EACI;EACA;;;AAEJ;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAIF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;AACA;;;AAGF;EACE;EACA;AACF;AAAA;AAAA;EAGE;EACA;EACA;;;AAIF;EACE;;;AAGF;AACE;EACA;EACA;AACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EAAkB;EAAyB;EAAe;;;AAI5D;AACA;EAAU;EAAmB;EAAoB;;;AAEjD;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACE;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"stylesheet.css"}

@ -0,0 +1,547 @@
body {
background-color: #F6F5F5;
font-family: "Old Standard TT";
font-size: 26px;
line-height: 1.3;
letter-spacing: 1px;}
section {margin-bottom: 50px;margin-top: 20px;}
a {font-weight: normal; text-decoration: none; }
.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;}
h2 {
text-align: center;
letter-spacing: 4px;
font-size: 28px;}
h3{
font-size: 20px;
}
table, th, td {vertical-align: top; text-align: left; border-collapse: separate; padding: 6px;}
button {width: 100px;}
.short-description{
margin-left: 40%;
margin-right: 40%;
text-align: center;
}
.internet {font-weight: regular; font-size: 18px; text-decoration: none; }
.list a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
li {
list-style: none;
}
.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;
}
/* Adjustments for wider screens */
@media all and (min-width: 800px) {
/* Don't take all the space as readability is lost when line length
goes past a certain size */
/*.wrapper {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}*/
}
/*hover of images and transcriptions style*/
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content-down {
display: none;
position: absolute;
z-index:1;
top: 100%;
/*bottom: 100%;*/
left: 2%;
/*right: 100%;*/
padding: .2em;
background-color: rgba(255, 255, 255, 0.8) ;
border:1px;
border-style:solid;
border-color:black;
text-align: left;
}
.tooltip-wrap .tooltip-content-right {
display: none;
position: absolute;
z-index:1;
top: 100%;
/*bottom: 100%;*/
left: 2%;
/*right: 100%;*/
padding: .2em;
background-color: pink;
border:none;
text-align: left;
min-width: 400px;}
.tooltip-wrap .tooltip-content-up {
display: none;
position: absolute;
z-index:1;
/*top: 100%;*/
bottom: 100%;
left: 2%;
/*right: 100%;*/
padding: .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 .8s ease;
list-style-type: disc;
}
.speaking {
font-weight:bold
}
#transcriptWrapper3 {
overflow: hidden;
}
#transcript3 > div {
transition: all .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: 20px;
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: 20px;
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: 28px;
}
.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,.2);
background-color: rgba(255, 255, 255, 1) ;
/* border:1px;
border-style:solid;
border-color:black;*/
cursor: all-scroll;
position: absolute !important;
width: 400px;
}
#img {
line-height: 0 !important;
}
.drag-content {
/*float: right;*/
font-weight: normal !important;
padding: 0.8em;
/*font-size: 16px;*/
font-size: calc(12px + (24 - 12) * ((100vw - 400px) / (1600 - 400)));
}
#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;
}
#dashed,#angela,#judith,#laurie,#dana,#katalin {
border-bottom: 1px dashed
}
#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;
}

@ -11,7 +11,8 @@ utter a vowel/
broadcasted utterances/ broadcasted utterances/
overlayered utterances/ overlayered utterances/
podcasts as utterances podcasts as utterances
utterances in podcasts utterances in podcasts/
when the voice becomes the medium
podcast: A podcast, or generically netcast, is an episodic series of digital audio or video files which a user can download and listen to. podcast: A podcast, or generically netcast, is an episodic series of digital audio or video files which a user can download and listen to.
utterance:an act of uttering (verbalize); vocal expression. utterance:an act of uttering (verbalize); vocal expression.

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save