added new illustration and adjusted layout

master
franklin004 2 years ago
parent adf7ba5f76
commit 9940820014

BIN
img/.DS_Store vendored

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 658 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 354 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

Before

Width:  |  Height:  |  Size: 790 KiB

After

Width:  |  Height:  |  Size: 790 KiB

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Before

Width:  |  Height:  |  Size: 680 KiB

After

Width:  |  Height:  |  Size: 680 KiB

Before

Width:  |  Height:  |  Size: 469 KiB

After

Width:  |  Height:  |  Size: 469 KiB

Before

Width:  |  Height:  |  Size: 772 KiB

After

Width:  |  Height:  |  Size: 772 KiB

Before

Width:  |  Height:  |  Size: 844 KiB

After

Width:  |  Height:  |  Size: 844 KiB

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 134 KiB

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Before

Width:  |  Height:  |  Size: 172 KiB

After

Width:  |  Height:  |  Size: 172 KiB

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 124 KiB

Before

Width:  |  Height:  |  Size: 917 KiB

After

Width:  |  Height:  |  Size: 917 KiB

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 159 KiB

Before

Width:  |  Height:  |  Size: 868 KiB

After

Width:  |  Height:  |  Size: 868 KiB

Before

Width:  |  Height:  |  Size: 2.0 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

@ -8,7 +8,10 @@ body {
height: 100%;
margin: 0;
padding: 0;
background-color: white;
background-color: ivory;
/* background-image: url("./img/banjuk.png");
background-size: contain;
background-repeat: no-repeat; */
}
.container {
@ -19,9 +22,6 @@ body {
}
.diary {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: min-content;
display: flex;
@ -92,10 +92,10 @@ body {
.intro {
width: 50%;
margin-top: 36%;
margin-top: 2.5%;
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
margin-bottom: 5.5%;
}
.intro h4 {
@ -113,7 +113,7 @@ body {
background-color: aliceblue;
}
.row {
.cut {
width: 100%;
height: auto;
display: flex;
@ -145,7 +145,7 @@ body {
line-height: 135%;
}
.row3 .text {
.cut3 .text {
width: 50%;
border-radius: 50%;
border: 3px red solid;
@ -153,7 +153,7 @@ body {
margin: 0 auto;
}
.row3 .text p {
.cut3 .text p {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.4rem;
@ -165,14 +165,11 @@ body {
font-size: 1.2rem;
}
.row5 .text span,
.row5 .ani {
.cut5 .text span,
.cut5 .ani {
cursor: pointer;
}
#illu {
}
#photo {
display: none;
}

@ -43,40 +43,16 @@
</div>
</div>
<div class="intro">
<h4>Behind scenes and process</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 />
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 />
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
</p>
</div>
<div class="cartoon">
<div class="row row1">
<div class="ani"><img src="./img/question.jpg" /></div>
<div class="cartoon"></div>
<div class="cut cut1">
<div class="ani"><img src="./img/ex.jpg" /></div>
<div class="text">
<p>
One munday evening, we were talking about random topics then ended
up asking <i>what publishing really is</i>?
</p>
<p>It was orange evening that we arrived at Habitat.</p>
</div>
</div>
<div class="row row2">
<div class="ani"><img src="./img/cliche2.png" /></div>
<div class="cut cut2">
<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
@ -85,16 +61,31 @@
</p>
</div>
</div>
<div class="row row3">
<!-- <div class="ani"></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>
</div>
</div>
<div class="row row4">
<div class="ani"><img src="./img/pancake1.png" /></div>
<div class="intro intro1">
<h4>Collective book binding</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 />
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.
</p>
</div>
<div class="cut cut4">
<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
@ -103,16 +94,15 @@
</p>
</div>
</div>
<div class="row row5">
<div class="cut cut5">
<div class="ani">
<img src="./img/pancake2.jpg" id="illu" />
<img src="./img/buchimgae_l.png" id="photo" />
<img src="./img/binding-2_1024.jpg" />
</div>
<div class="text">
<p>
Can <span id="Buchimgae">Buchimgae</span
><span id="Buchimgaepic">
<img src="./img/buchimgae_s.png" /></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
@ -121,8 +111,8 @@
</div>
</div>
<div class="row row6">
<div class="ani"><img src="./img/sharing.jpg" /></div>
<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
@ -131,21 +121,36 @@
</p>
</div>
</div>
<div class="row row7">
<div class="ani"><img src="./img/habitat_process.jpg" /></div>
<div class="text">
<div class="intro intro2">
<h4>Cooking Buchimgae (Korean pancake)</h4>
<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.
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
</p>
</div>
<div class="cut cut7">
<div class="ani"><img src="./img/chae-explain_768.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.
</p>
</div>
</div>
<div class="row row8">
<div class="ani"><img src="./img/relay.png" /></div>
<div class="cut cut8">
<div class="ani"><img src="./img/floor-tomato_768.jpg" /></div>
<div class="text">
<p>
Aha, everyone makes their own pages.<br />
@ -154,8 +159,50 @@
</div>
</div>
<div class="row row8">
<div class="ani"><img src="./img/italian.png" /></div>
<div class="cut cut9">
<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.
</p>
</div>
</div>
<div class="cut cut10">
<div class="ani"><img src="./img/compositing_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.
</p>
</div>
</div>
<div class="cut cut11">
<div class="ani"><img src="./img/bibi-pancake_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.
</p>
</div>
</div>
<div class="cut cut12">
<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

Loading…
Cancel
Save