diff --git a/fonts/Millimetre-Bold_web.woff b/fonts/Millimetre-Bold_web.woff
new file mode 100755
index 0000000..659fe31
Binary files /dev/null and b/fonts/Millimetre-Bold_web.woff differ
diff --git a/fonts/Millimetre-Bold_web.woff2 b/fonts/Millimetre-Bold_web.woff2
new file mode 100755
index 0000000..9822832
Binary files /dev/null and b/fonts/Millimetre-Bold_web.woff2 differ
diff --git a/fonts/Millimetre-Extrablack_web.woff b/fonts/Millimetre-Extrablack_web.woff
new file mode 100755
index 0000000..495ae16
Binary files /dev/null and b/fonts/Millimetre-Extrablack_web.woff differ
diff --git a/fonts/Millimetre-Extrablack_web.woff2 b/fonts/Millimetre-Extrablack_web.woff2
new file mode 100755
index 0000000..a5c035f
Binary files /dev/null and b/fonts/Millimetre-Extrablack_web.woff2 differ
diff --git a/fonts/Millimetre-Light_web.woff b/fonts/Millimetre-Light_web.woff
new file mode 100755
index 0000000..47b1217
Binary files /dev/null and b/fonts/Millimetre-Light_web.woff differ
diff --git a/fonts/Millimetre-Light_web.woff2 b/fonts/Millimetre-Light_web.woff2
new file mode 100755
index 0000000..501a3bd
Binary files /dev/null and b/fonts/Millimetre-Light_web.woff2 differ
diff --git a/fonts/Millimetre-Regular_web.woff b/fonts/Millimetre-Regular_web.woff
new file mode 100755
index 0000000..ee1fc81
Binary files /dev/null and b/fonts/Millimetre-Regular_web.woff differ
diff --git a/fonts/Millimetre-Regular_web.woff2 b/fonts/Millimetre-Regular_web.woff2
new file mode 100755
index 0000000..5cfaeed
Binary files /dev/null and b/fonts/Millimetre-Regular_web.woff2 differ
diff --git a/img/bibi-pancake_pic.jpg b/img/bibi-pancake_pic.jpg
new file mode 100644
index 0000000..aa3fad1
Binary files /dev/null and b/img/bibi-pancake_pic.jpg differ
diff --git a/img/binding_pic.jpg b/img/binding_pic.jpg
new file mode 100644
index 0000000..fa57118
Binary files /dev/null and b/img/binding_pic.jpg differ
diff --git a/img/book1_1024.png b/img/book1_1024.png
new file mode 100644
index 0000000..59cf36f
Binary files /dev/null and b/img/book1_1024.png differ
diff --git a/img/chae_pic.jpg b/img/chae_pic.jpg
new file mode 100644
index 0000000..974245b
Binary files /dev/null and b/img/chae_pic.jpg differ
diff --git a/img/index.css b/img/index.css
new file mode 100644
index 0000000..da6629a
Binary files /dev/null and b/img/index.css differ
diff --git a/img/pancake.jpg b/img/pancake.jpg
new file mode 100644
index 0000000..6916729
Binary files /dev/null and b/img/pancake.jpg differ
diff --git a/img/workshop_pic.jpg b/img/workshop_pic.jpg
new file mode 100644
index 0000000..24aaca1
Binary files /dev/null and b/img/workshop_pic.jpg differ
diff --git a/index.css b/index.css
index f01ebbd..4896999 100644
--- a/index.css
+++ b/index.css
@@ -1,3 +1,28 @@
+@font-face {
+ font-family: "Millimetre-Light";
+ src: url(./fonts/Millimetre-Light_web.woff2) format("woff2"),
+ url(./fonts/Millimetre-Light_web.woff) format("woff");
+}
+@font-face {
+ font-family: "Millimetre-Regular";
+ src: url(./fonts/Millimetre-Regular_web.woff2) format("woff2"),
+ url(./fonts/Millimetre-Regular_web.woff) format("woff");
+}
+@font-face {
+ font-family: "Millimetre-Bold";
+ src: url(./fonts/Millimetre-Bold_web.woff2) format("woff2"),
+ url(./fonts/Millimetre-Bold_web.woff) format("woff");
+}
+@font-face {
+ font-family: "Millimetre-Extrablack";
+ src: url(./fonts/Millimetre-Extrablack_web.woff2) format("woff2"),
+ url(./fonts/Millimetre-Extrablack_web.woff) format("woff");
+}
+
+* {
+ box-sizing: border-box;
+}
+
html,
body {
font-size: 16px;
@@ -8,7 +33,8 @@ body {
height: 100%;
margin: 0;
padding: 0;
- background-color: ivory;
+ background-color: white;
+ font-family: "Millimetre-Light";
/* background-image: url("./img/banjuk.png");
background-size: contain;
background-repeat: no-repeat; */
@@ -20,75 +46,66 @@ body {
display: block;
margin: 0 auto;
}
+.titletext {
+ padding-top: 2%;
+}
+
+.title {
+ font-family: "Millimetre-Bold";
+}
.diary {
- width: 100%;
- height: min-content;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- margin-bottom: 20%;
+ width: 80%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 15px;
+ row-gap: 15px;
+ margin: 5% auto;
}
.part {
- width: 22.5%;
- height: 300px;
+ background-color: blanchedalmond;
}
.part p {
+ font-family: "Millimetre-Light";
+ font-size: 1.1rem;
+ line-height: 147.5%;
display: flex;
align-items: center;
}
-.part {
- background-color: blanchedalmond;
- /* animation: circleTransform 4s; */
+.part2,
+.part3 {
+ background-color: transparent;
+}
+.part2 img,
+.part3 img {
+ display: inline-block;
+ width: 50%;
}
-#book {
- margin-right: 1%;
+.part3 img {
+ float: right;
+}
+.transition {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-#cook {
- margin-left: 1%;
- margin-top: 4%;
+.transition p {
+ font-family: "Millimetre-Extrablack";
+ line-height: 0;
}
-#book img {
- width: 37.5%;
- float: right;
- margin-top: -5%;
-}
-/* @keyframes circleTransform {
- 0% {
- border-radius: 60% 70% 90% 90%;
- background-color: blanchedalmond;
- }
- 50% {
- border-radius: 65% 90% 100% 100%;
- background-color: rgb(225, 203, 169);
- }
- 100% {
- border-radius: 100% 100% 120% 100%;
- background-color: rgb(222, 177, 108);
- }
-}
-
-@-webkit-keyframes circleTransform {
- 0% {
- border-radius: 60% 70% 90% 90%;
- background-color: blanchedalmond;
- }
- 50% {
- border-radius: 65% 90% 100% 100%;
- background-color: rgb(225, 203, 169);
- }
- 100% {
- border-radius: 100% 100% 120% 100%;
- background-color: rgb(222, 177, 108);
- }
-} */
+.cartoon {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 5%;
+}
.intro {
width: 50%;
@@ -96,26 +113,27 @@ body {
margin-left: auto;
margin-right: auto;
margin-bottom: 5.5%;
+ box-sizing: border-box;
}
.intro h4 {
}
.intro p {
- background-color: aliceblue;
border: 1px solid black;
}
#tsss {
text-decoration: underline dotted;
}
-.cartoon {
- display: block;
- background-color: aliceblue;
-}
.cut {
- width: 100%;
+ 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;
@@ -125,17 +143,18 @@ body {
.ani {
/* background-color: yellow; */
- text-align: center;
}
.ani img {
- width: 70%;
+ width: 60%;
border: 1px solid black;
}
.text {
background-color: antiquewhite;
width: 40%;
+ max-width: 40%;
margin-left: 0;
+ padding-left: 0;
}
.text p,
@@ -147,18 +166,9 @@ body {
.cut3 .text {
width: 50%;
- border-radius: 50%;
- border: 3px red solid;
- background-color: aquamarine;
- margin: 0 auto;
}
.cut3 .text p {
- text-align: center;
- font-family: Verdana, Geneva, Tahoma, sans-serif;
- font-size: 1.4rem;
- color: red;
- line-height: 0;
}
#question {
diff --git a/index.html b/index.html
index ec8d341..70f7e09 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,14 @@
-
chatty, messy, sticky, tsss...
-
A diary from Habitat (Tredozio, IT), August 2022
+
+
chatty, messy, sticky, tsss...
+ A diary from Habitat (Tredozio, IT), August 2022
+
+
-
+
"Yesterday I published something. Ah wait, not 'I', I mean 'we'. I
was with 11 other people and we made our own little book then bound
@@ -28,11 +31,19 @@
But we persistently and stubbornly stayed together. In the end, what
we created was a heavy-fat-ugly-cute book thingy."
-
-
+
+
+
+
+
+
+
+
+
+
-
"3, 2, 1, Yayyyy! We
+ "3, 2, 1, Yayyyy! We
cheered and celebrated our collaborative Buchimgae (Korean pancake)
cooking. Sharing one Buchimage altogether, we tore it into pieces.
It was GOOD. The pancake batter was a glue, as it hugged all the
@@ -40,180 +51,240 @@
became closer in the end. Tssss... the sizzle, the chatty and the
festive sounds still lingers in my ears..."
-
+
-
-
-
-
-
It was orange evening that we arrived at 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.
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
BUT it could be more than this..
+
The forms of actions should be various...
+
All-together!
+
-
-
-
-
+
+
Collective book binding
- 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.
+ 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)
+
+ 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.
-
-
-
-
-
BUT it could be more than this..
-
The forms of actions should be various...
-
All-together!
+
+
+
+
+
+ Hmmm indeed...we tend to 'bind' in the end of the book making.
+
+
-
-
-
Collective book binding
-
- 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)
-
- 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.
-
-
+
+
+
+
+ Hmmm indeed...we tend to 'bind' in the end of the book making.
+
+
+
-
-
-
-
- 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?
-
+
+
+
+
+ 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?
+
+
-
-
-
-
+
+
+
+
+
+
+ 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!
+
+
-
-
- 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!
-
+
+
+
+
+
+ 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.
+
+
-
-
-
-
+
+
Cooking Buchimgae (Korean pancake)
- 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.
+ 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 (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
-
-
+
+
+
+
+ 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.
+
+
+
-
-
-
-
- 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.
-
+
+
+
+
+ Aha, everyone makes their own pages.
+ Then bind them in a relay format?!
+
+
-
-
-
-
-
- Aha, everyone makes their own pages.
- Then bind them in a relay format?!
-
+
+
+
+
+ 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.
+
+
-
-
-
-
-
- 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.
-
+
+
+
+
+ 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.
+
+
-
-
-
-
-
- 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.
-
+
+
+
+
+ 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.
+
+
-
-
-
-
-
- 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.
-
+
+
+
+
+ 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.
+
+
-
-
-
-
-
- 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.
-
+
+
+
+
+ Maybe it would have been nicer if we have the participants to sit in
+ mixed composition.
+
+
-
+
+
+
+
+
+
+
+
+
+ Maybe it would have been nicer if we have the participants to sit in
+ mixed composition.
+
+
+
+
+
+
+
+
+
+
+ Maybe it would have been nicer if we have the participants to sit in
+ mixed composition.
+
+
+
+