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. +

+
+
+