side note things

irmak/thesis.md

@@ -189,7 +189,7 @@ living matter in us that keeps pulsing. So then I started researching bees and t
 read Alan Watts, Alan Lightman, Emily Dickinson, Maurice Sendak, Meghan O’Rourke, Oliver
 Sacks, Joanna Macy, Rilke, Montaigne and theories on order in chaos, correlative vision, harmony
 of contained conflicts and the mortality paradox. I wrote a lot and erased a lot and fairly
-figured out the wisdom of not knowing things.
+figured out the wisdom of not knowing things.<sup><span class="margin-note"><img src="../irmak/hitch.png">I wrote and deleted and rewrote the story 3 times already.</span></sup>
 
 Years passed and I wrote and deleted and rewrote the story that I am working on to make interactive
 today so many times and was waiting on it because it always felt incomplete. In a way it
@@ -214,7 +214,7 @@ me realise that it doesn’t have to be or even can be a perfect story.
 In the end with the experience I had with loss, I believe the story turned out to be an ode to
 remembering or might I say an ode to not being able to forget or an ode to the fear of forgetting
 
-### Loop 2
+### Loop 2 <sup><span class="margin-note"><div>9 <img src="../irmak/loop.png"></div><div>11<img src="../irmak/loop.png"></div><div>8 <img src="../irmak/loop.png"></div></div></span></sup>
 The effect of storytelling knowledge on kids’ development and creativity. What can
 we learn from open ended and multiple ending stories?
 

print/booklet.template.html

@@ -26,6 +26,7 @@
     <div id="contenteo">
 	{% for section in content %}
    	 {% if loop.index > 0 %}
+   	 <!--<section id="section-{{ loop.index + 1 }}" class="section{% if loop.index == 6 %} loops{% endif %}">-->
    	 <section id="section-{{ loop.index + 1 }}" class="section">
        		 {{ section }}
     	</section>

print/fairleads.css

@@ -0,0 +1,28 @@
+.loops{
+	margin-left: -15mm;
+	padding-left: 40mm;
+	background-image: url('../img/loopstest.png');
+	background-size: 35mm 180mm;
+	background-repeat: no-repeat;
+}
+.pagedjs_right_page .loops{
+	margin-left: 0;
+	margin-right:-15mm;
+	padding-left:0;
+	padding-right: 40mm;
+	background-position:right;
+}
+.loops .margin-note{
+	background-color: white;
+        position: absolute;
+	margin-left: 15mm;
+	padding: 5mm 0;
+/*	text-align-last: justify;*/
+}
+.loops .note-call{
+	display: none;
+}
+.loops .note-marker::before{
+display: none;
+}
+

print/index.html

@@ -94,6 +94,7 @@
     <div id="contenteo">
 	
    	 
+   	 <!--<section id="section-2" class="section">-->
    	 <section id="section-2" class="section">
        		 <h1 id="introduction">Introduction</h1>
 <h2 id="act-1.">Act 1.</h2>
@@ -142,6 +143,7 @@ touched.</p>
    	 
     
    	 
+   	 <!--<section id="section-3" class="section">-->
    	 <section id="section-3" class="section">
        		 <h1 id="water-bodies">&lt;?water bodies&gt;</h1>
 <h3 id="a-narrative-exploration-of-divergent-digital-intimacies">A
@@ -854,6 +856,7 @@ University of Nebraska Press.</p>
    	 
     
    	 
+   	 <!--<section id="section-4" class="section">-->
    	 <section id="section-4" class="section">
        		 <h1 id="backplaces">Backplaces</h1>
 <p>vulnerable-interfaces.xpub.nl/backplaces</p>
@@ -965,6 +968,7 @@ performance.</figcaption>
    	 
     
    	 
+   	 <!--<section id="section-5" class="section">-->
    	 <section id="section-5" class="section">
        		 <h1 id="performing-the-bureaucratic-borderlines">Performing the
 Bureaucratic Border(line)s</h1>
@@ -1875,6 +1879,7 @@ and solidarity in the wake of Europe’s refugee crisis. London: Rowman
    	 
     
    	 
+   	 <!--<section id="section-6" class="section">-->
    	 <section id="section-6" class="section">
        		 <h1 id="talking-documents">Talking Documents</h1>
 <h3 id="section"></h3>
@@ -1973,6 +1978,7 @@ archive, published in the graduation exhibition of XPUB in 2024.</p>
    	 
     
    	 
+   	 <!--<section id="section-7" class="section loops">-->
    	 <section id="section-7" class="section">
        		 <h1 id="fair-leads">Fair Leads</h1>
 <h3
@@ -2154,8 +2160,8 @@ numeric order, according to their color/mode.
 <img src="../images/../images/../irmak/map.png"
     alt="knot words from Leeszaal" />
 </figure>
-<div class="loops">
+<section id="working-end" class="loops">
-<h2 id="working-end">Working End</h2>
+<h2>Working End</h2>
 <h3 id="loop-1">Loop 1</h3>
 <h3 id="why-am-i-doing-this">Why am I doing this?</h3>
 <p>My desire to write a children’s book about grief and memory ignited
