magiun_website/src/components/edition3/mittens.vue

<style scoped>
@font-face {
  font-family: 'AUTHENTICSansLight';
  src: url('../../../fonts/AUTHENTICSans-60.otf');
  font-weight: lighter;
}

@font-face {
  font-family: 'AUTHENTICSans';
  src: url('../../../fonts/AUTHENTICSans-90.otf');
  font-weight: 400;
}


* {
    border: 0px black solid;
    background-color: transparent;
}


.container_width {
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 70px;
}


a:hover {
  color: hotpink;
  text-decoration: none;
}

a {
  color: gray;
}

.content {
  /*padding-right: 50px;*/
  /*padding-left: 60px;*/
  font-family: 'AUTHENTICSansLight';
  font-weight: lighter;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 40px;
  color: black;
  text-align: left;

}

.controls {
  padding-top: 12px;
  height: 120px;
  z-index: 1;
  position: relative;
  }

.title_story {
  font-size: 48px;
  font-family: 'AUTHENTICSans', sans-serif;
  font-weight: 400;
  padding-top: 70px;
  color: black;
  text-align: left;
}
.author {
  font-size: 36px;
  font-family: 'AUTHENTICSans', sans-serif;
  font-weight: 400;
  text-align: right;
  color: black;
}

.arrows {
  font-size: 40px;
  top: 30px;
  color: black;
  vertical-align: top;
  overflow: hidden;
  font-family: 'AUTHENTICSans';
}

.arrows p {
visibility: hidden;
}

.arrows:hover p {
  visibility: visible;

}
.arrows a {
    display: block;
}

#illustration {
  width: 80%;
  float: left;
  margin-top: 150px;
  filter: grayscale(80%) contrast(80%) opacity(50%);

}

#illustration:hover {
  filter: grayscale(0%);
}

#leftarrow {
  float: left;
  color: black;
}

#rightarrow {
  float: right;
  color: black;
}

#onhover_right {
  font-size: 15px;
  margin-top: 60px;
  text-align: right;
}

#onhover_left {
  font-size: 15px;
  margin-top: 60px;
  text-align: left;
}
.image_container {
  padding-top: 5px;
}


.color_back {
  background-color: #D7FFE9;
}

.color_next {
  background-color: #5FC34F;

}


@media (max-width: 575px){
     .small_icon {
       display: none;

     }
     .title_story {
       font-size: 48px;
     }
     .author {
       font-size: 21px;
     }

     .content {
       padding-bottom: 40px;
     }

     .photo {
       padding-bottom: 40px;
     }
   }

</style>

<template>
  <b-container fluid class="p-0">
    <MenuBar/>
    <b-row >
      <b-col md="3" class="color_back">
        <b-row class="controls">
            <b-col md="12" class="arrows">
              <router-link to="/vodka" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
              <p id="onhover_left">Spoiled</p>
            </b-col>
          </b-row>

      </b-col>


    <b-col md="5" class="color_back">


  <b-row>
    <b-col md="12">
      <p class="title_story">How to Poach an Egg (Perfectly)</p>
    </b-col>
  </b-row>
      <b-row>
        <b-col md="12">
          <p class="author">by Valentina Vella</p>

        </b-col>
      </b-row>
<div class='content'>

<p class="monologue">
  These soft, colorful shapes
<br>
  <span class="dialogue">Came to me from compost and dark earth,
