magiun_website/src/components/edition2/knife.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;
}

.photo {
  padding: 0px;
}


.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;
     }

     .content {
       padding-bottom: 40px;
     }

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

</style>

<template>
  <b-container fluid class="p-0">
    <MenuBar/>
      <b-row class="controls">
        <b-col md="12" class="arrows">
        <router-link to="/" id="leftarrow">←</router-link>
          <router-link to="/simmered" id="rightarrow">→</router-link>
        </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/knife.png"> </b-img>
      </div>
      </b-col>
      </b-row>

      <b-row>
        <b-col md="12">
        <p class="title_story">Paper Thin</p>
      </b-col>
    </b-row>
        <b-row>
          <b-col md="12">
            <p class="author">an essay by Yoana Buzova</p>

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


<b-col md="4">

<div class='content'>

<p>The first time I was allowed to use a knife was at my grandparents house. Perhaps not so allowed, as encouraged and maybe even obliged to. It felt so empowering, I felt so trusted, so weirdly and preciously mature. Grown-ups have an inability to perceive especially important things. My parents did not understand how important it was to be given the chance to use a knife by myself as early as possible. Luckily, grandparents are such creatures who can easily deviate from the grown-up mentality. </p>
<p>
It was of great importance to never use a potato peeler when peeling potatoes in my grandparents house. The potato peeler, a piece of technology designed to make lives easier, to automate and create uniformity in a task otherwise tedious and painstaking, was not a respected device in that house. According to my grandmother, it was a device of horrible waste. It simply removed such an evenly thick portion of the potato, that was absolutely unacceptable. It was like throwing half of the edible potato material away in the bin. You see, my grandparents were kids during the Second World War, and there were times of scarcity, wasting so much of the potato meant less to eat. And we all will agree potatoes are delicious stuff that, no matter how simply or overly complex prepared, manage to satisfy almost any taste, especially that of a hungry child. And so my grandmother loved cooking potatoes, and so she loved eating potatoes, and we always had to use a knife to peel the skin. The peeling process was special, it was not about speed, but about dexterity. The skin had to be peeled paper thin, as to waste as little of the edible material as possible. It took a long time to acquire the skill and mastery to be able to satisfy my grandmother's potato peeling standards. And even being the most skillful peeler, the process was slow, time lost meaning when peeling, it was all about disposing strictly an absolute minimum of the potato's precious entirety.
<br>
Afterwards we often simply cut the potatoes and threw them in the oven. My grandmother taught me that it is essential to always cut the potato stripes in such a way that each one turns out to be odd shaped and has more than four corners. That way the possibility of them sticking together is greatly reduced.</p>
<p>
At present day I own a potato peeler, because as everyone else I must do everything as fast as humanly possible, including peeling potatoes. Peeling with a knife seems like a nerve wrecking activity. Every self-respecting adult must own a potato peeler. And must perform all her tasks, including peeling, with great speed and efficiency.</p>
<p>
My parents emptied out the house of my grandparents and it got sold. I kept the knife my grandmother would always give me to peel. I sometimes try using it to peel a potato, or even a cucumber. And I always cut the potatoes in long odd looking pieces that have more than four corners.</p>
</div>
</b-col>
<b-col md="4">
  <b-container fluid>
    <div class="image_container">

    <b-img class="photo" src="media/knife/My_Knife.jpg"> </b-img>


</div>

</b-container>
</b-col>


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

<script>
import MenuBar from '../MenuBar'
export default {
    name: 'knife',
    data: function() {
        return {
        }
    },
//    components: {
//        MenuBar
//    },
//    beforeRouteLeave(to, from, next) {
//      let transitionName = to.meta.transitionName || from.meta.transitionName;

//      if (document.activeElement.id === 'leftarrow') {
//        this.transitionName = 'slide';
//      }

//      console.log('thisistransition', this.transitionName);

//      next();
//    },
}

</script>