From 1c65a78004943247adddf6e043b9dddebd63e469 Mon Sep 17 00:00:00 2001
From: simoon <info@simonbrowne.biz>
Date: Wed, 28 Jul 2021 16:27:24 +0200
Subject: [PATCH] edited a bunch of vue files

---
 src/components/SecondEditionPage.vue | 310 ++++++++++-----------------
 src/components/anise.vue             | 302 +++++++++++++-------------
 src/components/knife.vue             | 138 +++++++-----
 src/components/lychee.vue            |  97 ++++++---
 src/components/phone.vue             | 142 +++++++-----
 src/components/simmered.vue          | 218 +++++++++----------
 src/components/soulsoup.vue          |  95 +++++---
 src/components/whatwecan.vue         |  96 ++++++---
 8 files changed, 745 insertions(+), 653 deletions(-)

diff --git a/src/components/SecondEditionPage.vue b/src/components/SecondEditionPage.vue
index a3c375f..e97eac2 100644
--- a/src/components/SecondEditionPage.vue
+++ b/src/components/SecondEditionPage.vue
@@ -7,10 +7,17 @@
   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: #FFD600 !important;
+    background-color: #FFD600;
 
 }
 
@@ -20,15 +27,14 @@ body {
 }
 
 #magi {
-  width: 50%;
-  z-index: -1;
+  background-color: transparent;
   /*padding: 20px;*/
-  --color-stop: #fff5f5;
-  --color-bot: #333042;
+  /*--color-stop: #fff5f5;*/
+  /*--color-bot: #333042;*/
 }
 
 .img-fluid {
-  fill: url(#magi) #ffcccc;
+  /*fill: url(#magi) #ffcccc;*/
 }
 
 #mag_title {
@@ -37,19 +43,22 @@ body {
   color: #1B75BC;
   font-family: 'Work Sans', sans-serif;
   text-align: left;
+  /*position: fixed;*/
+  /*padding: 6px;*/
+  background-color: transparent;
   z-index: 1;
-  padding: 6px;
 
 }
 
 
 #mag_subtitle {
-  font-size: 200%;
-  font-family: 'Work Sans', sans-serif;
+  font-size: 250%;
+  font-family: 'Semi Light Dots', sans-serif;
   color: #1B75BC;
-  text-align: center;
+  background-color: transparent;
   height: auto;
-  padding: 6px;
+  margin-top: -230px;
+  text-align: left;
 }
 
 .summary {
@@ -62,10 +71,10 @@ body {
   width: 60%;
 }
 
-
-.col-md-2 {
-  border-right: 3px dotted #ffcccc;
-  display: table;
+.author {
+  font-family: 'ED-Regular', sans-serif;;
+  text-align: center;
+  color: #FA00FF;
 }
 
 .container_width {
@@ -75,11 +84,13 @@ body {
 #toc {
   color: #1B75BC;
   font-family: 'Happy Times';
-  text-align: center;
-  font-size: 100%;
+  font-size: 120%;
   text-align: center;
   border: 8px dotted #1B75BC;
-  padding: 12px;
+  padding: 24px;
+  max-width: 100%;
+  min-width: 70%;
+  margin: 18px;
 }
 
 a {
@@ -95,33 +106,39 @@ a {
   font-size: 18px;
   font-family: 'Work Sans';
   letter-spacing: 1px;
-  /*margin-top: 55px;*/
+  margin-top: 80px;
+  text-align: left;
+  background-colour: transparent;
 }
 
 @media (max-width: 1217px) {
   #mag_title {
     font-size: 500%;
-    padding-top: 10px;
-    /*padding-left: 12px;*/
-    /*padding-right: 12px;*/
+    padding-top: 12px;
   }
   #mag_subtitle {
     font-size: 150%;
+    text-align: left;
     padding-top: inherit;
-    /*padding-left: 20px;*/
   }
 }
 
 @media (max-width: 575px) {
   #mag_title {
-    font-size: 50px;
+    font-size: 80px;
     padding-top: inherit;
-
   }
 
   #mag_subtitle {
-    font-size: 18px;
     padding-top: inherit;
+    text-align: right;
+  }
+
+  #edition {
+    font-size: 18px;
+    text-align: right;
+    margin-top: -36px;
+    background-color: transparent;
   }
 
   .icons img {
@@ -133,22 +150,29 @@ a {
   }
 
   #magi {
-  width: 50%;
-  border: 3px double ##ffcccc;
-  border-radius: 24px 48px 72px 96px;
+    width: 50%;
+    text-align: right;
+    margin-top: -24px;
   }
 
   .col-md-2 {
   border: none;
   }
+
+  #main_container {
+  padding-top: 64px;
+  }
 }
 
+.recipe_title {
+  font-family: 'Bold Big Dots', monospace;
+  font-size: 200%;
+  padding-bottom: 18px;
+}
 
 #main_container {
-  padding-top: 100px;
+  padding-top: 72px;
   padding-bottom: 120px;
-  /*border-bottom: 2px #ffcccc solid;*/
-
 }
 
 #print {
