magiun_website/src/components/lychee.vue

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
  font-family: 'Happy Times';
  src: url('../../fonts/happy-times-NG_regular_master.otf');
}
@font-face {
  font-family: 'Semi Light Dots';
  src: url('../../fonts/AC1-SemiLightDots.otf');
}
@font-face {
  font-family: 'ED Regular';
  src: url('../../fonts/ED-Regular.otf');
}
* {
    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: 'Happy Times';
  font-size: 18px;
  line-height: 24px;
  /*padding-bottom: 40px;*/
  color: #1B75BC;
  text-align: left;
}

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

.title_story {
  font-size: 80px;
  font-family: 'Semi Light Dots', sans-serif;
  padding-top: 20px;
  color: #FA00FF;
  text-align: center;
}

.arrows {
  font-size: 80px;
  font-family: 'Semi Light Dots', sans-serif;
  top: 36px;
  color: #FA00FF;
  vertical-align: top;
  position: fixed;
  overflow: hidden;
}

.arrows a {
    display: block;
}

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

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

.image_container {
  padding-top: 5px;
}

.photo {
-webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        width: auto;
  max-height: 100%;
  max-width: 100%;
  padding: 12px;
}

.img-fluid {
  filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}

.author {
  font-size: 20px;
  font-family: 'ED-regular', sans-serif;;
  text-align: center;
  color: #FA00FF;
}


.small_icon {
  max-width: 60%;
  padding-top: 100px;
}

.zoom {
  max-width: 100%;
}

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

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

</style>

<template>
  <b-container fluid class="p-0">
    <MenuBar/>
    <b-row class="controls">
        <b-col md="12" class="arrows">
          <a href="/whatwecan" id="leftarrow">←</a>
          <a href="/anise" id="rightarrow">→</a>
        </b-col>
      </b-row>

    <b-row>
      <b-col md="4">
        <b-row>
          <b-col md="6" offset-md="3">
        <div class="zoom">
          <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img>
        </div>
      </b-col>
      </b-row>
      <b-row>
        <b-col md="12">
        <p class="title_story">Have you eaten yet?</p>
      </b-col>
      </b-row>
        <b-row>
          <b-col md="12">
            <p class="author">an essay by Witold van Ratingen</p>

          </b-col>
        </b-row>
      </b-col>

      <b-col md="5">

<div class='content'>

<p><em>Have You Eaten Yet?</em><br>
is a Chinese greeting, a way to ask if you’re well. </p>
<p>
In the warm season of my first culture shock, I ate things I am not proud of. I prowled the streets for dangerous food in the most informal of settings. The more closely a restaurant resembled a crack den, the stronger its seductive pull. I slipped into grubby roadside shacks to gobble up chicken hearts with chives. Drunk on sorghum liquor, I’d stop at informal late-night barbecues for grilled eggplant and squid, eaten hunched over on a pink plastic stool on the sidewalk, watching the gamblers play.</p>
<p>
I didn’t speak much Mandarin when my exchange program started, so when confronted with a written menu, I’d order largely at random. Other times, I was able to simply point at ingredients in a fridge, adding là de - spicy. I ate more chili oil than I could handle and doused my inflamed stomach at night with half-liter bottles of cheap knock-off Qingdao beer. The diet put my body in a state of constant aggravation. I was always eating but I was rarely well.
</p>
<p>
I celebrated my 22nd birthday in a restaurant in Xiamen. Facing an aquarium, my family debated which fish we wanted to have prepared. This caused me serious moral anguish. To my amusement, we got obscenely overcharged. When my stepfather found out, he angrily returned to the restaurant to demand justice from a stoic waiter, who appeased him with a single 100-yuan (€12) bill. Not long after this, my stepfather proclaimed himself noedelmoe, tired of noodles, and began to have his lunch at McDonald’s.
</p>
<p>
I celebrated my 28th birthday at Sānsān in Rotterdam. Like newlyweds, we ordered Mao’s Favored Fish, an opulent pot of hot-sour soup with sea bass and strange, pickled berries. Valentina and I had just moved to the city together and allowed ourselves to hope that the worst of the pandemic was behind us, that a life was about to begin. Six months later, we can’t even have a coffee, while the people of Wuhan have safely scurried back into their bootleg noodle booths.
</p>
<p>
When we first met, food was a simpler affair: a pre-sliced bag of vegetables blandly stir-fried with tempeh sufficed. Now, coveted and exotic parcels descend on us from the ether, one after another. Green Sichuan peppers from Chongqing, bucatini from Abruzzo, Oaxacan blue masa harina for fresh tortillas. We nurse each other like baby birds with steamed dumplings and gnocchi. We forage at the Chinese Boat and carry comforting, foreign ferments back to our nest.
</p>
<p>
Have you eaten yet? I ask. No, everything is bad, you say. <br>
When you start to cry, I bring you lychees.</p>
</div>

      </b-col>


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

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

</script>