text and layout change

master
franklin004 2 years ago
parent aa7ea8329d
commit a2bb4ae6b8

@ -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";
});

BIN
img/.DS_Store vendored

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 66 KiB

@ -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;
}

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Testinggg</title>
<title>chatty, messy, sticky, tsss...In Habitat</title>
<link rel="stylesheet" href="index.css" media="only screen" />
<link
rel="stylesheet"
@ -61,9 +61,8 @@
<div class="ani"><img src="./img/ex.jpg" /></div>
<div class="text">
<p>Rotterdam to Eindhoven, Eindhoven to Bologna, Bologna to Faenza, Faenza to Tredozio...<br>
Our journey from the Netherlands to Italy was made through winding roads.
It was orange evening that we arrived at Habitat.</p>
Our journey from the Netherlands to Italy was made through winding roads. When we landed to <a href ="https://habitattt.it/">Habitat</a>,
the sky was colored into orange.</p>
</div>
</div>
@ -71,32 +70,51 @@
<div class="ani"><img src="./img/bibi_768.jpg" /></div>
<div class="text">
<p>
If we think of the word <i>publishing</i>, 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.
</p>
</div>
</div>
<div class="cut cut3">
<div class="ani"><img src="./img/wasp_1024.jpg" /></div>
<div class="text">
<p>BUT it could be more than this..</p>
<p>The forms of actions should be various...</p>
<p>All-together!</p>
<p>Ah yea, a group of wasps as well! </p>
</div>
</div>
<div class="cut cut3a">
<div class="ani"><img src="./img/habitat_process2.jpg" /></div>
<div class="text">
<p>Our first workshop <i>chatty, messy, sticky, tsss...</i> 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;<br>
1) a format of a book through relay binding<br>
2) a format of a dish: <span id="Buchimgae">Buchimgae</span
><span id="Buchimgaepic"> <img src="./img/buchimgae_s.png" /></span
><span id="expl">Buchimage is Korean pancake.</span>, mixing (= gluing = binding) various ingredients.</p>
</div>
</div>
<div class="intro intro1">
<h4>Collective book binding</h4>
<h4>The collective book binding (step-by-step):</h4>
<p>
<b>Procedure (step-by-step):</b><br />
a: Relay book binding (chae nami also chose tools)<br />
a-1) introduce what we're going to do; part one relay book binding
(10-15m)<br /><br />
a-1) introduce what we're going to do; part one relay book binding (10-15m):<br>
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.<br><br>
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)<br>
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.
<br><br>
a-3) Select a tool for each person and explain why they chose it. (10m)<br>
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.<br><br>
a-4) A brief discussion for the arrangement of seat positions (10-20m)
: Let them think about orders/mechanisms they want to have<br><br>
a-5)The relay binding moment! (45m) While waiting for one's turn, there will be continuous daily conversation.<br><br>
a-6) Wrap up (10m):<br>
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
</p>
</div>
@ -104,43 +122,45 @@
<div class="ani"><img src = "./img/workshop_pic.jpg"></div>
<div class="text">
<p>
Hmmm indeed...we tend to 'bind' in the end of the book making.
It's the D-day! The 28th Aug 2022, 5PM<br>Participants were very respectfully listening to our introduction.
</p>
</div>
</div>
<div class = "cut cut3c">
<div class="ani"><img src = "./img/taping-recording_1024.jpg"></div>
<div class="ani" id = "taping">
<img src = "./img/taping-recording_1024.jpg">
</div>
<div class = "enrico">
<img src = "./img/binding_pic.jpg">
</div>
<div class="text">
<p>
Hmmm indeed...we tend to 'bind' in the end of the book making.
<p> Tssssss...... Taping sounds!<br>
People were busy with making their own page!
</p>
</div>
</div>
<div class="cut cut4">
<div class="ani"><img src="./img/binding-2_1024.jpg" /></div>
<div class="ani"><img src="./img/binding_1024.jpg" /></div>
<div class="text">
<p>
Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
publication is born when every single different page gets glued
together. <span id="question">Oh wait, glue?</span>
Yea...We remeber... The rustle of papers being cut, torn out, sticked....
</p>
</div>
</div>
<div class="cut cut5">
<div class="ani">
<img src="./img/binding_1024.jpg" />
<div class="ani" id = "collectivebind">
<img src="./img/binding-2_1024.jpg" />
</div>
<div class = "bindtogether">
<img src ="./img/bind-together.jpg">
</div>
<div class="text">
<p>
Can <span id="Buchimgae">Buchimgae</span
><span id="Buchimgaepic"> <img src="./img/buchimgae_s.png" /></span
><span id="expl">Buchimage is Korean pancake.</span> 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.<br>
Starting from a page, it was becoming a book. Getting thicker and thicker...
</p>
</div>
</div>
@ -148,37 +168,34 @@
<div class="cut cut6">
<div class="ani"><img src="./img/label_book_1024.jpg" /></div>
<div class="text">
<p>
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.
<p>Tada!!! Completed!<br>
We asked for the participants to label how they want to name/call it.
</p>
</div>
</div>
<div class="intro intro2">
<h4>Cooking Buchimgae (Korean pancake)</h4>
<p>
a-2) Play around with tools (15m)<br />
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
<h4>Cooking Buchimgae together (step-by-step):</h4>
<p>
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)<br>
b-2) Introduce what we're going to do; what is Buchimgae,<BR> In Korea, we count the number of Buchimgae as if we count paper. We call it like Buchimgae 1 jang (=page), 2 jang...<br>
b-3) Split into a few groups. Each group makes their own Buchimgae, mixing various ingredients.<br>
b-4) When mixing the ingredients, use batter that the hosts prepared. They will be mingled together.<br>
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.<br>
b-5) Just enjoying it!
</p>
</div>
<div class="cut cut7">
<div class="ani"><img src="./img/chae-explain_768.jpg" /></div>
<div class="ani" id = "chaeexp"><img src="./img/chae-explain_768.jpg" /></div>
<div class = "chaepic">
<img src ="./img/chae_pic.jpg">
</div>
<div class="text">
<p>
What if we create a moment of collective book binding?<br />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)...
</p>
</div>
</div>
@ -187,8 +204,7 @@
<div class="ani"><img src="./img/floor-tomato_768.jpg" /></div>
<div class="text">
<p>
Aha, everyone makes their own pages.<br />
Then bind them in a relay format?!
Floor, one of the participants, were cutting a tomato! That was juicy.
</p>
</div>
</div>
@ -197,40 +213,31 @@
<div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></div>
<div class="text">
<p>
Maybe it would have been nicer if we have the participants to sit in
mixed composition.
</p>
<p>
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...
</p>
</div>
</div>
<div class="cut cut10">
<div class="ani"><img src="./img/compositing_768.jpg" /></div>
<div class="ani" id = "compo"><img src="./img/compositing_768.jpg" /></div>
<div class = "compopic">
<img src ="./img/pancake.jpg">
</div>
<div class="text">
<p>
Maybe it would have been nicer if we have the participants to sit in
mixed composition.
</p>
<p>
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.
</p>
</div>
</div>
<div class="cut cut11">
<div class="ani"><img src="./img/bibi-pancake_768.jpg" /></div>
<div class="ani" id="bilbiface"><img src="./img/bibi-pancake_768.jpg" /></div>
<div class = "bilbi">
<img src ="./img/bibi-pancake_pic.jpg">
</div>
<div class="text">
<p>
Maybe it would have been nicer if we have the participants to sit in
mixed composition.
</p>
<p>
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?
</p>
</div>
</div>
@ -239,13 +246,9 @@
<div class="ani"><img src="./img/lino-ilo_768.jpg" /></div>
<div class="text">
<p>
Maybe it would have been nicer if we have the participants to sit in
mixed composition.
</p>
<p>
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 :)
</p>
</div>
</div>
@ -253,22 +256,19 @@
<div class = "ani"><img src = "./img/pongie-explaining_1024.jpg"></div>
<div class="text">
<p>
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.
</p>
</div>
</div>
<div class = "cut cut14">
<div class = "ani">
<img src = "./img/pongie-explaining_1024.jpg" id = "pongieexplain" />
<img src = "./img/i-have-great-idea_1024.jpg" id = "pongieidea" style = "display:none;">
<img src = "./img/i-have-great-idea_1024.jpg" id = "pongieidea">
</div>
<div class="text">
<p>
Maybe it would have been nicer if we have the participants to sit in
mixed composition.
I have a great idea!?
</p>
</div>
</div>
@ -279,8 +279,7 @@
</div>
<div class="text">
<p>
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!
</p>
</div>
</div>

@ -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;
}
}

Loading…
Cancel
Save