@@ -192,171 +216,67 @@ a {
 </style>
 
 <template>
-
-<div>
-  <MenuBar/>
-<b-container fluid class="p-0">
-
-  <b-row id="main_container">
-    <b-col md="6">
-      <b-row>
-        <b-col md="7" offset-md="2">
-
-      <a href="/about"><p id="mag_title">Magiun</p></a>
-
-    </b-col>
-<b-col md="3" id="edition">
-  Summer 2021
-</b-col>
-    </b-row>
-    <b-row>
-      <b-col md="8" offset-md="4">
-        <a href="/about">
-          <b-img class="img-fluid" id="magi" src="media/magiun2/unnamed.png"></b-img></a>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col md="8" offset-md="2">
-        <p id="mag_subtitle">#2 On adapting</p>
-
-      </b-col>
-    </b-row>
-    </b-col>
-
-    <b-col md="6">
+  <div>
+    <MenuBar/>
+    <b-container fluid class="p-0">
+      <b-row id="main_container">
+        <b-col md="6">
+          <b-row>
+            <b-col md="6" offset-md="2">
+              <a href="/about"><p id="mag_title">Magiun</p></a>
+            </b-col>
+            <b-col id="edition">Summer 2021
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col md="8" offset-md="6">
+                <b-img class="img-fluid" id="magi" src="media/magiun2/unnamed.png"> </b-img>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col md="6" offset-md="2">
+              <p id="mag_subtitle">#2 On adapting</p>
+            </b-col>
+          </b-row>
+        </b-col>
+        <b-col md="4" offset-md="1">
+          <b-row>
+            <b-col id="toc">
+              <p class="recipe_title">Contents</p>
+              <p class="item"><a href="/knife">PAPER THIN</a><br>
+                <span class="author">Yoana Buzova</span>
+              </p>
+              <p class="item"><a href="/simmered">SIMMERED EGG</a><br>
+                <span class="author">Dorothy Cheung</span>
+              </p>
+              <p class="item"><a href="/soulsoup">CHICKEN SOUP FOR SOUL</a><br>
+                <span class="author">Patricia Cirtog</span>
+              </p>
+              <p class="item"><a href="/phone">CHRISTMAS DINNER</a><br>
+                <span class="author">Valentina Vella</span>
+              </p>
+              <p class="item"><a href="/whatwecan">WE DO WHAT WE CAN<br> WITH WHAT WE HAVE</a><br>
+                <span class="author">Raluca Chereji</span>
+              </p>
+              <p class="item"><a href="/lychee">HAVE YOU EATEN YET?</a><br>
+                <span class="author">Witold van Ratingen</span>
+              </p>
+              <p class="item"><a href="/anise">ADAPTING TO ADAPTATIONS</a><br>
+                <span class="author">Inge Hoonte</span>
+              </p>
+            </b-col>
+          </b-row>
+        </b-col>
+      </b-row>
       <b-row>
-<b-col md="8" offset-md="2" id="toc">
-  <p class="item"><a href="/knife">PAPER THIN</a><br>Yoana Buzova</p>
-  <br>
-  <p class="item"><a href="/simmered">SIMMERED EGG</a> <br>Dorothy Cheung</p>
-  <br>
-  <p class="item"><a href="/soulsoup">CHICKEN SOUP FOR SOUL</a><br>Patricia Cirtog</p>
-<br>
-  <p class="item"><a href="/phone">CHRISTMAS DINNER</a><br>Valentina Vella</p>
-  <br>
-  <p class="item"><a href="/whatwecan">WE DO WHAT WE CAN<br> WITH WHAT WE HAVE</a><br>Raluca Chereji</p>
-  <br>
-  <p class="item"><a href="/lychee">HAVE YOU EATEN YET?</a><br>Witold van Ratingen</p>
-  <br>
-  <p class="item"><a href="/anise">ADAPTING TO ADAPTATIONS</a><br>Inge Hoonte</p>
-
-
-
-
-
-
-
-
-
-</b-col>
+        <b-col>
+          <footer>
+            <p class="footer_page">This web publication was created by Alice Strete</p>
+          </footer>
+        </b-col>
       </b-row>
-    </b-col>
-    </b-row>
-<!--
-<b-row>
-<b-col md="4" offset-md="4">
-  <p id="toc">Inside</p>
-</b-col>
-</b-row>
-
-<b-row class="icons">
-  <b-col md="2" offset-md="3">
-  </b-col>
-
-  <b-col md="2">
-    <p class="item"><a href="/knife">Knife</a></p>
-
-  </b-col>
-  <b-col md="2" order="0" order-sm="1">
-
-    <a href="/knife"><b-img class="img-fluid" id="knife" center alt="Responsive image" src="media/magiun2/knife_small.png"></b-img></a>
-  </b-col>
-
-</b-row>
-
-
-<b-row class="icons">
-  <b-col md="2" offset-md="3">
-<a href="/simmered"><b-img class="img-fluid" id="porcini" center alt="Responsive image" src="media/magiun2/porcini_small.png"></b-img></a>
-  </b-col>
-  <b-col md="2" order="1" order-sm="0">
-<p class="item"><a href="/simmered">Simmered Egg</a></p>
-
-  </b-col>
-
-
-</b-row>
-<b-row class="icons">
-  <b-col md="2" offset-md="3">
-  </b-col>
-
-  <b-col md="2">
-    <p class="item"><a href="/soulsoup">Chicken soup for soul</a></p>
-
-  </b-col>
-  <b-col md="2" order="2" order-sm="1">
-
-    <a href="/soulsoup"><b-img class="img-fluid" id="cauliflower" center alt="Responsive image" src="media/magiun2/cauliflower_small.png"></b-img></a>
-  </b-col>
-</b-row>
-<b-row class="icons">
-  <b-col md="2" offset-md="3">
-<a href="/phone"><b-img class="img-fluid" id="phone" center alt="Responsive image" src="media/magiun2/phone_small.png"></b-img></a>
-  </b-col>
-
-  <b-col md="2">
-    <p class="item"><a href="/phone">Christmas dinner</a></p>
-
-  </b-col>
-
-</b-row>
-<b-row class="icons">
-
-  <b-col md="2" offset-md="5">
-    <p class="item"><a href="/whatwecan">We do what we can with what we have</a></p>
-
-  </b-col>
-  <b-col md="2" order="2" order-sm="1">
-
-    <a href="/whatwecan"><b-img class="img-fluid" id="clothes" center alt="Responsive image" src="media/magiun2/clothes_small.png"></b-img></a>
-  </b-col>
-</b-row>
-<b-row class="icons">
-  <b-col md="2" offset-md="3">
-<a href="/lychee"><b-img class="img-fluid" id="lychee" center alt="Responsive image" src="media/magiun2/lychee_small.png"></b-img></a>
-  </b-col>
-
-  <b-col md="2">
-    <p class="item"><a href="/lychee">Have you eaten yet?</a></p>
-
-  </b-col>
-
-</b-row>
-
-<b-row class="icons">
-
-
-  <b-col md="2" offset-md="5">
-    <p class="item"><a href="/anise">Adapting to adaptations</a></p>
-
-  </b-col>
-  <b-col md="2" order="2" order-sm="1">
-  <a href="/anise"><b-img class="img-fluid" id="anise" center alt="Responsive image" src="media/magiun2/anise_small.png"></b-img></a>
-  </b-col>
-</b-row> -->
-<b-row>
-  <b-col>
-<footer>
-  <p class="footer_page">This web publication was created by Alice Strete</p>
-</footer>
-  </b-col>
-</b-row>
-</b-container>
-
-
-
+  </b-container>
 </div>
-
 </template>
 
 <script>
diff --git a/src/components/anise.vue b/src/components/anise.vue
index a6fb95d..043487a 100644
--- a/src/components/anise.vue
+++ b/src/components/anise.vue
@@ -21,10 +21,10 @@
   font-family: 'ED Regular';
   src: url('../../fonts/ED-Regular.otf');
 }
