magiun_website/src/components/edition3/potato.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;
}

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

}

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

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: 18px;
  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;
}



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

.photo {
  max-height: 100%;
  max-width: 100%;
  padding: 20px;
}


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



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

.zoom {
  max-width: 100%;
}

.color_back {
  background-color: #FFE5A1;
}

.color_next {
  background-color: #FFFFFF;

}

@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="4" class="color_back">
          <b-row class="controls">
              <b-col md="12" class="arrows">
                <router-link to="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
                <p id="onhover_left">Yes, Chef</p>
              </b-col>
            </b-row>

        </b-col>

        <b-col md="4" class="color_back">
          <b-row>
            <b-col md="12">
            <p class="title_story">One Way with Potatoes</p>
          </b-col>
          </b-row>
            <b-row>
              <b-col md="12">
                <p class="author">by Honey Hughes-Jones</p>

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

<p>
  There is something about the clouds in the sky, the strength of the light that wakes me up, or the
sound of rainfall as it beats against the glass that I feel in my stomach. My stomach aches and
contracts and bloats and craves in tune with atmospheric turns.
</p><p>
It’s dark at the moment, when I roll over and flicker my eyes open. Often, the clouds a shade of
grey and a faint howl whispering through gaps in the windows. I dress in clothes I haven’t felt
pressed against my body for a while, revisiting the warmths or scratches of fabrics and the
comfort of layers. I wonder to myself if they fit me as they did before, or if I no longer fit them as I once did. It is around this time of year that I really begin to consider potatoes.
</p><p>
The type of potato is important, whether it is waxy or crumbly defines how I use it. Perhaps a little over a week ago, when I felt warmth across my skin and a warm breeze tickling the hairs on my arms, my preference was with something smaller and waxier, a newer variety freshly harvested, teamed with parsley, or chives, or mint. But when the sun sets a little sooner, like now, and the air is a little fresher, as it was this morning, I move towards a crumblier kind. With the rosemary, or sage, or thyme that my balcony still nourishes.
</p><p>
I scrub the skin in cold water to clean away the remaining soil, and chop them roughly, each in
three pieces. One cut vertically, and the other horizontally so as to expose as many sides of the
potato as possible to the oil when the time comes, but to avoid all the pieces being the same
shape.
</p><p>
I submerge them in cold salted water as soon as they are cut, eventually bringing them to the boil for a few minutes ; maybe four, maybe five, enough to slightly soften them but not enough for them to fully cook. I drain them from their water, and place the lid on top of the pan and gently shake it. I lift the lid to see their bruised-edges rough, and tip them out onto a tray slicked thick with cold-pressed rapeseed oil.
</p><p>
Pushing them around, coating them with the oil, I add something fragrant, chopped finely. Today
rosemary, and half a bulb of garlic. I sprinkle semolina too, lightly but enough to cover the edges
of the potatoes, and flakes of sea salt. I grind over black pepper, and place them in my oven, as
hot as it goes, until their edges crisp.

</p>
</div>

      </b-col>
      <b-col md="4" class="color_next">
        <b-row class="controls">
            <b-col md="12" class="arrows">
              <router-link to="/bowl" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
              <p id="onhover_right">Cooking Apart Together</p>
            </b-col>
          </b-row>
          <b-row>
        <b-col md="4" >
              <b-img id="illustration" src="media/illustrations_3/potato_small.png"></b-img>
      </b-col>
      </b-row>
      </b-col>
        </b-row>

      </b-container>
</template>

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

</script>