diff --git a/app.js b/app.js index 901abf5..a2704d2 100644 --- a/app.js +++ b/app.js @@ -1,8 +1,16 @@ const BuchimgaePic = document.getElementById("Buchimgaepic"); const Buchimgae = document.getElementById("Buchimgae"); const BuchimgaeExpl = document.getElementById("expl"); -const BuchimgaeIllu = document.getElementById("illu"); -const BuchimgaePhoto = document.getElementById("photo"); +const Enrico = document.querySelector(".enrico"); +const Tape = document.getElementById("taping"); +const bindtogether = document.querySelector(".bindtogether"); +const collectiveBind = document.getElementById("collectivebind"); +const chaePic = document.querySelector(".chaepic"); +const chaeExp = document.getElementById("chaeexp"); +const compoPic = document.querySelector(".compopic"); +const compo = document.getElementById("compo"); +const bilbi = document.querySelector(".bilbi"); +const bilbiPic = document.getElementById("bilbiface"); Buchimgae.addEventListener("click", function () { Buchimgae.style.display = "none"; @@ -16,12 +24,52 @@ BuchimgaePic.addEventListener("click", function () { Buchimgae.style.display = "inline-block"; }); -BuchimgaeIllu.addEventListener("click", function () { - BuchimgaeIllu.style.display = "none"; - BuchimgaePhoto.style.display = "inline-block"; +Tape.addEventListener("click", function () { + Tape.style.display = "none"; + Enrico.style.display = "block"; }); -BuchimgaePhoto.addEventListener("click", function () { - BuchimgaePhoto.style.display = "none"; - BuchimgaeIllu.style.display = "inline-block"; +Enrico.addEventListener("click", function () { + Enrico.style.display = "none"; + Tape.style.display = "block"; +}); + +collectiveBind.addEventListener("click", function () { + collectiveBind.style.display = "none"; + bindtogether.style.display = "block"; +}); + +bindtogether.addEventListener("click", function () { + bindtogether.style.display = "none"; + collectiveBind.style.display = "block"; +}); + +chaeExp.addEventListener("click", function () { + chaeExp.style.display = "none"; + chaePic.style.display = "block"; +}); + +chaePic.addEventListener("click", function () { + chaePic.style.display = "none"; + chaeExp.style.display = "block"; +}); + +compo.addEventListener("click", function () { + compo.style.display = "none"; + compoPic.style.display = "block"; +}); + +compoPic.addEventListener("click", function () { + compoPic.style.display = "none"; + compo.style.display = "block"; +}); + +bilbi.addEventListener("click", function () { + bilbi.style.display = "none"; + bilbiPic.style.display = "block"; +}); + +bilbiPic.addEventListener("click", function () { + bilbiPic.style.display = "none"; + bilbi.style.display = "block"; }); diff --git a/img/.DS_Store b/img/.DS_Store index 118e82c..bf7396f 100644 Binary files a/img/.DS_Store and b/img/.DS_Store differ diff --git a/img/bind-together.jpg b/img/bind-together.jpg new file mode 100644 index 0000000..3831bf5 Binary files /dev/null and b/img/bind-together.jpg differ diff --git a/img/compositing_768.jpg b/img/compositing_768.jpg index e7578d8..8c667eb 100644 Binary files a/img/compositing_768.jpg and b/img/compositing_768.jpg differ diff --git a/img/habitat_process2.jpg b/img/habitat_process2.jpg new file mode 100644 index 0000000..978aa4c Binary files /dev/null and b/img/habitat_process2.jpg differ diff --git a/img/index.css b/img/index.css deleted file mode 100644 index da6629a..0000000 Binary files a/img/index.css and /dev/null differ diff --git a/img/pancake.jpg b/img/pancake.jpg index 6916729..4ad09b1 100644 Binary files a/img/pancake.jpg and b/img/pancake.jpg differ diff --git a/img/taping-recording_1024.jpg b/img/taping-recording_1024.jpg index 515e838..144df38 100644 Binary files a/img/taping-recording_1024.jpg and b/img/taping-recording_1024.jpg differ diff --git a/index.css b/index.css index 4896999..084dd7f 100644 --- a/index.css +++ b/index.css @@ -108,7 +108,7 @@ body { } .intro { - width: 50%; + width: 70%; margin-top: 2.5%; margin-left: auto; margin-right: auto; @@ -117,10 +117,14 @@ body { } .intro h4 { + font-size: 1.2rem; } .intro p { + font-size: 1rem; + line-height: 145%; border: 1px solid black; + padding: 1% 2%; } #tsss { text-decoration: underline dotted; @@ -129,11 +133,6 @@ body { .cut { width: 80%; height: auto; - /* display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 15px; - row-gap: 15px; */ - display: flex; flex-direction: row; justify-content: space-between; @@ -145,13 +144,9 @@ body { /* background-color: yellow; */ } -.ani img { - width: 60%; - border: 1px solid black; -} .text { - background-color: antiquewhite; - width: 40%; + background-color: blanchedalmond; + width: 50%; max-width: 40%; margin-left: 0; padding-left: 0; @@ -159,9 +154,9 @@ body { .text p, .part p { - padding: 2% 4%; - font-size: 1rem; - line-height: 135%; + padding: 1% 4%; + font-size: 1.05rem; + line-height: 140%; } .cut3 .text { @@ -175,8 +170,7 @@ body { font-size: 1.2rem; } -.cut5 .text span, -.cut5 .ani { +.cut3a .text span { cursor: pointer; } @@ -208,3 +202,43 @@ body { #Buchimgaepic img { width: 100%; } + +.ani img, +.enrico img, +.bindtogether img, +.chaepic img, +.compopic img, +.bilbi img { + width: 60%; + border: 1px solid black; +} + +#taping, +#collectivebind, +.enrico, +.bindtogether, +#chaeexp, +.chaepic, +#compo, +.compopic, +#bilbiface, +.bilbi { + cursor: pointer; +} + +.enrico, +.bindtogether, +.chaepic, +.compopic, +.bilbi { + display: none; +} + +#taping img, +#collectivebind img, +#chaeexp img, +#compo img, +#bilbiface img { + border-style: dashed; + border-width: 1px; +} diff --git a/index.html b/index.html index 70f7e09..6644619 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Testinggg + chatty, messy, sticky, tsss...In Habitat

Rotterdam to Eindhoven, Eindhoven to Bologna, Bologna to Faenza, Faenza to Tredozio...
- Our journey from the Netherlands to Italy was made through winding roads. - - It was orange evening that we arrived at Habitat.

+ Our journey from the Netherlands to Italy was made through winding roads. When we landed to Habitat, + the sky was colored into orange.

@@ -71,32 +70,51 @@

- If we think of the word publishing, we're prone to be stuck - with an idea of working on some documents in Adobe applications, - then print, then glue. + Our friend Jacopo (a.k.a Pongie) and a kitten Bilbi, a mascot of Habitat, welcomed us with open arms.

-

BUT it could be more than this..

-

The forms of actions should be various...

-

All-together!

+

Ah yea, a group of wasps as well!

+
+
+ +
+
+
+

Our first workshop chatty, messy, sticky, tsss... was planned to happen two days later. + What we wanted to do with artists in Habitat is creating a temporary platform to make collective publications into two different formats;
+ 1) a format of a book through relay binding
+ 2) a format of a dish: Buchimgae Buchimage is Korean pancake., mixing (= gluing = binding) various ingredients.

-

Collective book binding

+

The collective book binding (step-by-step):

- Procedure (step-by-step):
- a: Relay book binding (chae nami also chose tools)
- a-1) introduce what we're going to do; part one relay book binding - (10-15m)

+ a-1) introduce what we're going to do; part one relay book binding (10-15m):
+ +Start from our title and unpack the (background) story of the workshop idea. Let participants know that the workshop will recorded as soundscape and ask if they're okay with it.

- Start from our title and unpack the (background) story of the workshop - idea. Let participants know that the workshop will recorded as - soundscape and ask if they're okay with it. + +a-2) Play around with tools: (15m)
+Before get into the binding session, participants have 15 minutes to play around with the prepared tools. They can touch and use a few of them and will have the sense of materiality. +Participants sit around a table and each of them has a specific role. (e.g. Person A cuts papers, person B punches holes, person C tapes, person D folds, etc). Through the relayed tasks, they will make collaborative publication(s). During the session, they will share their thoughts and discuss the collective values in the action of binding. +

+a-3) Select a tool for each person and explain why they chose it. (10m)
+Give them a few minutes to select a tool/a role they want, and have a short round to listen to the reasons. +Have a brief overview for the outcome and share thoughts.

+a-4) A brief discussion for the arrangement of seat positions (10-20m) +: Let them think about orders/mechanisms they want to have

+a-5)The relay binding moment! (45m) While waiting for one's turn, there will be continuous daily conversation.

