diff --git a/README.md b/archive/03/README.md similarity index 100% rename from README.md rename to archive/03/README.md diff --git a/atlas-map.svg b/archive/03/atlas-map.svg similarity index 100% rename from atlas-map.svg rename to archive/03/atlas-map.svg diff --git a/contents.js b/archive/03/contents.js similarity index 100% rename from contents.js rename to archive/03/contents.js diff --git a/fonts/fengardoneue_black-webfont.woff b/archive/03/fonts/fengardoneue_black-webfont.woff similarity index 100% rename from fonts/fengardoneue_black-webfont.woff rename to archive/03/fonts/fengardoneue_black-webfont.woff diff --git a/fonts/fengardoneue_regular-webfont.woff b/archive/03/fonts/fengardoneue_regular-webfont.woff similarity index 100% rename from fonts/fengardoneue_regular-webfont.woff rename to archive/03/fonts/fengardoneue_regular-webfont.woff diff --git a/archive/03/index.html b/archive/03/index.html new file mode 100644 index 0000000..8a06490 --- /dev/null +++ b/archive/03/index.html @@ -0,0 +1,379 @@ + + + + + + + + + + + + Emergent Opera + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
The Emergent Opera
+
10.05.2022
+
SI18#3
+
+ +
+
+
+
+ 10.05.2022
+ SI18 Weekly Release #3 +
+

Emergent Opera

+
+ What does it mean? This week we invite you to make content within a common + structure, instead of finding a structure when the contents have already + been made! An emergent opera where each property is part of a bigger whole, + that comes together in the becoming... +
+ +
+
Contribution by
+
+ Kimberley, Chae, Kamo, Supi, Emma,
+ Miri, Carmen, Alex, Gersande, Jian +
+ +
Caretakers
+
Erica, Gersande, Kamo
+
+ +
+ + +
+

Index

+
+ + +
+
+ + +
+
+ ~ + +
+

Overture Atlas

