magiun_website/src/components/simmered.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="/knife" id="leftarrow">←</a>
        <a href="/soulsoup" 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/porcini.png"></b-img>
            </div>
          </b-col>
        </b-row>
        <b-row>
          <b-col md="12">
            <p class="title_story">Simmered Egg <br>(Hakka style)</p>
          </b-col>
        </b-row>
        <b-row>
          <b-col md="12">
            <p class="author">an essay by Dorothy Cheung</p>
          </b-col>
        </b-row>
      </b-col>
      <b-col md="4">
        <div class='content'>
          <p>Thanks to the pandemic, I am spending much more time in Hong Kong. After losing my maternal grandmother earlier last year, I feel the urge to visit my paternal grandma more often – but not too often, at least not during another wave of outbreak. Then I found one way to make her (and me) happy, apart from visiting her in-person – to learn cooking from her whenever I visit and try to cook when I get home.</p>
          <p> My paternal family is Hakka Chinese; literally, it means “guest people”. The only thing is that we are self-invited. Historians believe that Hakka people have been migrated for a few times since 3rd century BC before they settled in Southern China. For my grandparents, they moved even further to Hong Kong.</p>
          <p>According to my grandma, as Hakka people have always been unwelcomed, we could only take up hilly and infertile fields. That is why most Hakka dishes consist of pickles, organ meat and coarse vegetables (but of course, at home, we do eat a lot of Cantonese food too). Even so, my grandmother sometimes cooks a dish that doesn’t fall into any of these categories, and she named it as “Simmered Egg” - minced pork, diced shiitake mushroom, chopped spring onion with fluffy egg. It is so soft, comforting, yet somehow delicate.</p>
          <p> In one of the visits, I urged her to show me how to make it. When she was pan-frying the minced meat and shiitake mushroom, I asked her if Simmered Egg is a Hakka dish at all – “No, of course not. Your grandfather used to work in a bookshop, and his Shanghainese boss once invited us to his place for dinner. I liked this dish, so I tried to cook this at home.” A few weeks later, I wanted to cook this for my partner, and I tried to search “Simmered Egg” online, I could not find anything, if not anything related to Shanghainese cuisine. In the end, I just vaguely followed her instruction and made use of fridge leftovers, replacing pork with tofu, diced carrot and some dried Yunnan porcini I ordered the other day. It did not taste like anything she taught me, and at this point, I doubt if it has anything to do with Shanghainese cuisine at all.</p>
          <p>After all, “Simmered Egg” is an adaptation made with the spirit of being a Hakka woman - adapting to changes (and leftover food).</p>
        </div>
      </b-col>
      <b-col md="4">
        <b-container fluid>
          <div class="image_container">
            <b-row>
              <b-col md="10" offset-md="2">
                <b-img class="photo" src="media/simmered/Simmeregg00.png"> </b-img>
              </b-col>
            </b-row>
            <b-row>
              <b-col md="10" offset-md="2">
                <b-img class="photo" src="media/simmered/Simmeregg01.png"> </b-img>
              </b-col>
            </b-row>
            <b-row>
              <b-col md="10" offset-md="2">
                <b-img class="photo" src="media/simmered/Simmeregg02.png"> </b-img>
              </b-col>
            </b-row>
          </div>
        </b-container>
      </b-col>
    </b-row>
  </b-container>
</template>

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

</script>