changed backplaces and index ada

ada/index.html

@@ -37,26 +37,13 @@
 
 <p><a href="../backplaces">project website</a><br />
 </p>
-<p>Hi.<br />
+<p>Hi.<br/>
-I made this play for you. It is a question, for us to hold together.</p>
+I made this play for you; it’s a question to keep us alive together. Is all intimacy about bodies? What happens when our bodies distance intimacy from us?
-<p>Is all intimacy about bodies? What is it about our bodies that makes
+Backplaces is a web-based play. A short anthology of poems and stories about vulnerability, intimacy, and the internet. It explores the internet as a place for holding big feelings and intimacy when it is unbearable. As an homage to those who have been vulnerable with me I created "backplaces". They are tender online spaces for relief and acknowledgement of societal pain.
-intimacy? What happens when our bodies distance intimacy from us? This
+Some of these stories may evoke memories of pain. As you sit in the audience, know I am with you. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care for you.
-small anthology of poems and short stories lives with these
+I hope you see what I saw in these stories. Sweet dreams now, and I'll talk to you soon.
-questions—about having a body without intimacy and intimacy without a
+<br> <br> 
-body. This project is also a homage to everyone who has come before and
+love, Ada
-alongside me, sharing their vulnerability and emotions on the Internet.
-I called the places where these things happen backplaces. They are
-small, tender online rooms where people experiencing societally
-uncomfortable pain can find relief, ease, and transcendence.<br />
-</p>
-<p>I made three backplaces for you to see, click, and feel: Solar
-Sibling, Hermit Fantasy, and Cake Intimacies. Each of these is the
-result of its own unique performance or project. Some of the stories I
-will share carry memories of pain—both physical and emotional. As you
-sit in the audience, know I am with you, holding your hand through each
-scene. If the performance feels overwhelming at any point, you have my
-full permission to step out, take a break, or leave. This is not
-choreographed, and I care deeply for you.<br />
 </p>
 <figure>
 <img src="index.png"
@@ -64,13 +51,7 @@ alt="This is the Index, the stage of my play. Each felted item is an act." />
 <figcaption aria-hidden="true">This is the Index, the stage of my play.
 Each felted item is an act.</figcaption>
 </figure>
-<p>Solar Sibling is an online performance of shared loss about leaving
+<p> This is the first act of this play, Solar Sibling. It reimagines user comments from TikTok videos about sibling relationships. To do this, I have taken the feelings behind the comments, found where they met my own, and used our shared words to write poems. Solar Sibling celebrates the vulnerabilities nurtured in online communities and invites you to share anonymously on the complexities of sibling relationships. Once you have whispered your sibling feelings to me, they will stay with me and I will never use nor share them. <br/>
-and siblings. This project used comments people left on TikTok poetry. I
-extracted the emotions from these comments, mixed them with my own, and
-crafted them into poems. It is an ongoing performance, ending only when
-your feelings are secretly whispered to me. When you do, by typing into
-the comment box, your feelings are sent to me and the first act closes
-as the sun rises.<br />
 </p>
 <figure>
 <img src="solar-1.png"
@@ -84,11 +65,8 @@ alt="The fillable comment where you can whisper your feelings to me." />
 <figcaption aria-hidden="true">The fillable comment where you can
 whisper your feelings to me.</figcaption>
 </figure>
-<p>Hermit Fantasy is a short story about a bot who wants to be a hermit.
+<p>Hermit Fantasy is a short story about a bot and a hermit. It started when I conducted a survey about receiving emotional support on the internet. This is an imagined response to an email I received. The story explores the loneliness of both being online and offline. As an act, it's a series of letters, click by click.
-Inspired by an email response from a survey I conducted about receiving
+<br/>
-emotional support on the Internet, this story explores the contradiction
-of being online while wanting to disconnect. As an act it’s a series of
-letters, click by click.<br />
 </p>
 <figure>
 <img src="one.png" alt="The first letter." />
@@ -98,18 +76,9 @@ letters, click by click.<br />
 <img src="two.png" alt="The second letter." />
 <figcaption aria-hidden="true">The second letter.</figcaption>
 </figure>