</span><br>
Thanks, earth!<br>
  <span class="dialogue">And thank you, human beings who planted, harvested,</span><br>
  Carried them to my local food co-op<br>

  <span class="dialogue">(Fuck the capitalists stealing our labor</span><br>
And buying up our housing stock).<br>
  <span class="dialogue">Tongue licking witty jokes on white ceramic,</span><br>
  Bubbles, waves, carbonated currents<br>
  <span class="dialogue">Rippling through papillae,</span><br>
  Hands appear,<br>
  <span class="dialogue">Disappear,</span><br>
  Inside oven mittens,<br>
  <span class="dialogue">A bell sound: three strikes,</span><br>
  Open the oven,<br>
  <span class="dialogue">Stomach juices flowing.</span><br>
  Getting dumped<br>
  <span class="dialogue">Was the best thing that’s ever happened to me:</span><br>
  All alone and forlorn I figured I should learn how to parent myself.<br>
  <span class="dialogue">Turns out my inner mamma takes care of me through food,</span><br>
  How unoriginal,<br>
  <span class="dialogue">How convenient.</span><br>
  She makes the most delicious food and I eat it all<br>
  <span class="dialogue">
  She makes the most delicious food and I sometimes share it</span><br>
  With my roommate Johanna (who's great and I hope will stick around<br>
  <span class="dialogue">Instead of moving back to Germany and giving up on Art with a capital A).</span><br>
  Rhubarb Crumble;<br>
  <span class="dialogue">Spinach Quiche with gruyère and heavy cream;</span><br>
  Flammkuchen with goat cheese and pears;<br>
  <span class="dialogue">Pasta alla Norma, melanzane fritte e primo sale;</span><br>
  Avocado Toast with cherry tomatoes, buffalo mozzarella, chili peppers,<br>
  <span class="dialogue">Basilico genovese, extra virgin olive oil;</span><br>
  The best poached eggs you’ve ever tried,<br>
  <span class="dialogue">(Here’s how I learned:</span><br>
  https://www.youtube.com/watch?v=yifZtA3uF-E,<br>
  <span class="dialogue">You’re welcome)</span><br>
  So round and fluffy,<br>
  <span class="dialogue">Bleeding yellow yolk over Johanna’s perfectly cooked sourdough bread;</span><br>
  My slightly boring overnight oats cheered up by kiwi berries and some weird<br>
  <span class="dialogue">Açaí-guarana frozen paste that I paid too much for;</span><br>
  Chai Tea cooled off by oat milk and sweetened by maple syrup<br>
  <span class="dialogue">To be sipped in the company of new, exciting,</span><br>
  Artist friends you can bitch about Dutch mental health care with;<br>
  <span class="dialogue">Vegetarian carbonara with zucchini, pecorino and smoked eggs.</span><br>
  Yesterday I fixed Pleun’s stereo so Johanna, my future comrades and I<br>
<span class="dialogue">Will eat tiramisù</span><br>
  While watching Italian classics projected on the lavender wall,
<br>
<span class="dialogue">Our asses pampered by the ridiculously comfortable turquoise velvet couch.</span>
<br>
  (I don’t particularly enjoy cooking
<br>
<span class="dialogue">I just need my delicious, edible love so much</span><br>
  That a little bit of sculpting<br>
  <span class="dialogue">With sharp blades and domesticated fire</span><br>
  (Which actually sounds cool!<br>
<span class="dialogue">But full disclosure:</span><br>
  I’ve always sneered at those who see food as their <i>art form</i>.<br>
<span class="dialogue">  Hate me, if you must)</span><br>
  Is totally worth the effort,<br>
<span class="dialogue">While before, cooking was a chore among chores,</span><br>
  One of the things that need to be done<br>
<span class="dialogue">  When you share your life 24/7 with another person</span><br>
  Which is in itself depleting,<br>
<span class="dialogue">So I was often trying to save energy:</span><br>
  Washing dishes and cleaning the house<br>
  <span class="dialogue">Requires less brain power than cooking.</span><br>
  I guess we made each other miserable<br>
<span class="dialogue">More often than happy</span><br>
  Since he recently called me a RUDE UNGRATEFUL ICE WITCH.<br>
  <span class="dialogue">It turns out he was a people pleaser,</span><br>
  Which is as far from a true giver as can be.<br>
<span class="dialogue">My window sill is where basil, sage and appelmunt plants live.</span><br>
  This small square kitchen will always be warm and filled with light,<br>
  <span class="dialogue">As we build loving, well-fed, Queer Communal Kinships</span><br>
  Where we'll communicate so well that<br>
<span class="dialogue">Nobody, hopefully,</span><br>
  Will plot complex revenge fantasies inspired by Korean cult directors,<br>
  <span class="dialogue">Where everyone will be stuffing each other’s mouths</span><br>
  With fluffy, doughy, crunchy bits of<br>
<span class="dialogue">Unconditional adoration.</span><br>

</p>
</div>
</b-col>
<b-col md="4" class="color_next">
  <b-row class="controls">
      <b-col md="12" class="arrows">
        <router-link to="colophon3" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
        <p id="onhover_right">Colophon</p>
      </b-col>
    </b-row>
    <b-row>
  <b-col md="4" >
        <b-img id="illustration" src="media/illustrations_3/mittens_small.png"></b-img>
</b-col>
</b-row>
</b-col>


</b-row>
      </b-container>
</template>

<script>
import MenuBar from '../MenuBar'
export default {
    name: 'mittens',
    data: function() {
        return {
        }
    },
    components: {
        MenuBar
    }
}

</script>