+a-6) Wrap up (10m):
+A round of feeling and touching the outcome. Then have a 3 minutes of cool-down moment to think how they want to name/define the outcome. Then let them write it down on sticky notes/paper (prepared by the hosts) and put them on the outcome (pub). + +[BREAK] The 1st session done! 30mins tea-time / prepare the next workshop; Buchimgae making

@@ -104,43 +122,45 @@

- Hmmm indeed...we tend to 'bind' in the end of the book making. + It's the D-day! The 28th Aug 2022, 5PM
Participants were very respectfully listening to our introduction.

-
+
+ +
+
+ +
-

- Hmmm indeed...we tend to 'bind' in the end of the book making. +

Tssssss...... Taping sounds!
+ People were busy with making their own page!

-
+

- Hmmm indeed...we tend to 'bind' in the end of the book making.
One - publication is born when every single different page gets glued - together. Oh wait, glue? + Yea...We remeber... The rustle of papers being cut, torn out, sticked....

-
- +
+ +
+
+

- Can Buchimgae Buchimage is Korean pancake. be a - publication, involving with the glue? When making the pancake, all - the different ingredients gets mingled and binded through the - batter! + When it seemed that people almost finishsed making their pages, we wanted to start the relay binding.
+ Starting from a page, it was becoming a book. Getting thicker and thicker...