+
description
+
+ + +
+
+
+
+
+ + diff --git a/interface.css b/archive/03/interface.css similarity index 100% rename from interface.css rename to archive/03/interface.css diff --git a/print.css b/archive/03/print.css similarity index 100% rename from print.css rename to archive/03/print.css diff --git a/archive/03/style.css b/archive/03/style.css new file mode 100644 index 0000000..470fa2d --- /dev/null +++ b/archive/03/style.css @@ -0,0 +1,279 @@ +@font-face { + font-family: Fengardo; + src: url("fonts/fengardoneue_regular-webfont.woff"); +} + +@font-face { + font-family: Fengardo; + src: url("fonts/fengardoneue_black-webfont.woff"); + font-weight: bold; +} + +:root { + --text: #111; + --wireframe: #111; + --background: #ff6347; +} + +* { + box-sizing: border-box; +} + +body, +html { + margin: 0; + padding: 0; + background-color: var(--background); + color: var(--text); + font-family: Fengardo; + font-size: 21px; + line-height: 1.6; + + overflow: hidden; +} + +.container { + display: flex; + width: 100vw; + height: 100vh; + margin: 0; + overflow: hidden; +} + +.container > * { + flex-basis: 50%; +} + +.atlas { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + border-right: solid 1px var(--wireframe); +} + +.info { + display: flex; + justify-content: space-around; + align-items: center; + height: 100px; + width: 100%; + border-top: solid 1px var(--wireframe); +} + +.libretto { + overflow-y: scroll; + scroll-behavior: smooth; +} + +.libretto > * { + border-bottom: solid 1px var(--wireframe); +} + +.contribution:last-of-type { + border-bottom: none; +} + +.atlas svg { + padding: 32px; + width: 100%; + overflow: visible; +} + +.atlas svg #live-path { + color: currentColor; + stroke-dasharray: 18159; + stroke-dashoffset: 18159; + animation: dash 300s linear forwards; +} + +@keyframes dash { + to { + stroke-dashoffset: 0; + } +} + +path[data-link] { + pointer-events: all; + pointer-events: bounding-box; +} + +.moment { + text-transform: uppercase; +} + +.cover { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + min-height: 100vh; + padding: 32px; +} + +.cover .release { + font-style: italic; +} + +.cover .title { + font-size: 64px; + margin: 64px 0; +} + +.cover .description { + max-width: 50ch; +} + +dl { + margin-top: 128px; +} + +dt { + margin-top: 24px; + font-style: italic; +} + +dd { + max-width: 60ch; + margin: 0; +} + +.index { + display: none; +} + +#reference { + display: none; +} + +.contribution { + padding: 16px; + padding-bottom: 64px; + border-bottom: 1px solid currentColor; +} + +.contribution .title { + margin: 0; + margin-top: 0; + font-size: 42px; +} + +.contribution .meta { + /* font-size: 0.8em; */ + /* font-weight: bold; */ + text-transform: uppercase; +} + +.contribution .audio { + margin-bottom: 32px; +} + +.contribution .player { + border: 1px solid currentColor; + outline: none; + background: none; + padding: 4px 8px; + cursor: pointer; +} + +ul, +ol { + margin: 16px 0; +} + +.contribution .description { + font-style: italic; + + padding-bottom: 8px; +} + +.contribution .content h3, +.contribution .content h2 { + font-size: 28px; + margin: 16px 0; +} + +.contribution .content ol { + padding-inline-start: 16px; +} + +.contribution img { + width: 100%; + height: auto; + object-fit: contain; +} + +.content { + white-space: pre-line; +} + +.content p, +.content h2 { + margin: 0; +} + +.content img { + width: 100%; + object-fit: contain; + height: auto; +} + +#btn-print { + display: inline-block; + color: var(--text); + margin-top: 32px; + background: none; + border: 1px solid var(--text); + padding: 4px 8px; + font-size: 1rem; +} + +#btn-print:hover { + cursor: pointer; +} + +a { + position: relative; + color: currentColor; + pointer-events: all; +} + +a:hover { + color: white; +} + +@namespace svg url(http://www.w3.org/2000/svg); +/* Necessary to select only SVG elements, and not also HTML's. + See warning below */ + +svg|a:link, +svg|a:visited { + cursor: pointer; + color: currentColor; + pointer-events: all; +} + +svg|g { + pointer-events: all; +} + +@media (max-width: 991.98px) { + .container { + height: auto; + width: 100%; + display: block; + } + + .libretto { + overflow: hidden; + } + + .atlas svg { + padding: 16px; + } + + .info { + display: none; + } +} diff --git a/index.html b/index.html index 8a06490..eb9c9f0 100644 --- a/index.html +++ b/index.html @@ -1,379 +1,40 @@ - - - - - - - - - - Emergent Opera - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
The Emergent Opera
-
10.05.2022
-
SI18#3
-
- -
-
-
-
- 10.05.2022
- SI18 Weekly Release #3 -
-

Emergent Opera

-
- What does it mean? This week we invite you to make content within a common - structure, instead of finding a structure when the contents have already - been made! An emergent opera where each property is part of a bigger whole, - that comes together in the becoming... -
- -
-
Contribution by
-
- Kimberley, Chae, Kamo, Supi, Emma,
- Miri, Carmen, Alex, Gersande, Jian -
- -
Caretakers
-
Erica, Gersande, Kamo
-
- -
- - -
-

Index

-
- - -
-
- - -
-
- ~ - -
-

Overture Atlas

-
description
-
- - -
-
-
-
-
- - + + + + + The Parliament + + + + +

The Jingle Board Parliament

+
?
+
+

SI18 - Weekly Release #4

+

The format of this week's release is a jingle board arranged in the layout of a parliament! Each seat is a button that plays an audio snippet when pressed. There is no linear or predefined outcome but the listener can create a unique parliament conference themselves. Therefore, the meaning of the audio contributions can be changed and recontextualised. The contributions include a range from self-made recordings, movie quotes, excerpts and re-enactments of political speeches, sound effects, audio snippets from well-known videos on the internet and covers of European anthems.

+

Our take on this idea of the parliament is rooted in the influence that elements of pop-culture have on politics, and more precisely on shaping the characters and the voices that then inhabit a parliament. While much of the politics happens outside of official institutional buildings, yet the idea of the parliament remains a pure symbol of the place in which democracy is being performed. Let's renew the voices that are usually heard in political discourses!

+
+
Contribution by:
+
Supisara Burapachaisri, Kimberley Cosmilla, Francesco Luzzana, Miriam Schöb, Mitsa Chaida-Michelakou, Ål Nik (Alexandra Nikolova), Gersande Schellinx, Jian Haake, Emma Prato, Carmen, Erica Gargaglione
+
+
Caretakers:
+
Erica Gargaglione, Miriam Schöb, Mitsa Chaida-Michelakou
+
+ +
+
+
+

+
+
+ +
name
+
+
+
+
+ + +l \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a53506b --- /dev/null +++ b/script.js @@ -0,0 +1,84 @@ +let source_url = "" +let partyRef = document.getElementById("partyRef") +let seatRef = document.querySelector(".seat") +let hemicycle = document.getElementsByClassName("hemicycle")[0] +let row = 5 + +let btn = document.getElementById("info-btn") +let info = document.getElementById("info") + +fetch("https://hub.xpub.nl/soupboat/the-parliament/") + .then((response) => response.json()) + .then((data) => { + source_url = data.base_url; + populateSeats(data.parliament) + }); + +function populateSeats(parliament) { + for (const group of Object.keys(parliament)){ //gets the parent's keys + let party = partyRef.cloneNode(true); + let partyName = party.querySelector("h4") + party.id = group; + + partyName.innerHTML = group; + for (representative of parliament[group]){ + let seat = seatRef.cloneNode(true); + seat.querySelector(".label").innerHTML = representative.who; + seat.id = representative.who; + let filename = source_url + group + '/' + representative.filename; + let audio = new Audio(filename) + audio.addEventListener("canplaythrough", (e) => { + console.log(filename); + let mic = seat.querySelector(".mic"); + mic.innerHTML = "Talk"; + mic.addEventListener("click", () => { + console.log(filename); + if (audio.paused) { + audio.play(); + mic.innerHTML="Pause"; + mic.style.color ="white"; + mic.style.background = "red" + } else { + audio.pause(); + mic.innerHTML="Talk" + + } + }); + audio.addEventListener("ended", () => { + audio.pause(); + audio.currentTime = 0; + mic.style.background = "white" + mic.style.color ="red"; + }); + }); + party.appendChild(seat); + } + + hemicycle.appendChild(party); + + } +} + +// info +btn.addEventListener("click", showInfo) + + +function showInfo(){ + + if (info.style.display === "none"){ + btn.innerHTML = "X"; + console.log("click"); + info.style.display = "block"; + } else { + btn.innerHTML = "?"; + info.style.display = "none"; + } +} + +/* + TODO + - upload svg + - loop through the elements to associate seat to each of them + - create label + - rotation? +*/ \ No newline at end of file diff --git a/style.css b/style.css index 470fa2d..aef8508 100644 --- a/style.css +++ b/style.css @@ -1,279 +1,109 @@ -@font-face { - font-family: Fengardo; - src: url("fonts/fengardoneue_regular-webfont.woff"); -} - -@font-face { - font-family: Fengardo; - src: url("fonts/fengardoneue_black-webfont.woff"); - font-weight: bold; -} -:root { - --text: #111; - --wireframe: #111; - --background: #ff6347; +:root{ + --color1: rgb(105, 105, 255); } * { - box-sizing: border-box; -} - -body, -html { - margin: 0; - padding: 0; - background-color: var(--background); - color: var(--text); - font-family: Fengardo; - font-size: 21px; - line-height: 1.6; - - overflow: hidden; -} - -.container { - display: flex; - width: 100vw; - height: 100vh; - margin: 0; - overflow: hidden; -} - -.container > * { - flex-basis: 50%; -} - -.atlas { - position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; - border-right: solid 1px var(--wireframe); -} - -.info { - display: flex; - justify-content: space-around; - align-items: center; - height: 100px; - width: 100%; - border-top: solid 1px var(--wireframe); -} - -.libretto { - overflow-y: scroll; - scroll-behavior: smooth; -} - -.libretto > * { - border-bottom: solid 1px var(--wireframe); -} - -.contribution:last-of-type { - border-bottom: none; -} - -.atlas svg { - padding: 32px; - width: 100%; - overflow: visible; -} - -.atlas svg #live-path { - color: currentColor; - stroke-dasharray: 18159; - stroke-dashoffset: 18159; - animation: dash 300s linear forwards; -} - -@keyframes dash { - to { - stroke-dashoffset: 0; - } -} - -path[data-link] { - pointer-events: all; - pointer-events: bounding-box; -} - -.moment { - text-transform: uppercase; -} - -.cover { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - - min-height: 100vh; - padding: 32px; -} - -.cover .release { - font-style: italic; -} - -.cover .title { - font-size: 64px; - margin: 64px 0; -} - -.cover .description { - max-width: 50ch; -} - -dl { - margin-top: 128px; + box-sizing: border-box; +} + +body, html{ + margin: 0; + padding: 0; + color: var(--color1); + font-family: sans-serif; +} +.btn{ + position: fixed; + z-index: 99; + top: 16px; + left: 16px; + font-size: 36px; + font-family: sans-serif; + text-align: center; + border: solid 2px var(--color1); + width: 48px; + height: 48px; + border-radius: 50%; + background-color: white; + padding: 2px 0; +} +.btn:hover{ + cursor: pointer; +} +.info{ + display: none; + font-size: 2.5ch; + position: fixed; + top: 0; + left: 0; + z-index: 1; + width: 50vw; + height: 100vh; + background-color: white; + border: solid 2px var(--color1); + overflow: auto; + padding-left: 16px; +} +h2{ + margin: 0; + margin-top: 96px; + font-weight: normal; } dt { - margin-top: 24px; - font-style: italic; -} - -dd { - max-width: 60ch; - margin: 0; -} - -.index { - display: none; -} - -#reference { - display: none; -} - -.contribution { - padding: 16px; - padding-bottom: 64px; - border-bottom: 1px solid currentColor; + font-style: italic; } -.contribution .title { - margin: 0; - margin-top: 0; - font-size: 42px; +.hemicycle{ + display: flex; + flex-flow: column wrap; + align-content: stretch; + justify-content: right; + /* width: 100vw; */ + margin: 0 auto; } - -.contribution .meta { - /* font-size: 0.8em; */ - /* font-weight: bold; */ - text-transform: uppercase; -} - -.contribution .audio { - margin-bottom: 32px; -} - -.contribution .player { - border: 1px solid currentColor; - outline: none; - background: none; - padding: 4px 8px; - cursor: pointer; +h1{ + font-size: 60px; + text-align: center; } -ul, -ol { - margin: 16px 0; +#partyRef, +#seatRef{ + display: none; } - -.contribution .description { - font-style: italic; - - padding-bottom: 8px; +.party{ + /* border: solid 1px black; */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-start; + justify-content: center; + margin: 8px 0; } -.contribution .content h3, -.contribution .content h2 { - font-size: 28px; - margin: 16px 0; +h4{ + width: 160px; } -.contribution .content ol { - padding-inline-start: 16px; -} - -.contribution img { - width: 100%; - height: auto; - object-fit: contain; -} -.content { - white-space: pre-line; +.seats{ + display: flex; + flex-direction: row; + align-content: center; + margin: 4px 4px; } -.content p, -.content h2 { - margin: 0; +.seat .mic{ + width: 80px; + height: 80px; + border-radius: 10%; + border: solid 3px var(--color1); + background-color: white; + color: currentColor; } - -.content img { - width: 100%; - object-fit: contain; - height: auto; -} - -#btn-print { - display: inline-block; - color: var(--text); - margin-top: 32px; - background: none; - border: 1px solid var(--text); - padding: 4px 8px; - font-size: 1rem; -} - -#btn-print:hover { - cursor: pointer; -} - -a { - position: relative; - color: currentColor; - pointer-events: all; -} - -a:hover { - color: white; -} - -@namespace svg url(http://www.w3.org/2000/svg); -/* Necessary to select only SVG elements, and not also HTML's. - See warning below */ - -svg|a:link, -svg|a:visited { - cursor: pointer; - color: currentColor; - pointer-events: all; -} - -svg|g { - pointer-events: all; -} - -@media (max-width: 991.98px) { - .container { - height: auto; - width: 100%; - display: block; - } - - .libretto { - overflow: hidden; - } - - .atlas svg { - padding: 16px; - } - - .info { - display: none; - } +.label{ + width: 90px; + overflow-wrap: break-word; + font-size: 1.5ch; }