magiun_website/src/components/soulsoup.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="/simmered" id="leftarrow">←</a>
          <a href="/phone" 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/cauliflower.png"> </b-img>
      </div>
    </b-col>
    </b-row>

    <b-row>
      <b-col md="12">
        <p class="title_story">Chicken Soup for Soul</p>
      </b-col>
    </b-row>
        <b-row>
          <b-col md="12">
            <p class="author">an essay by Patricia Cîrtog</p>

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


<b-col md="5">

<div class='content'>

<p>Morning… As a commuter, my morning used to be a colorful bustle of to-go coffee, endless
searches for a complete pair for socks, mother’s kisses while dressing myself up and, above all,
the run for the bus used to be my refresh button that offered me a glance of hope for a wonderful
day. However, things changed drastically when the pandemic stroke out and our school was
closed. Suddenly, my whole adventure experienced in my way to school was replaced by a simple
click on “Join”.</p>
<p>
  At the beginning, I was excited for being able to water the plants while admiring the sunrise, to
  cook my breakfast and to spend time with my beautiful pet, Pretty. I thought that I would wake
  up at 6:00 o’clock, do some physical exercises, learn a new language, be as productive as
  possible and so on and so forth, because I finally had time. Not a chance. After a while, my only
  activity in the morning was to play with my sweet dog as I watched the sunrise. But it was
  something more than just playing. That moment of the day became a form of escapism from the
  reality, sheltering with Pretty and enjoying ourselves. I felt terrible and anxious because of the
  uncertain situation and the isolation, but spending my mornings with Pretty was therapeutical for
  me. Her gentle, yellow fur, reminding me of wheat spices in the sun, offered me a safe place to
  ease. I loved the fact that there was no necessity to talk or to be productive. We used to eat our
  breakfast together and to play the most ridiculous games, but we used to feel each other so deep.
  And that was the way my morning bustle turned into a quiet, happy moment.</p>
<p>
  Then, here I am, all alone. I stare blankly. It’s 6:00 o’clock and the sunrise is not showing yet.
  Pretty died after a few days of fighting with a monster which could not be driven away. How
  should this morning unfold?</p>
<p>
  It’s the first time when I feel emptiness. I feel myself as being empty from the crown of the head
  to the tip of the toe. I close my eyes. Hundreds of thoughts are whirling around my head, just like
  autumn leaves in a stormy day. I am crawling to the kitchen just like Pretty used to do when I
  asked her to come with me to the attic because I was too afraid. I open the door from the larder
  apathetically and I take the kettle. But my attention is captivated by this big, white cauliflower.
  And, all of a sudden, my senses are sending me to my childhood memories. When I was a little
  girl cooking with my lovely grandmother and talking about everything in the world. We used to
  cook something that we called: chicken soup for soul. It is a sweet soup full of vegetables that I
  didn’t actually realized I knew the recipe until this moment of connection with my inner child. I
  remember myself begging my grandmother to add some more cauliflower to the soup, because I
  really loved it. I used to perceive those little strips as some small bouquets of daisies floating in a
  deep steaming lake. Somewhere, in a hidden pigeonhole of my mind, I’ve found the voice of my
  grandmother teaching me how to make this soup. And there it is:</p>
<p>
  “Chop two onions in small, small pieces. Take from the fridge half a celery and a medium
  pepper and cut them carefully just as big as the toffees you eat. Add a little love. Then chop 2 carrots, put them all in our red medium pot and add some cauliflower and broccoli. Don’t forget
  about the little pieces of chicken breast and a pinch of salt. And put the pot on the cooker stove,
  over medium heat.” </p>
  <p>While I remember my grandmother’s words, I do exactly what I should in order to prepare this
soup meant to warm my soul. While it is boiling, I imagine myself dancing and singing around
my grandmother and a sense of fulfillment touches my inner feelings. After the meat is cooked, I
add some herbs (parsley, basil, oregano and thyme) and a vegetable cube. I taste it with a
wooden spoon while I admire my small bouquets of cauliflower and I tell myself: “This soup is
delicious!”.</p>
<p>Now, I’m ready to press the “Join” button. My online classes are just about to start. Maybe
making some soup haven’t solved all of my problems, but I’ve felt a sense of achievement and
joy in these dark moments. For lunch, I will eat my chicken soup for soul. Maybe I’ll do it
crying, maybe quietly, but the company of cooking has offered me peace.</p>
</div>

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

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

</script>