@@ -148,37 +168,34 @@
-

- Also in Korea, we share Buchimgae together! We don't usually have - one pancake per person. We tear the hot pancake together,using - chopsticks..! That's the unique beauty of Buchimgae. +

Tada!!! Completed!
+ We asked for the participants to label how they want to name/call it.

-

Cooking Buchimgae (Korean pancake)

-

- a-2) Play around with tools (15m)
- Before get into the binding session, participants have 15 minutes to - play around with the prepared tools. They can touch and use a few of - them and will have the sense of materiality. Participants sit around a - table and each of them has a specific role. (e.g. Person A cuts - papers, person B punches holes, person C tapes, person D folds, etc). - Through the relayed tasks, they will make collaborative - publication(s). During the session, they will share their t +

Cooking Buchimgae together (step-by-step):

+

+ b-1) Ask ppl to explain what ingredients they brought (if they haven't brought any, then grab whatever in the fridge and ask them why they chose it)
+ b-2) Introduce what we're going to do; what is Buchimgae,
In Korea, we count the number of Buchimgae as if we count paper. We call it like Buchimgae 1 jang (=page), 2 jang...
+ + b-3) Split into a few groups. Each group makes their own Buchimgae, mixing various ingredients.
+ b-4) When mixing the ingredients, use batter that the hosts prepared. They will be mingled together.
+ b-4) Have a special ceremony to eat Buchimgae, which is tearing it all together :) (Normally a page of Buchimgae is supposed to be had together.
+ b-5) Just enjoying it!

-
+
+
+ +

- What if we create a moment of collective book binding?
We could - also host a small Buchimgae cooking session! In Korea we actually - say Buchimage one/two/three/.. page when counting the number of it. - Just like a book..! This could be another format of the (book) - binding. + Before starting the cooking session, we explained what Buchimgae is. We tried to let them know that the pancake can be an experimental format of a publication. + In Korea, the number of Buchimgae is counted as a page (of a book). We call it like Buchimgae 1,2,3 jang (=page)...

@@ -187,8 +204,7 @@

- Aha, everyone makes their own pages.
- Then bind them in a relay format?! + Floor, one of the participants, were cutting a tomato! That was juicy.

@@ -197,40 +213,31 @@

- Maybe it would have been nicer if we have the participants to sit in - mixed composition. -

-

- Some participants were already close eacch other and mainly spoke in - Italian in their own group. + Another group seemed to create a concept of their pancake as a scenery of Tredozio. The orange sky and green fields...

-
+
+
+ +

- Maybe it would have been nicer if we have the participants to sit in - mixed composition. -

-

- Some participants were already close eacch other and mainly spoke in - Italian in their own group. + A group with Floor and Pongie decorated theirs in a super elegant way. It was just like a plate served from a high-end fine dining restaurant.

-
+
+
+ +