@@ -2186,7 +2192,9 @@ Emily Dickinson, Maurice Sendak, Meghan O’Rourke, Oliver Sacks, Joanna
 Macy, Rilke, Montaigne and theories on order in chaos, correlative
 vision, harmony of contained conflicts and the mortality paradox. I
 wrote a lot and erased a lot and fairly figured out the wisdom of not
-knowing things.</p>
+knowing things.<sup><span
+class="margin-note"><img src="../images/../images/../irmak/hitch.png">I wrote and deleted
+and rewrote the story 3 times already.</span></sup></p>
 <p>Years passed and I wrote and deleted and rewrote the story that I am
 working on to make interactive today so many times and was waiting on it
 because it always felt incomplete. In a way it will always be incomplete
@@ -2215,10 +2223,20 @@ story.</p>
 <p>In the end with the experience I had with loss, I believe the story
 turned out to be an ode to remembering or might I say an ode to not
 being able to forget or an ode to the fear of forgetting</p>
-<h3 id="loop-2">Loop 2</h3>
+### Loop 2 <sup><span class="margin-note">
-<p>The effect of storytelling knowledge on kids’ development and
+<div>
-creativity. What can we learn from open ended and multiple ending
+9 <img src="../images/../images/../irmak/loop.png">
-stories?</p>
+</div>
+<div>
+11<img src="../images/../images/../irmak/loop.png">
+</div>
+<div>
+8 <img src="../images/../images/../irmak/loop.png">
+</div>
+</section>
+<p></span></sup> The effect of storytelling knowledge on kids’
+development and creativity. What can we learn from open ended and
+multiple ending stories?</p>
 <p>ability to form basic stories or to express their emotions through
 fictional characters or events. Children are not born with a wide
 vocabulary of emotions and expressions. They learn how to read, mimic
@@ -2782,6 +2800,7 @@ codes-in-knots-sensing-digital-memories/.</p>
    	 
     
    	 
+   	 <!--<section id="section-8" class="section">-->
    	 <section id="section-8" class="section">
        		 <hr />
 <h1 id="wink">Wink!</h1>
@@ -2904,6 +2923,7 @@ alt="“A screenshot from Wink!”" />
    	 
     
    	 
+   	 <!--<section id="section-9" class="section">-->
    	 <section id="section-9" class="section">
        		 <h1 id="section">⊞</h1>
 <hr />
@@ -3860,6 +3880,7 @@ pp. 1–54; 21, no. 1 (1905), pp. 1–110.</p>
    	 
     
    	 
+   	 <!--<section id="section-10" class="section">-->
    	 <section id="section-10" class="section">
        		 <h1 id="do-you-ever-dream-about-work">do you ever dream <nobr>about
 work?</nobr></h1>
@@ -4367,6 +4388,7 @@ I made this to explore why designers make design, based on Clifford Geertz's ide
    	 
     
    	 
+   	 <!--<section id="section-11" class="section">-->
    	 <section id="section-11" class="section">
        		 <h1 id="special-issues">Special Issues</h1>
 <p>Special Issues are publications thrice released by first-year XPUB
@@ -4408,6 +4430,7 @@ stories, and much more.</p>
    	 
     
    	 
+   	 <!--<section id="section-12" class="section">-->
    	 <section id="section-12" class="section">
        		 <h1 id="garden-leeszaal">Garden Leeszaal</h1>
 <h3 id="special-issue-xix">Special Issue XIX</h3>
@@ -4526,6 +4549,7 @@ book at the end of the evening.</figcaption>
    	 
     
    	 
+   	 <!--<section id="section-13" class="section">-->
    	 <section id="section-13" class="section">
        		 <h1 id="console">Console</h1>
 <h3 id="special-issue-xx">Special Issue XX</h3>
@@ -4625,6 +4649,7 @@ launch at Page Not Found.</figcaption>
    	 
     
    	 
+   	 <!--<section id="section-14" class="section">-->
    	 <section id="section-14" class="section">
        		 <h1 id="tty">TTY</h1>
 <h3 id="special-issue-21">Special Issue 21</h3>
@@ -4781,6 +4806,7 @@ performing</figcaption>
    	 
     
    	 
+   	 <!--<section id="section-15" class="section">-->
    	 <section id="section-15" class="section">
        		 <h1 id="colophon">Colophon</h1>
 <p>Vulnerable Interfaces is a catalogue of work producted within the

print/print_style.css

@@ -1,6 +1,7 @@
-@import "images.css"; /* Using a string */
+@import "images.css"; 
-@import "theatre.css"; /* Using a string */
+@import "theatre.css"; 
-@import "stephen.css"; /* Using a string */
+@import "stephen.css"; 
+@import "fairleads.css";
 
 :root {
     /* --spot-color-1: #53018e; */
@@ -193,11 +194,3 @@ margin-left: 40mm;
     display: inline-block;
     line-height: 0;
 }
-.loops{
- margin-left: 25mm;
-}
-.loops .margin-note{
-   color: green;
-	position: relative;
-margin-left: -45mm;
-}