text and layout change

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 Enrico = document.querySelector(".enrico");
-const BuchimgaePhoto = document.getElementById("photo");
+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 () {
+Tape.addEventListener("click", function () {
-  BuchimgaeIllu.style.display = "none";
+  Tape.style.display = "none";
-  BuchimgaePhoto.style.display = "inline-block";
+  Enrico.style.display = "block";
 });
 
-BuchimgaePhoto.addEventListener("click", function () {
+Enrico.addEventListener("click", function () {
-  BuchimgaePhoto.style.display = "none";
+  Enrico.style.display = "none";
-  BuchimgaeIllu.style.display = "inline-block";
+  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";
 });

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;
+  background-color: blanchedalmond;
-  width: 40%;
+  width: 50%;
   max-width: 40%;
   margin-left: 0;
   padding-left: 0;
@@ -159,9 +154,9 @@ body {
 
 .text p,
 .part p {
-  padding: 2% 4%;
+  padding: 1% 4%;
-  font-size: 1rem;
+  font-size: 1.05rem;
-  line-height: 135%;
+  line-height: 140%;
 }
 
 .cut3 .text {
@@ -175,8 +170,7 @@ body {
   font-size: 1.2rem;
 }
 
-.cut5 .text span,
+.cut3a .text span {
-.cut5 .ani {
   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;
+}

index.html

@@ -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.
+              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>
-              It was orange evening that we arrived at Habitat.</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
+              Our friend Jacopo (a.k.a Pongie) and a kitten Bilbi, a mascot of Habitat, welcomed us with open arms.
-              with an idea of working on some documents in Adobe applications,
-              then print, then glue.
             </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>Ah yea, a group of wasps as well! </p>
-            <p>The forms of actions should be various...</p>
+          </div>
-            <p>All-together!</p>
+        </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-1) introduce what we're going to do; part one relay book binding (10-15m):<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
+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>
-            (10-15m)<br /><br />
 
-            Start from our title and unpack the (background) story of the workshop
+
-            idea. Let participants know that the workshop will recorded as
+a-2) Play around with tools: (15m)<br>
-            soundscape and ask if they're okay with it.
+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>
+            <p> Tssssss...... Taping sounds!<br>
-              Hmmm indeed...we tend to 'bind' in the end of the book making.
+              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
+              Yea...We remeber... The rustle of papers being cut, torn out, sticked....
-              publication is born when every single different page gets glued
-              together. <span id="question">Oh wait, glue?</span>
             </p>
           </div>
         </div>
 
         <div class="cut cut5">
-          <div class="ani">
+          <div class="ani" id = "collectivebind">
-            <img src="./img/binding_1024.jpg" />
+            <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
+              When it seemed that people almost finishsed making their pages, we wanted to start the relay binding.<br>
-              ><span id="Buchimgaepic"> <img src="./img/buchimgae_s.png" /></span
+              Starting from a page, it was becoming a book. Getting thicker and thicker...
-              ><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!
             </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>
+            <p>Tada!!! Completed!<br>
-              Also in Korea, we share Buchimgae together! We don't usually have
+              We asked for the participants to label how they want to name/call it.
-              one pancake per person. We tear the hot pancake together,using
-              chopsticks..! That's the unique beauty of Buchimgae.
             </p>
           </div>
         </div>
 
         <div class="intro intro2">
-          <h4>Cooking Buchimgae (Korean pancake)</h4>
+          <h4>Cooking Buchimgae together (step-by-step):</h4>
-          <p>
+          <p>        
-            a-2) Play around with tools (15m)<br />
+            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>
-            Before get into the binding session, participants have 15 minutes to
+            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> 
-            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
+            b-3) Split into a few groups. Each group makes their own Buchimgae, mixing various ingredients.<br>
-            table and each of them has a specific role. (e.g. Person A cuts
+            b-4) When mixing the ingredients, use batter that the hosts prepared. They will be mingled together.<br> 
-            papers, person B punches holes, person C tapes, person D folds, etc).
+            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> 
-            Through the relayed tasks, they will make collaborative
+            b-5) Just enjoying it!
-            publication(s). During the session, they will share their t
           </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
+              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.
-              also host a small Buchimgae cooking session! In Korea we actually
+              In Korea, the number of Buchimgae is counted as a page (of a book). We call it like Buchimgae 1,2,3 jang (=page)...
-              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.
             </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 />
+              Floor, one of the participants, were cutting a tomato! That was juicy.
-              Then bind them in a relay format?!
             </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
+             Another group seemed to create a concept of their pancake as a scenery of Tredozio. The orange sky and green fields...
-              mixed composition.
-            </p>
-            <p>
-              Some participants were already close eacch other and mainly spoke in
-              Italian in their own group.
             </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
+            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.
-              mixed composition.
-            </p>
-            <p>
-              Some participants were already close eacch other and mainly spoke in
-              Italian in their own group.
             </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
+             Haha, Lino and Illo created a pancake with the face of Bilbi! Would Bilbi know this?
-              mixed composition.
-            </p>
-            <p>
-              Some participants were already close eacch other and mainly spoke in
-              Italian in their own group.
             </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
+              Another pancake with their names written! It was quite a statement :)
-              mixed composition.
-            </p>
-            <p>
-              Some participants were already close eacch other and mainly spoke in
-              Italian in their own group.
             </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
+              Every group finished their pancakes. We all gathered into a dining room. Pongie was so passionate to present the pancake of his group.
-              mixed composition.
             </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">
-            <img src = "./img/i-have-great-idea_1024.jpg" id = "pongieidea" style = "display:none;">
           </div>
 
           <div class="text">
             <p>
-              Maybe it would have been nicer if we have the participants to sit in
+              I have a great idea!?
-              mixed composition.
             </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
+              3, 2, 1, Yayyyyy!!!! We tored a pancake together!
-              mixed composition.
             </p>
           </div>
         </div>  

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;
+    background-color: blanchedalmond;
-    width: 40%;
+    width: 100%;
+    max-width: 100%;
     margin-left: 0;
+    padding-left: 0;
   }
 
-  .text p {
+  .text p,
-    padding: 2% 4%;
+  .part p {
+    padding: 1% 4%;
     font-size: 1rem;
-    line-height: 135%;
+    line-height: 140%;
   }
 
-  .row3 .text,
+  .cut3 .text {
-  .row5 .text {
+    width: 50%;
-    border: 2px red solid;
   }
 
-  .row3 .text p,
+  .cut3 .text p {
-  .row5 .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;
   }
 }