-<p>Cake Intimacies is a performance that took a year to bring together.
+<p>CCake Intimacies is a performance that took a year to bring together. It is a small selection of stories people told me that I held to memory and rewrote here. The stories come from two performances I hosted.
-It is a small selection of stories people told me and I held to memory
+<br>
-and rewrote here. The stories come from two performances I hosted.
+In the first, I asked participants to eat cake, sitting facing or away from each other, and share stories about cake and the internet. I hosted the second performance at the Art Meets Radical Openness Festival. There I predicted participants' future internet lives using felted archetypes. In return I received stories about feeling strong emotions on the internet.<br />
-First, I asked participants to eat cake, sitting facing or away from
-each other and sharing their stories about cake and the Internet. The
-second performance was hosted at the Art Meets Radical Openness
-Festival, as part of the Turning of the Internet workshop. For this
-performance, I predicted participants’ future lives on the Internet
-using felted archetypes and received stories from their Internet past in
-return. Now the stories are here, each of them a cake with a filling
-that tells a story, merging the bodily with the digital and making a
-mess of it all.<br />
 </p>
 <figure>
 <img src="pie.png"
@@ -137,7 +106,7 @@ intimacy and of bodies. The way it always is. Thankfully.<br />
 <figure>
 <img src="biscuit.png"
 alt="Accept My Cookies, biscuits for the performance." />
-<figcaption aria-hidden="true">Accept My Cookies, biscuits and bows for
+<figcaption aria-hidden="true">An early prototype of Accept My Cookies, biscuits for
 the performance.</figcaption>
 </figure>
 </div>

backplaces/pie/styles.css

@@ -27,57 +27,58 @@
     
 .content-item {
  max-width: 80%;
-    display: flex;
+display: flex;
-   flex-direction: column;
+flex-direction: column;
-    align-items: center;
+align-items: center;
-    text-align: center;
+text-align: center;
 }
     
-    .content-item > * {
+.content-item > * {
    max-width: 50%;
-    }
+}
     
-    .content-item:nth-child(odd)  > *  {
+.content-item:nth-child(odd)  > *  {
     align-self: flex-end;
     text-align: right;
     float: right;
-    }
+}
-    .content-item:nth-child(even) > *  {
+
+.content-item:nth-child(even) > *  {
     align-self: flex-start;
     position: static;
     right: 0;
     text-align: left;
-    }
+}
     
-    .content-item img {
+.content-item img {
  height: auto;
-    }
+}
     
-    .content-item p {
+.content-item p {
       margin: 10px 0;
      font-family: 'Redaction-Regular';
      line-height: 1.6rem;
      font-size: 1.1rem;
-    }
+}
     
-    p::selection {
+p::selection {
  color: #ee98b1;
-    }
+}
     
-    #home {
+#home {
     position: relative;
     top: 30px;
     left: 30px;
     width: 100px;
     height: auto;
     opacity: 1;
-    }
+}
     
-    #home:hover {
+#home:hover {
     cursor: pointer;
-    }
+}
     
-    .letterBox {
+.letterBox {
     font-size: 18px;
     padding: 20px;
     max-width: 70%;
@@ -90,33 +91,32 @@
     justify-content: right;
     z-index: 1000;
     margin: auto;
-    }
+}
     
-    .letterContents {
+.letterContents {
     width: 90%;
     position: relative;
-    }
+}
     
-    #closeButton {
+#closeButton {
     font-size: 40px;
     cursor: pointer;
     height: 30px;
-    }
+}
     
-    #about {
+#about {
     position: relative;
     top: -36px;
     left: 60px;
     width: 80px;
     height: auto;
-    opacity: 1;
+}
-    }
     
-    #about:hover {
+#about:hover {
     cursor: pointer;
-    }
+}
     
-    #mute-btn {
+#mute-btn {
     color: #ee98b1;
     font-family: 'Redaction-Regular', serif;
     font-weight: bold;
@@ -129,15 +129,15 @@
     cursor: pointer;
     border: none;
     background: transparent;
-    }
+}
     
-    #mute-btn:hover {
+#mute-btn:hover {
     color:#FCF6F1ff;
     background-color:#ee98b1;
     border-radius: 30px;
-    }
+}
   
-    @media only screen and (max-width: 767px) {
+@media only screen and (max-width: 767px) {
     body {
         font-size: 1rem;
     }
@@ -166,6 +166,7 @@
             width: 100%;
             line-height: 25px;
    }
+   
    .content-item > * {
             width: 60%;
     }
@@ -176,6 +177,7 @@
             line-height: 24px;
             font-size: 1rem;
             width: 200px; 
+    }
 
     .content-item:first-of-type img {
             margin-top: 100px;
@@ -219,5 +221,5 @@
             padding-top: 4rem;
             font-size: 1rem;
     }
-    }
+    
 }