diff --git a/backplaces/css/style_index.css b/backplaces/css/style_index.css index d5dd684..8595a17 100644 --- a/backplaces/css/style_index.css +++ b/backplaces/css/style_index.css @@ -1,7 +1,11 @@ body { background-color: rgb(53, 67, 196); - min-height: 100vH; + min-height: 100vh; font-family: 'Redaction-Regular', serif; + padding: 0.2rem; + display: flex; + justify-content: center; + align-items: center; } .container { @@ -39,33 +43,52 @@ body { display: flex; flex-wrap: wrap; justify-content: center; - padding: 20px; + align-items: center; } -.photos, img { - height: 250px; +.img-container { + flex: 0 0 250px; + display: flex; + flex-direction: column; + align-items: center; margin: 10px; - margin-top: 10px; - flex: auto; + text-decoration: none; } -.img-container { - position: relative; - margin: 10px; +.img-container:nth-child(2) { + order: 3; } -.img-container img { - display: block; +.img { + height: 250px; + width: auto; } -.img-container .caption { - position: absolute; - left: 0; - width: 100%; - text-align: center; +.caption { + display: flex; + align-items: center; + justify-content: center; + padding-top: 1rem; + font-size: 2rem; + font-family: 'Redaction-Regular'; color: #FCF6F1ff; - font-size: 1.5rem; + opacity: 0; + transition: opacity 0.3s ease; +} + +.img-container:hover .caption { + opacity: 1; +} + + +.caption { + display: flex; + align-items: center; + justify-content: center; + padding-top: 1rem; + font-size: 2rem; font-family: 'Redaction-Regular'; + color: #FCF6F1ff; opacity: 0; transition: opacity 0.3s ease; } @@ -74,8 +97,25 @@ body { opacity: 1; } +/* Ensures the second image is vertically aligned */ .img2 { - margin-top: 250px; + margin-top: 10px; +} + +.caption { + display: flex; + align-items: center; + justify-content: center; + padding-top: 1rem; + font-size: 2rem; + font-family: 'Redaction-Regular'; + color: #FCF6F1ff; + opacity: 0; + transition: opacity 0.3s ease; +} + +.img-container:hover .caption { + opacity: 1; } .letterBox { diff --git a/backplaces/index.html b/backplaces/index.html index 278a113..2038906 100644 --- a/backplaces/index.html +++ b/backplaces/index.html @@ -25,20 +25,20 @@
Seeing how these words, interpretations of a physical object were so diff erent to each other was transcendental. In this thesis, I am excited to share my understanding of knots with you. My three words for @@ -175,15 +186,21 @@ strings, will be representing the relation between theories and my ownexperiences/motivations. Hitches which are knots that are formed around a solid object, such as a spar, post, or ring will be representing the evidence or data I have collected on the subject. We -move on now with the working end and make some loops! ## HOW TO CHOOSE -YOUR STRING This map will reveal your mode of reading. The order of -reading will be indicated with a loop sign Please hold a string in your -hand as you read the text and make knots or loops as you weave through -the reading as an exercise for concrete thinking. See you at the -standing end! and a number on top of the sign with a color. This is the -numeric order you can follow to read the thesis.
-This map will reveal your mode of reading. The order of reading will +be indicated with a loop sign Please hold a string in your hand as you +read the text and make knots or loops as you weave through the reading +as an exercise for concrete thinking. See you at the standing end! and a +number on top of the sign with a color. This is the numeric order you +should follow to read the thesis, if you choose to read with a mode. +Every reader starts from 1 and continues until 12, with a consecutive numeric +order, according to their color/mode.
+My desire to write a children’s book about grief and memory ignited when I was studying in college and doing an internship in a publishing @@ -774,35 +791,55 @@ feel like my interest and desire to discover new ways of writing, reading and experiencing literature is ongoing and it was a beautiful journey so far. I am looking forward to making more knots on this long and mysterious string at hand.
-Cope, B. and Kalantzis, M. (2009) ‘“multiliteracies”: New Literacies,
-new learning’, Pedagogies: An International Journal, 4(3), pp. 164–195.
-doi:10.1080/15544800903076044.
Dettore, E. (2002) “Children’s
-emotional GrowthAdults’ role as emotional archaeologists,” Childhood
-education, 78(5), pp. 278–281. doi: 10.1080/00094056.2002.10522741.
-Ingold, T. (2015) The life of lines.London, England: Routledge.
-Lawrence, R. L. and Paige, D. S. (2016) “What our ancestors knew:
-Teaching and learning through storytelling: What our ancestors knew:
-Teaching and learning through storytelling,” New directions for adult
-and continuing education, 2016(149), pp. 63–72. doi:
-10.1002/ace.20177.
-
Papert, S. and Papert, S. A. (2020) Mindstorms (revised): Children,
-computers, and powerful ideas. London, England: Basic Books.
Ryan,
-M.-L. (2009) “From narrative games to playable stories: Toward a poetics
-of interactive narrative,” StoryWorlds A Journal of Narrative Studies,
-1(1), pp. 43–59. doi: 10.1353/stw.0.0003.
Smeets, D. and Bus, A.
-(2013) “Picture Storybooks Go Digital: Pros and Cons,” in Quality
-Reading Instruction in the Age of Common Core Standards. International
-Reading Association, pp. 176–189.
Strohecker, C. (ed.) (1978) Why
-knot? MIT.
The Effect of Multimodality in Increasing Motivation and
-Collaboration among 4th CSE EFL Students (no date).
Turkle, S.
-(ed.) (2014) Evocative objects: Things we think with. MIT Press.
-Urton, M. M. &. (2018) The khipu code: the knotty mystery of the
-Inkas’ 3D records, aeon. Available at: https://
-aeon.co/ideas/the-khipu-code-the-knotty-mystery-of-the-inkas-3d-records.
-
Vega, N. (2022) Codes in Knots. Sensing Digital Memories, The Whole
-Life. Available at: https://wholelife.hkw.de/
-codes-in-knots-sensing-digital-memories/.