+
 * {
     border: 0px black solid;
-    background-color: white;
-
+    background-color: transparent;
 }
 
 .container_width {
@@ -32,14 +32,12 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 70px;
-
 }
 
 
 a:hover {
   color: hotpink;
   text-decoration: none;
-
 }
 
 a {
@@ -49,66 +47,86 @@ a {
 .content {
   /*padding-right: 50px;*/
   /*padding-left: 60px;*/
-  padding-top: 40px;
   font-family: 'Happy Times';
   font-size: 18px;
   line-height: 24px;
-  padding-bottom: 40px;
+  /*padding-bottom: 40px;*/
   color: #1B75BC;
   text-align: left;
-
 }
 
 .controls {
-  margin-top: 60px;
-}
+  padding-top: 12px;
+  height: 120px;
+  z-index: 1;
+  position: relative;
+  }
 
-.arrows {
+.title_story {
   font-size: 80px;
   font-family: 'Semi Light Dots', sans-serif;
   padding-top: 20px;
   color: #FA00FF;
-  vertical-align: top;
   text-align: center;
 }
 
-.title_story {
+.arrows {
   font-size: 80px;
   font-family: 'Semi Light Dots', sans-serif;
-  padding-top: 20px;
+  top: 36px;
   color: #FA00FF;
-  text-align: center;
+  vertical-align: top;
+  position: fixed;
+  overflow: hidden;
 }
 
-.image_container {
+.arrows a {
+    display: block;
+}
 
-  padding-top: 5px;
+#leftarrow {
+  float: left;
+  color: #FA00FF;
 }
 
-.author {
-  font-size: 20px;
-  font-family: 'ED Regular', sans-serif;;
-  text-align: center;
+#rightarrow {
+  float: right;
   color: #FA00FF;
 }
 
+.image_container {
+  padding-top: 5px;
+}
 
-.small_icon {
-  max-width: 60%;
-  padding-top: 100px;
+.photo {
+-webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+        width: auto;
+  max-height: 100%;
+  max-width: 100%;
+  padding: 12px;
 }
 
-.zoom {
-  max-width: 60%;
+.img-fluid {
+  filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
+  max-height: 100%;
+  max-width: 100%;
+  }
+
+.author {
+  font-size: 20px;
+  font-family: 'ED-regular', sans-serif;;
+  text-align: center;
+  color: #FA00FF;
 }
 
 .recipe_block {
-  padding-top: 20px;
-  margin-top: 20px;
+  padding: 18px;
+  margin-bottom: 18px;
   font-size: 15px;
   font-family: 'Monospaced Dots', monospace;
-  border: 3px dotted #FA00FF;
-  margin-bottom: 30px;
+  border: 5px dotted #FA00FF;
+  /*margin-bottom: 24px;*/
 }
 
 #aniseillu {
@@ -119,8 +137,7 @@ a {
 .recipe_title {
   font-family: 'Bold Big Dots', monospace;
   font-size: 200%;
-  padding-bottom: 20px;
-  z-index: 10;
+  padding-bottom: 18px;
 }
 
 .recipe {
@@ -128,16 +145,25 @@ a {
   font-weight: bold;
 }
 
+.small_icon {
+  max-width: 60%;
+  padding-top: 100px;
+}
+
+.zoom {
+  max-width: 100%;
+}
+
 @media (max-width: 575px){
      .small_icon {
        display: none;
 
      }
      .title_story {
-       font-size: 30px;
+       font-size: 48px;
      }
      .author {
-       font-size: 15px;
+       font-size: 21px;
      }
    }
 
@@ -146,141 +172,105 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-
-    <b-row>
-      <b-col md="2" class="controls">
-        <p class="arrows">←</p>
-      </b-col>
-      <b-col md="2" offset-md="8" class="controls">
-        <p class='arrows'>→</p>
+    <b-row class="controls">
+      <b-col md="12" class="arrows">
+        <a href="/lychee" id="leftarrow">←</a>
+        <a href="/" id="rightarrow">→</a>
       </b-col>
     </b-row>
-
     <b-row>
       <b-col md="4">
         <b-row>
-          <b-col md="10" offset-md="3">
-        <div class="zoom">
-          <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise.png"> </b-img>
-        </div>
-      </b-col>
-      </b-row>
-      <b-row>
-        <b-col md="12">
-        <p class="title_story">Adapting to Adaptations</p>
-      </b-col>
-      </b-row>
+          <b-col md="6" offset-md="3">
+            <div class="zoom">
+              <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise.png"> </b-img>
+            </div>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col md="12">
+          <p class="title_story">Adapting to Adaptations</p>
+          </b-col>
+        </b-row>
         <b-row>
           <b-col md="12">
             <p class="author">essay and recipes by Inge Hoonte</p>
-
           </b-col>
         </b-row>
       </b-col>
-        <b-col md="5">
-<div class='content'>
-
-<p>The majority of my cooking consists of throwing together whatever's in my fridge and cupboards. And, gladly, what I've grown or surprisingly harvested from the yard that came with my new apartment!
-</p>
-* The last years, but even more so these months, I rarely shop for precise ingredients to make a specific dish.</p>
-<p>
-** If I have guests over for dinner, I tend to make more of an effort, and I sometimes regret not making such an effort for myself. With a handful (or two) of exceptions, I have spent this past year cooking and eating solo.</p>
-<p>
-*** I don't mean to make that sound sadder than it is, it is how it is, but I do miss having friends over and eating together...
-</p>
-<p>
-**** EXCEPTIONS TO ADAPTATIONS THAT ARE STILL ADAPTATIONS
-</p>
-<p> Like most people, the way I cook (and shop) has changed. It's more sparse, probably a bit boring, and at the same time more creative as I replace ingredients with what I have. Getting a "want/need/crave" item around meal times is no longer part of my life. In the beginning of the pandemic, I was that woman retreating, jumping back or even running away when people approached. The woman who snapped at people, and had to calm down in the quietest part of the store (if you're in need, try the dietary restriction or health food section). For a couple months, I only went to one store, close by, where I knew where everything was, so I could go in and out as fast as I could. A friend jokingly called me an old lady, I call it taking care of my mental health. I soon began shopping in the morning when it's more quiet (yep, right after granny hour), and almost a year later I still don't go around peak hours. I don't plan meals, I just grab a variety of fruit and veggies for up to a week, and add tofu, seitan, tempeh, lentils and beans, sometimes a fun (though generally low in protein) burger or an add-water-nut-burger-mix. The downside is that my meals could use a bit more spice and spunk, the upside is that I buy and eat way less candy, chocolate, cookies, chips and dessert-type things that lure your low glucose levels in the rush toward dinner time. </p>
-<p>With baking, it usually starts something like this:
-	I have a couple overripe bananas that have been sitting there for a few days, so I make banana bread (which I bring on my bike rides). I adapt the recipe with peanut butter, nuts, cocoa powder, raisins, dates, whatever I have and feel like adding.
-	Or a friend sends me a message that she's eating chocolate with green tea flavor. This leaves me craving ginger flavored chocolate, but the buying of ingredients will have to wait until the less crowded morning. Super fun to make though! See details below.
-	Or: last week after dinner, I suddenly felt like a sweet dessert. I didn't have anything readymade but I did have chocolate sprinkles, flour and oatmeal. So I looked up a recipe for cookies and started dragging the main ingredients out of the cupboards. A word of warning: although it's fun to try, you cannot just simply replace ingredients that seem similar. I've made scones with coconut creme instead of soyghurt. Not a great idea. I've subbed flour with some leftover coconut flour. Not a good idea either. The consistency requires other adaptations, and it all ends up being a wet, soggy mess. Other times adapting recipes works out great though! Chocolate sprinkle cookies.</p>
-  <p>* One big adaptation has been cooking with edible weeds from the garden. When I got here, the soil was covered with stinging nettles, which I removed. The next season, instead of nettles, a strange looking fragile little green thing came up, growing small thin leaves. When it started to get bigger and the field more massive, I finally realized I hadn't sown this, and that it was probably weed. I sent some pictures to my sister, who did some googling and thought it was an edible weed. I installed an app that helps identify plants, and figured out it was goose foot (melganzevoet), which people were growing and eating up until the 1950s, when it was replaced by the more sturdy and supermarket-friendly version: spinach. Goose foot is very similar to spinach, and rich in nutrients. I even ended up trading it for bread, with a neighbor who likes to bake. </p>
-  <p>** My mom gave me some vouchers for free vegetarian groceries at AH. In the envelope she sent were some very uninteresting, basic vegetarian recipe cards, but there was one I hadn't made for a long time: lasagna. I easily adapted it from vegetarian to vegan, and used the purslane we got at the food coop. </p>
-  <p>*** with some non-spicy portions of my veggies to give to the cats. Of course I do research on what they're allowed to have, in small doses, and they were very interesting in trying pumpkin, sweet potato and broccoli. Especially the little cat has a sweet tooth, and wants in on the fruits as well. So far she's tried mango, kiwi, lychee, and kaki fruit. </p>
-  <p>**** But the main exception this past year is my quest to copy Coppi's coconut macaroons. They sell them at Coppi Koffie on the Bergweg, and I love them so much that when I felt less comfortable going out in March/April 2020, I started making them myself. The first time, I made them for a friend's 40th birthday in April. Instead of a fun celebration in the park, her birthday weekend was a super stressful stay-at-home version of a Christmas dinner, where she was catering to all of her family, and her boyfriend's family. The typical running around serving everybody on your own day. So we went for a "distance walk," and ate coconut cookies. This version followed a recipe that adds flour, so they weren't macaroons at all, but crisp cookies. Slightly failed and stale, actually, although Ilse assured to thank me for this birthday gift. </p>
-  <p>I have made them four times now (I got distracted by copying Spirit's scones), and tried a different recipe each time. I'm not even remotely close to Elise's version at all. Not even after I told her that if I can make these, and make them well, all the corona isolation will have had at least some... productive outcome, upon which she revealed her ingredients to me, and when I tried it like that, it still wasn't the way she makes them, but it's been a fun challenge to keep working on adapting the recipe. By now it almost feels like, that if I finally manage to make it the way Elise makes them... All this endless solo baking, solo eating, will be over, maybe?</p>
-  <p>By now I've babbled on for way too long to have space for recipes, and you can figure out most of my simple baking on your own, so here's the main idea....</p>
-
-</div>
-
+      <b-col md="5">
+        <div class='content'>
+          <p>The majority of my cooking consists of throwing together whatever's in my fridge and cupboards. And, gladly, what I've grown or surprisingly harvested from the yard that came with my new apartment!</p>
+          <p>* The last years, but even more so these months, I rarely shop for precise ingredients to make a specific dish.</p>
+          <p>** If I have guests over for dinner, I tend to make more of an effort, and I sometimes regret not making such an effort for myself. With a handful (or two) of exceptions, I have spent this past year cooking and eating solo.</p>
+          <p>*** I don't mean to make that sound sadder than it is, it is how it is, but I do miss having friends over and eating together...</p>
+          <p>**** EXCEPTIONS TO ADAPTATIONS THAT ARE STILL ADAPTATIONS</p>
+          <p>Like most people, the way I cook (and shop) has changed. It's more sparse, probably a bit boring, and at the same time more creative as I replace ingredients with what I have. Getting a "want/need/crave" item around meal times is no longer part of my life. In the beginning of the pandemic, I was that woman retreating, jumping back or even running away when people approached. The woman who snapped at people, and had to calm down in the quietest part of the store (if you're in need, try the dietary restriction or health food section). For a couple months, I only went to one store, close by, where I knew where everything was, so I could go in and out as fast as I could. A friend jokingly called me an old lady, I call it taking care of my mental health. I soon began shopping in the morning when it's more quiet (yep, right after granny hour), and almost a year later I still don't go around peak hours. I don't plan meals, I just grab a variety of fruit and veggies for up to a week, and add tofu, seitan, tempeh, lentils and beans, sometimes a fun (though generally low in protein) burger or an add-water-nut-burger-mix. The downside is that my meals could use a bit more spice and spunk, the upside is that I buy and eat way less candy, chocolate, cookies, chips and dessert-type things that lure your low glucose levels in the rush toward dinner time.</p>
+          <p>With baking, it usually starts something like this:</p>
+          <p>I have a couple overripe bananas that have been sitting there for a few days, so I make banana bread (which I bring on my bike rides). I adapt the recipe with peanut butter, nuts, cocoa powder, raisins, dates, whatever I have and feel like adding.</p>
+          <p>Or a friend sends me a message that she's eating chocolate with green tea flavor. This leaves me craving ginger flavored chocolate, but the buying of ingredients will have to wait until the less crowded morning. Super fun to make though! See details below.</p>
+          <p>Or: last week after dinner, I suddenly felt like a sweet dessert. I didn't have anything readymade but I did have chocolate sprinkles, flour and oatmeal. So I looked up a recipe for cookies and started dragging the main ingredients out of the cupboards. A word of warning: although it's fun to try, you cannot just simply replace ingredients that seem similar. I've made scones with coconut creme instead of soyghurt. Not a great idea. I've subbed flour with some leftover coconut flour. Not a good idea either. The consistency requires other adaptations, and it all ends up being a wet, soggy mess. Other times adapting recipes works out great though! Chocolate sprinkle cookies.</p>
+          <p>* One big adaptation has been cooking with edible weeds from the garden. When I got here, the soil was covered with stinging nettles, which I removed. The next season, instead of nettles, a strange looking fragile little green thing came up, growing small thin leaves. When it started to get bigger and the field more massive, I finally realized I hadn't sown this, and that it was probably weed. I sent some pictures to my sister, who did some googling and thought it was an edible weed. I installed an app that helps identify plants, and figured out it was goose foot (melganzevoet), which people were growing and eating up until the 1950s, when it was replaced by the more sturdy and supermarket-friendly version: spinach. Goose foot is very similar to spinach, and rich in nutrients. I even ended up trading it for bread, with a neighbor who likes to bake.</p>
+          <p>** My mom gave me some vouchers for free vegetarian groceries at AH. In the envelope she sent were some very uninteresting, basic vegetarian recipe cards, but there was one I hadn't made for a long time: lasagna. I easily adapted it from vegetarian to vegan, and used the purslane we got at the food coop.</p>
+          <p>*** with some non-spicy portions of my veggies to give to the cats. Of course I do research on what they're allowed to have, in small doses, and they were very interesting in trying pumpkin, sweet potato and broccoli. Especially the little cat has a sweet tooth, and wants in on the fruits as well. So far she's tried mango, kiwi, lychee, and kaki fruit. </p>
+          <p>**** But the main exception this past year is my quest to copy Coppi's coconut macaroons. They sell them at Coppi Koffie on the Bergweg, and I love them so much that when I felt less comfortable going out in March/April 2020, I started making them myself. The first time, I made them for a friend's 40th birthday in April. Instead of a fun celebration in the park, her birthday weekend was a super stressful stay-at-home version of a Christmas dinner, where she was catering to all of her family, and her boyfriend's family. The typical running around serving everybody on your own day. So we went for a "distance walk," and ate coconut cookies. This version followed a recipe that adds flour, so they weren't macaroons at all, but crisp cookies. Slightly failed and stale, actually, although Ilse assured to thank me for this birthday gift.</p>
+          <p>I have made them four times now (I got distracted by copying Spirit's scones), and tried a different recipe each time. I'm not even remotely close to Elise's version at all. Not even after I told her that if I can make these, and make them well, all the corona isolation will have had at least some... productive outcome, upon which she revealed her ingredients to me, and when I tried it like that, it still wasn't the way she makes them, but it's been a fun challenge to keep working on adapting the recipe. By now it almost feels like, that if I finally manage to make it the way Elise makes them... All this endless solo baking, solo eating, will be over, maybe?</p>
+          <p>By now I've babbled on for way too long to have space for recipes, and you can figure out most of my simple baking on your own, so here's the main idea....</p>
+        </div>
+        <b-col class="recipe_block">
+          <b-row>
+            <b-col>
+              <p class="recipe_title">  POUR YOURSELF <br> A <br> QUARANTINI</p>
+            </b-col>
+            <b-col>
+              <div class="image_container">
+                <b-img class="img-fluid" id="photo" src="media/magiun2/anise_cup.jpeg"> </b-img>
+              </div>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <div class="recipe">
+                <p>In a mid-sized pan, pour 1L of dark/organic apple juice, or apple cider. Add 2-3 cm raw ginger in thin slices. Add 1 star anise, 3 black peppercorns, 3 whole cloves, and 1 cinnamon stick (or ground). Heat the mix, but don't let it boil.</p>
+                <p>The recipe calls for 400ml of brown rum (I used Kraken, which is nice and spicy already). I used about 200ml, halved the recipe, and ended up adding too much anise in relation, don't recommend, it becomes too licorice-y.</p>
+                <p>You can make it right before you need it and as much as you need, or store it in the fridge.</p>
+                <p>Optional adaptation: Start the other way around, and add all the spices to the rum, instead of the apple juice.</p>
+                <p>My family has a wide range of likes and dislikes and I kept this in mind too much. Mom is on a low carb diet to balance her insulin levels, so I replaced apple juice with zero sugar ginger ale, served cold. My sister doesn't like warm alcoholic drinks, nor ginger. So she got plain cold spiced rum (already infused with ginger, I hoped she wouldn't notice and she didn't). Her boyfriend appreciates fine liquors, so I added a double dose of rum to his mix. In the end, the original recipe was so completely warped, that I ended up making it again for myself on December 31st, solo, the way I wanted to make it.</p>
+              </div>
+            </b-col>
+          </b-row>
+        </b-col>
+        <b-col class="recipe_block">
+          <b-row>
+            <b-col>
+              <p class="recipe_title">CHOCOLATE COVERED <br>A N Y T H I N G</p>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <b-img class="img-fluid" id="photo" src="media/magiun2/chocolate.jpg"> </b-img>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <div class="recipe">
+                <p>Ingredients<br>
+                - One 100g bar of dark chocolate (72-85%)<br>
+                - About 150g of cut up pieces of dried fruit<br></p>
+                <p>Adaptation<br>
+                - 75g<br> 
+                - 100g of anything that tastes great with chocolate!</p>
+                <p>Needed: small wooden spoon, chopsticks.</p>
+                <p>Cut the candied ginger, dried fruit, raisins, nuts, etc. Put a large baking sheet on your counter (place it on a tray or oven rack, so you can move it).</p>
+                <p>Place a small, sturdy ceramic bowl inside a pan with water. Use the burner that's closest to your working area. Bring to a boil and let it simmer low. Break the chocolate into pieces and add to the bowl. Stir with a small wooden spoon until it's all evenly melted.</p>
+                <p>Throw a couple pieces of fruit/nuts into the chocolate and make sure they're fully covered. Use chopsticks to retrieve them, let the excess drip back into the bowl. Lay the candy on the baking sheet, leave a bit of space in between. If you have any chocolate left at the end, you can drip it in a fun shape. When you're all done, place the sheet in the fridge for about 30min or until hard.</p>
+              </div>
+            </b-col>
+          </b-row>
+        </b-col>
       </b-col>
-</b-row>
-
-
-<b-row>
-
-<b-col md="4" offset-md="2" class="recipe_block">
-<b-row>
-  <b-col>
-      <p class="recipe_title">  POUR YOURSELF <br> A <br> QUARANTINI</p>
-  </b-col>
-<b-col>
-    <div class="image_container">
-      <b-img class="img-fluid" id="anisecup" src="media/magiun2/anise_cup.jpeg"> </b-img>
-    </div>
-</b-col>
-</b-row>
-<b-row>
-  <b-col>
-    <div class="recipe">
-  <p>
-In a mid-sized pan, pour 1L of dark/organic apple juice, or apple cider. Add 2-3 cm raw ginger in thin slices. Add 1 star anise, 3 black peppercorns, 3 whole cloves, and 1 cinnamon stick (or ground). Heat the mix, but don't let it boil.</p>
-<p>
-The recipe calls for 400ml of brown rum (I used Kraken, which is nice and spicy already). I used about 200ml, halved the recipe, and ended up adding too much anise in relation, don't recommend, it becomes too licorice-y.
-You can make it right before you need it and as much as you need, or store it in the fridge.</p>
-
-<p>
-Optional adaptation: Start the other way around, and add all the spices to the rum, instead of the apple juice.</p>
-<p>
-My family has a wide range of likes and dislikes and I kept this in mind too much. Mom is on a low carb diet to balance her insulin levels, so I replaced apple juice with zero sugar ginger ale, served cold. My sister doesn't like warm alcoholic drinks, nor ginger. So she got plain cold spiced rum (already infused with ginger, I hoped she wouldn't notice and she didn't). Her boyfriend appreciates fine liquors, so I added a double dose of rum to his mix. In the end, the original recipe was so completely warped, that I ended up making it again for myself on December 31st, solo, the way I wanted to make it.</p>
-</div>
-</b-col>
-</b-row>
-</b-col>
-
-<b-col md="4" offset-md="1" class="recipe_block">
-  <b-row>
-    <b-col>
-      <p class="recipe_title">CHOCOLATE COVERED <br>A N Y T H I N G</p>
-
-    </b-col>
-  </b-row>
-  <b-row>
-    <b-col>
-      <b-img class="img-fluid" id="knife" src="media/magiun2/chocolate.jpg"> </b-img>
-    </b-col>
-</b-row>
-<b-row>
-  <b-col>
-    <div class="recipe">
-
-<p>
-    Ingredients<br>
-    - One 100g bar of dark chocolate (72-85%)		 <br>
-    - About 150g of cut up pieces of dried fruit		<br>
-</p>
-<p>Adaptation <br>
-    - 75g <br> 
-    - 100g of anything that tastes great with chocolate!</p>
-<p>
-    Needed: small wooden spoon, chopsticks.</p>
-    <p>
-
-    Cut the candied ginger, dried fruit, raisins, nuts, etc. Put a large baking sheet on your counter (place it on a tray or oven rack, so you can move it).</p>
-    <p>
-
-    Place a small, sturdy ceramic bowl inside a pan with water. Use the burner that's closest to your working area. Bring to a boil and let it simmer low. Break the chocolate into pieces and add to the bowl. Stir with a small wooden spoon until it's all evenly melted.</p>
-<p>
-    Throw a couple pieces of fruit/nuts into the chocolate and make sure they're fully covered. Use chopsticks to retrieve them, let the excess drip back into the bowl. Lay the candy on the baking sheet, leave a bit of space in between. If you have any chocolate left at the end, you can drip it in a fun shape. When you're all done, place the sheet in the fridge for about 30min or until hard.</p>
-  </div>
-  </b-col>
-</b-row>
-</b-col>
-</b-row>
-        </b-container>
-
+    </b-row>
+  </b-container>
 </template>
 
 <script>
diff --git a/src/components/knife.vue b/src/components/knife.vue
index 78ff30e..6d219c4 100644
--- a/src/components/knife.vue
+++ b/src/components/knife.vue
@@ -6,14 +6,16 @@
   src: url('../../fonts/happy-times-NG_regular_master.otf');
 }
 @font-face {
-  font-family: 'SemiLightDots';
+  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: white;
-
+    background-color: transparent;
 }
 
 .container_width {
@@ -21,14 +23,12 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 70px;
-
 }
 
 
 a:hover {
   color: hotpink;
   text-decoration: none;
-
 }
 
 a {
@@ -36,96 +36,118 @@ a {
 }
 
 .content {
-  padding-right: 50px;
-  padding-top: 40px;
+  /*padding-right: 50px;*/
+  /*padding-left: 60px;*/
   font-family: 'Happy Times';
-  font-size: 15px;
-  padding-bottom: 40px;
-  padding-left: 60px;
+  font-size: 18px;
+  line-height: 24px;
+  /*padding-bottom: 40px;*/
   color: #1B75BC;
   text-align: left;
-
 }
+
 .controls {
-  margin-top: 60px;
-}
+  padding-top: 12px;
+  height: 120px;
+  z-index: 1;
+  position: relative;
+  }
 
 .title_story {
   font-size: 80px;
-  font-family: 'SemiLightDots', sans-serif;
+  font-family: 'Semi Light Dots', sans-serif;
   padding-top: 20px;
   color: #FA00FF;
   text-align: center;
 }
 
-.image_container {
+.arrows {
+  font-size: 80px;
+  font-family: 'Semi Light Dots', sans-serif;
+  top: 36px;
+  color: #FA00FF;
+  vertical-align: top;
+  position: fixed;
+  overflow: hidden;
+}
 
-  padding-top: 10px;
+.arrows a {
+    display: block;
 }
-.author {
-  font-size: 20px;
-  font-family: 'Poppins', sans-serif;;
-  text-align: center;
+
+#leftarrow {
+  float: left;
   color: #FA00FF;
 }
 
-.image_container img {
-  max-width: 80%;
-  margin-bottom: 10px;
+#rightarrow {
+  float: right;
+  color: #FA00FF;
 }
 
-.small_icon {
-  max-width: 20%;
-  padding-top: 100px;
+.image_container {
+  padding-top: 5px;
+}
 
+.photo {
+-webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+        width: auto;
+  max-height: 100%;
+  max-width: 100%;
+  padding: 12px;
 }
-.zoom {
-  max-width: 60%;
+
+.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;
 }
 
 
-#knife {
-  margin-top: 10px;
-  margin-left: 40px;
-  margin-bottom: 30px;
+.small_icon {
+  max-width: 60%;
+  padding-top: 100px;
 }
 
-#knifeillu {
-  margin-left: 40px;
-  margin-bottom: 0px;
+.zoom {
+  max-width: 100%;
 }
 
-   @media (max-width: 575px){
-        .small_icon {
-          display: none;
+@media (max-width: 575px){
+     .small_icon {
+       display: none;
 
-        }
-        .title_story {
-          font-size: 30px;
-        }
-        .author {
-          font-size: 15px;
-        }
-      }
+     }
+     .title_story {
+       font-size: 48px;
+     }
+     .author {
+       font-size: 21px;
+     }
+   }
 
 </style>
 
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-    <b-row>
-      <b-col md="2" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-      <b-col md="2" offset-md="8" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-    </b-row>
+      <b-row class="controls">
+        <b-col md="12" class="arrows">
+          <a href="/" id="leftarrow">←</a>
+          <a href="/simmered" id="rightarrow">→</a>
+        </b-col>
+      </b-row>
 
-    <b-row>
+      <b-row>
       <b-col md="4">
         <b-row>
-          <b-col md="10" offset-md="3">
+          <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>
@@ -165,7 +187,7 @@ My parents emptied out the house of my grandparents and it got sold. I kept the
   <b-container fluid>
     <div class="image_container">
 
-    <b-img class="img-fluid" id="knife" src="media/knife/My_Knife.jpg"> </b-img>
+    <b-img class="photo" src="media/knife/My_Knife.jpg"> </b-img>
 
 
 </div>
diff --git a/src/components/lychee.vue b/src/components/lychee.vue
index 122fdcc..518ec1b 100644
--- a/src/components/lychee.vue
+++ b/src/components/lychee.vue
@@ -5,10 +5,17 @@
   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: white;
-
+    background-color: transparent;
 }
 
 .container_width {
@@ -16,14 +23,12 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 70px;
-
 }
 
 
 a:hover {
   color: hotpink;
   text-decoration: none;
-
 }
 
 a {
@@ -31,37 +36,75 @@ a {
 }
 
 .content {
-  padding-right: 50px;
-  padding-top: 40px;
+  /*padding-right: 50px;*/
+  /*padding-left: 60px;*/
   font-family: 'Happy Times';
-  font-size: 15px;
-  padding-bottom: 40px;
-  padding-left: 60px;
+  font-size: 18px;
+  line-height: 24px;
+  /*padding-bottom: 40px;*/
   color: #1B75BC;
   text-align: left;
-
 }
 
 .controls {
-  margin-top: 60px;
-}
+  padding-top: 12px;
+  height: 120px;
+  z-index: 1;
+  position: relative;
+  }
 
 .title_story {
   font-size: 80px;
-  font-family: 'Work Sans', sans-serif;
+  font-family: 'Semi Light Dots', sans-serif;
   padding-top: 20px;
   color: #FA00FF;
   text-align: center;
 }
 
-.image_container {
+.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: 'Poppins', sans-serif;;
+  font-family: 'ED-regular', sans-serif;;
   text-align: center;
   color: #FA00FF;
 }
@@ -73,7 +116,7 @@ a {
 }
 
 .zoom {
-  max-width: 60%;
+  max-width: 100%;
 }
 
 @media (max-width: 575px){
@@ -82,10 +125,10 @@ a {
 
      }
      .title_story {
-       font-size: 30px;
+       font-size: 48px;
      }
      .author {
-       font-size: 15px;
+       font-size: 21px;
      }
    }
 
@@ -94,19 +137,17 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-    <b-row>
-      <b-col md="2" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-      <b-col md="2" offset-md="8" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-    </b-row>
+    <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="10" offset-md="3">
+          <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>
@@ -129,7 +170,7 @@ a {
 
 <div class='content'>
 
-<p>Have You Eaten Yet? <br>
+<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>
diff --git a/src/components/phone.vue b/src/components/phone.vue
index fd18025..63e7862 100644
--- a/src/components/phone.vue
+++ b/src/components/phone.vue
@@ -5,10 +5,17 @@
   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: white;
-
+    background-color: transparent;
 }
 
 .container_width {
@@ -16,14 +23,12 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 70px;
-
 }
 
 
 a:hover {
   color: hotpink;
   text-decoration: none;
-
 }
 
 a {
@@ -31,66 +36,103 @@ a {
 }
 
 .content {
-  padding-right: 50px;
-  padding-top: 40px;
+  /*padding-right: 50px;*/
+  /*padding-left: 60px;*/
   font-family: 'Happy Times';
-  font-size: 15px;
-  padding-bottom: 40px;
-  padding-left: 60px;
+  font-size: 18px;
+  line-height: 24px;
+  /*padding-bottom: 40px;*/
   color: #1B75BC;
   text-align: left;
-
 }
 
 .controls {
-  margin-top: 60px;
-}
+  padding-top: 12px;
+  height: 120px;
+  z-index: 1;
+  position: relative;
+  }
 
 .title_story {
   font-size: 80px;
-  font-family: 'Work Sans', sans-serif;
+  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;
+}
 
-  padding-top: 10px;
+.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: 'Poppins', sans-serif;;
+  font-family: 'ED-regular', sans-serif;;
   text-align: center;
   color: #FA00FF;
 }
 
-.image_container img {
-  max-width: 80%
+.dialogue {
+  /*font-family: 'ED-Regular', sans-serif;*/
+  margin-left: 36px;
 }
 
 .small_icon {
   max-width: 60%;
   padding-top: 100px;
-
 }
 
 .zoom {
-  max-width: 60%;
+  max-width: 100%;
 }
 
-
 @media (max-width: 575px){
      .small_icon {
        display: none;
 
      }
      .title_story {
-       font-size: 30px;
+       font-size: 48px;
      }
      .author {
-       font-size: 15px;
+       font-size: 21px;
      }
    }
 
@@ -99,18 +141,17 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-    <b-row>
-      <b-col md="2" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-      <b-col md="2" offset-md="8" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-    </b-row>
+    <b-row class="controls">
+        <b-col md="12" class="arrows">
+          <a href="/soulsoup" id="leftarrow">←</a>
+          <a href="/whatwecan" id="rightarrow">→</a>
+        </b-col>
+      </b-row>
+
     <b-row>
       <b-col md="4">
         <b-row>
-          <b-col md="10" offset-md="3">
+          <b-col md="6" offset-md="3">
         <div class="zoom">
   <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone.png"> </b-img>
         </div>
@@ -132,43 +173,44 @@ a {
   <b-col md="5">
 <div class='content'>
 
-<p>
+<p class="monologue">
   Two tablespoons olive oil, plus extra<br>
-  his hair was soft and silvery<br>
+  <span class="dialogue">his hair was soft and silvery</span><br>
   three pounds yellow onions peeled and sliced into half moons<br>
-  his hands moved gracefully across the piano<br>
+  <span class="dialogue">his hands moved gracefully across the piano</span><br>
   sea salt and ground black pepper, to taste<br>
-  he married the wrong woman<br>
+  
+  <span class="dialogue">he married the wrong woman</span><br>
   one tablespoon thyme leaves, minced<br>
-  I wouldn’t be here if he hadn’t<br>
+  <span class="dialogue">I wouldn’t be here if he hadn’t</span><br>
   one bay leaf<br>
-  most days she didn’t know who he was<br>
+  <span class="dialogue">most days she didn’t know who he was</span><br>
   one clove of garlic, minced<br>
-  the lockdown put an end to his daily walks<br>
+  <span class="dialogue">the lockdown put an end to his daily walks</span><br>
   one tablespoon tomato paste<br>
-  he directed operas in the eighties<br>
+  <span class="dialogue">he directed operas in the eighties</span><br>
   one 1⁄2 cups French lentils, rinsed<br>
-  he spent his 93rd year watching soccer games alone<br>
+  <span class="dialogue">he spent his 93rd year watching soccer games alone</span><br>
   one 1⁄2 tablespoons sherry/balsamic vinegar<br>
-  hoping to hear from us<br>
+  <span class="dialogue">hoping to hear from us</span><br>
   one 1⁄2 tablespoons gluten-free tamari soy sauce<br>
-  we rarely called<br>
+  <span class="dialogue">we rarely called</span><br>
   five cups vegetable stock, plus extra<br>
-  I should have called<br>
+  <span class="dialogue">I should have called</span><br>
   two cups water<br>
-  I should have called every day or moved back home<br>
+  <span class="dialogue">I should have called every day or moved back home</span><br>
   two cloves of garlic, peeled and smashed<br>
-  when I come back to the kitchen after hanging up the phone<br>
+  <span class="dialogue">when I come back to the kitchen after hanging up the phone</span><br>
   one 1⁄2 pound Yukon gold potatoes, peeled and chopped<br>
-  the lentils are sticking to the bottom of the pot<br>
+  <span class="dialogue">the lentils are sticking to the bottom of the pot</span><br>
   four cups cauliflower florets (from approximately 1⁄2 a large head)<br>
-  I’m turning the wooden spoon mechanically<br>
+  <span class="dialogue">I’m turning the wooden spoon mechanically</span><br>
   four tablespoons vegan butter, at room temperature<br>
-  he’s dead, I mumble<br>
+  <span class="dialogue">he’s dead, I mumble</span><br>
   1⁄2 cup unsweetened non-dairy milk<br>
-  it isn’t dead says Witold, just a little burnt<br>
+  <span class="dialogue">it isn’t dead says Witold, just a little burnt</span><br>
   one tablespoon nutritional yeast<br>
-  no, he’s dead, he’s dead,<br>
+  <span class="dialogue">no, he’s dead, he’s dead,</span><br>
   sea salt and ground black pepper, to taste.</p>
 </div>
 </b-col>
diff --git a/src/components/simmered.vue b/src/components/simmered.vue
index 5e90053..ec2be27 100644
--- a/src/components/simmered.vue
+++ b/src/components/simmered.vue
@@ -5,10 +5,17 @@
   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: white;
-
+    background-color: transparent;
 }
 
 .container_width {
@@ -16,14 +23,12 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 70px;
-
 }
 
 
 a:hover {
   color: hotpink;
   text-decoration: none;
-
 }
 
 a {
@@ -31,55 +36,87 @@ a {
 }
 
 .content {
-  padding-right: 50px;
-  padding-top: 40px;
+  /*padding-right: 50px;*/
+  /*padding-left: 60px;*/
   font-family: 'Happy Times';
-  font-size: 15px;
-  padding-bottom: 40px;
-  padding-left: 60px;
+  font-size: 18px;
+  line-height: 24px;
+  /*padding-bottom: 40px;*/
   color: #1B75BC;
   text-align: left;
-
 }
+
 .controls {
-  margin-top: 60px;
-}
+  padding-top: 12px;
+  height: 120px;
+  z-index: 1;
+  position: relative;
+  }
 
 .title_story {
   font-size: 80px;
-  font-family: 'Work Sans', sans-serif;
+  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;
+}
 
-  padding-top: 10px;
+.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: 'Poppins', sans-serif;;
+  font-family: 'ED-regular', sans-serif;;
   text-align: center;
   color: #FA00FF;
 }
 
-.image_container img {
-  max-width: 80%;
-  margin-bottom: 10px;
-}
 
 .small_icon {
-  max-width: 20%;
-  padding-top: 100px;
-
-}
-.zoom {
   max-width: 60%;
+  padding-top: 100px;
 }
 
-#knife {
-  margin-top: 30px;
+.zoom {
+  max-width: 100%;
 }
 
 @media (max-width: 575px){
@@ -88,119 +125,76 @@ a {
 
      }
      .title_story {
-       font-size: 30px;
+       font-size: 48px;
      }
      .author {
-       font-size: 15px;
+       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="10" 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 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>
+            <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-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="img-fluid" id="knife" src="media/simmered/Simmeregg00.png"> </b-img>
-
-            </b-col>
-
-          </b-row>
-          <b-row>
-
-            <b-col md="10" offset-md="2">
-              <b-img class="img-fluid" id="knife" src="media/simmered/Simmeregg01.png"> </b-img>
-
-            </b-col>
-
-          </b-row>
-
-          <b-row>
-
-            <b-col md="10" offset-md="2">
-              <b-img class="img-fluid" id="knife" src="media/simmered/Simmeregg02.png"> </b-img>
-
-            </b-col>
-
-          </b-row>
-
-        </div>
-
+            <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>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
diff --git a/src/components/soulsoup.vue b/src/components/soulsoup.vue
index 6b259c6..a3c845e 100644
--- a/src/components/soulsoup.vue
+++ b/src/components/soulsoup.vue
@@ -5,10 +5,17 @@
   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: white;
-
+    background-color: transparent;
 }
 
 .container_width {
@@ -16,14 +23,12 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 70px;
-
 }
 
 
 a:hover {
   color: hotpink;
   text-decoration: none;
-
 }
 
 a {
@@ -31,37 +36,75 @@ a {
 }
 
 .content {
-  padding-right: 50px;
-  padding-top: 40px;
+  /*padding-right: 50px;*/
+  /*padding-left: 60px;*/
   font-family: 'Happy Times';
-  font-size: 15px;
-  padding-bottom: 40px;
-  padding-left: 60px;
+  font-size: 18px;
+  line-height: 24px;
+  /*padding-bottom: 40px;*/
   color: #1B75BC;
   text-align: left;
-
 }
 
 .controls {
-  margin-top: 60px;
-}
+  padding-top: 12px;
+  height: 120px;
+  z-index: 1;
+  position: relative;
+  }
 
 .title_story {
   font-size: 80px;
-  font-family: 'Work Sans', sans-serif;
+  font-family: 'Semi Light Dots', sans-serif;
   padding-top: 20px;
   color: #FA00FF;
   text-align: center;
 }
 
-.image_container {
+.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: 'Poppins', sans-serif;;
+  font-family: 'ED-regular', sans-serif;;
   text-align: center;
   color: #FA00FF;
 }
@@ -73,7 +116,7 @@ a {
 }
 
 .zoom {
-  max-width: 60%;
+  max-width: 100%;
 }
 
 @media (max-width: 575px){
@@ -82,10 +125,10 @@ a {
 
      }
      .title_story {
-       font-size: 30px;
+       font-size: 48px;
      }
      .author {
-       font-size: 15px;
+       font-size: 21px;
      }
    }
 
@@ -94,19 +137,17 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-    <b-row>
-      <b-col md="2" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-      <b-col md="2" offset-md="8" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-    </b-row>
+    <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="10" offset-md="3">
+          <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>
diff --git a/src/components/whatwecan.vue b/src/components/whatwecan.vue
index fba4682..7b4fef7 100644
--- a/src/components/whatwecan.vue
+++ b/src/components/whatwecan.vue
@@ -5,10 +5,17 @@
   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: white;
-
+    background-color: transparent;
 }
 
 .container_width {
@@ -16,14 +23,12 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 70px;
-
 }
 
 
 a:hover {
   color: hotpink;
   text-decoration: none;
-
 }
 
 a {
@@ -31,37 +36,75 @@ a {
 }
 
 .content {
-  padding-right: 50px;
-  padding-top: 40px;
+  /*padding-right: 50px;*/
+  /*padding-left: 60px;*/
   font-family: 'Happy Times';
-  font-size: 15px;
-  padding-bottom: 40px;
-  padding-left: 60px;
+  font-size: 18px;
+  line-height: 24px;
+  /*padding-bottom: 40px;*/
   color: #1B75BC;
   text-align: left;
-
 }
 
 .controls {
-  margin-top: 60px;
-}
+  padding-top: 12px;
+  height: 120px;
+  z-index: 1;
+  position: relative;
+  }
 
 .title_story {
   font-size: 80px;
-  font-family: 'Work Sans', sans-serif;
+  font-family: 'Semi Light Dots', sans-serif;
   padding-top: 20px;
   color: #FA00FF;
   text-align: center;
 }
 
-.image_container {
+.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: 'Poppins', sans-serif;;
+  font-family: 'ED-regular', sans-serif;;
   text-align: center;
   color: #FA00FF;
 }
@@ -73,7 +116,7 @@ a {
 }
 
 .zoom {
-  max-width: 60%;
+  max-width: 100%;
 }
 
 @media (max-width: 575px){
@@ -82,10 +125,10 @@ a {
 
      }
      .title_story {
-       font-size: 30px;
+       font-size: 48px;
      }
      .author {
-       font-size: 15px;
+       font-size: 21px;
      }
    }
 
@@ -94,19 +137,18 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-    <b-row>
-      <b-col md="2" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-      <b-col md="2" offset-md="8" class="controls">
-        <p>xxxxxxxxxxx</p>
-      </b-col>
-    </b-row>
+
+    <b-row class="controls">
+        <b-col md="12" class="arrows">
+          <a href="/phone" id="leftarrow">←</a>
+          <a href="/lychee" id="rightarrow">→</a>
+        </b-col>
+      </b-row>
 
     <b-row>
       <b-col md="4">
         <b-row>
-          <b-col md="10" offset-md="3">
+          <b-col md="6" offset-md="3">
         <div class="zoom">
 
         <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes.png"> </b-img>