- Maybe it would have been nicer if we have the participants to sit in - mixed composition. -

-

- Some participants were already close eacch other and mainly spoke in - Italian in their own group. + Haha, Lino and Illo created a pancake with the face of Bilbi! Would Bilbi know this?

@@ -239,13 +246,9 @@

- Maybe it would have been nicer if we have the participants to sit in - mixed composition. -

-

- Some participants were already close eacch other and mainly spoke in - Italian in their own group. + Another pancake with their names written! It was quite a statement :)

+
@@ -253,22 +256,19 @@

- Maybe it would have been nicer if we have the participants to sit in - mixed composition. + Every group finished their pancakes. We all gathered into a dining room. Pongie was so passionate to present the pancake of his group.

- - +

- Maybe it would have been nicer if we have the participants to sit in - mixed composition. + I have a great idea!?

@@ -279,8 +279,7 @@

- Maybe it would have been nicer if we have the participants to sit in - mixed composition. + 3, 2, 1, Yayyyyy!!!! We tored a pancake together!

diff --git a/laptop_s.css b/laptop_s.css index 93842ed..090ff6c 100644 --- a/laptop_s.css +++ b/laptop_s.css @@ -1,43 +1,197 @@ @media only screen and (min-device-width: 1190px) and (max-device-width: 1440px) { .container { - width: 70%; + width: 65%; + } + .titletext { + padding-top: 2%; + } + + .title { + font-family: "Millimetre-Bold"; + } + + .diary { + width: 80%; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + row-gap: 20px; + margin: 5% auto; + } + + .part { + background-color: blanchedalmond; + } + + .part p { + font-family: "Millimetre-Light"; + font-size: 1rem; + line-height: 145.5%; + display: flex; + align-items: center; + } + + .part2, + .part3 { + background-color: transparent; + } + + .part2 img, + .part3 img { + width: 80%; + } + + .part3 img { + float: right; + } + .transition { + display: flex; + flex-direction: column; + align-items: center; + } + + .transition p { + font-family: "Millimetre-Extrablack"; + line-height: 0; + } + + .cartoon { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 5%; } .intro { width: 70%; + margin-top: 2.5%; + margin-left: auto; + margin-right: auto; + margin-bottom: 5.5%; + box-sizing: border-box; + } + + .intro h4 { + font-size: 1.2rem; + } + + .intro p { + font-size: 1rem; + line-height: 145%; + border: 1px solid black; padding: 1% 2%; } #tsss { text-decoration: underline dotted; } - .cartoon { - display: block; - background-color: aliceblue; - } - .ani img { + .cut { width: 80%; + + margin-bottom: 6.5%; } + + .ani { + /* background-color: yellow; */ + } + .text { - background-color: antiquewhite; - width: 40%; + background-color: blanchedalmond; + width: 100%; + max-width: 100%; margin-left: 0; + padding-left: 0; } - .text p { - padding: 2% 4%; + .text p, + .part p { + padding: 1% 4%; font-size: 1rem; - line-height: 135%; + line-height: 140%; } - .row3 .text, - .row5 .text { - border: 2px red solid; + .cut3 .text { + width: 50%; } - .row3 .text p, - .row5 .text p { + .cut3 .text p { + } + + #question { font-size: 1.2rem; - line-height: 0; + } + + .cut3a .text span { + cursor: pointer; + } + + #photo { + display: none; + } + + #Buchimgae { + text-decoration: dotted underline; + display: inline-block; + } + + #Buchimgaepic { + display: none; + padding: 0; + margin: 0; + width: 20%; + } + + #expl { + position: absolute; + display: none; + font-size: 0.8rem; + line-height: 1.4; + background-color: white; + color: magenta; + } + + #Buchimgaepic img { + width: 100%; + } + + .ani img, + .enrico img, + .bindtogether img, + .chaepic img, + .compopic img, + .bilbi img { + width: 75%; + border: 1px solid black; + } + + #taping, + #collectivebind, + .enrico, + .bindtogether, + #chaeexp, + .chaepic, + #compo, + .compopic, + #bilbiface, + .bilbi { + cursor: pointer; + } + + .enrico, + .bindtogether, + .chaepic, + .compopic, + .bilbi { + display: none; + } + + #taping img, + #collectivebind img, + #chaeexp img, + #compo img, + #bilbiface img { + border-style: dashed; + border-width: 1px; } }