From d42315ff5f558fcb5bb7f4aefb3b97b8648c07a4 Mon Sep 17 00:00:00 2001
From: alicestrt <alice.strt@gmail.com>
Date: Wed, 21 Jul 2021 14:43:39 +0200
Subject: [PATCH] implemented design changes

---
 src/components/MenuBar.vue   |  3 +-
 src/components/anise.vue     | 51 +++++++++++++++-------
 src/components/knife.vue     | 85 +++++++++++++++++++-----------------
 src/components/lychee.vue    | 15 +++++--
 src/components/phone.vue     | 77 ++++++++++++++++----------------
 src/components/simmered.vue  | 78 ++++++++++++++++-----------------
 src/components/soulsoup.vue  | 79 +++++++++++++++++----------------
 src/components/whatwecan.vue | 77 ++++++++++++++++----------------
 8 files changed, 254 insertions(+), 211 deletions(-)

diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index cf0119e..a5b27da 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -37,8 +37,7 @@ a:hover {
 }
 
 .navbar {
-  background-color: white;
-  border-bottom: 2px #ffcccc solid;
+  background-color: #C4C4C4;
 }
 
 @media (max-width: 575px) {
diff --git a/src/components/anise.vue b/src/components/anise.vue
index bfa3c75..dfd5066 100644
--- a/src/components/anise.vue
+++ b/src/components/anise.vue
@@ -1,10 +1,13 @@
 <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('../../dist/fonts/happy-times-NG_regular_master.otf');
+}
 * {
     border: 0px black solid;
-    background-color: #F7F7F7;
+    background-color: white;
 
 }
 
@@ -28,42 +31,49 @@ a {
 }
 
 .content {
-
-  padding-top: 20px;
-  font-family: 'Poppins', sans-serif;;
+  padding-right: 50px;
+  padding-top: 40px;
+  font-family: 'Happy Times';
   font-size: 15px;
-  padding-bottom: 10px;
+  padding-bottom: 40px;
   padding-left: 60px;
-  padding-right: 60px;
+  color: #1B75BC;
+  text-align: left;
 
 }
 
+.controls {
+  margin-top: 60px;
+}
+
 .title_story {
   font-size: 80px;
   font-family: 'Work Sans', sans-serif;
+  padding-top: 20px;
+  color: #FA00FF;
   text-align: center;
-  padding-top: 70px;
-  color: #333042
 }
 
+.image_container {
+
+  padding-top: 5px;
+}
 
 .author {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;;
   text-align: center;
-
-
+  color: #FA00FF;
 }
 
-.image_container img {
-  max-width: 50%;
-  margin-bottom: 10px;
-}
 
 .small_icon {
-  max-width: 20%;
+  max-width: 60%;
   padding-top: 100px;
+}
 
+.zoom {
+  max-width: 60%;
 }
 
 .recipe_block {
@@ -103,6 +113,15 @@ 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>
       <b-col md="1" offset-md="1" class="small_icon">
         <div class="zoom">
diff --git a/src/components/knife.vue b/src/components/knife.vue
index ec01cae..ea127ea 100644
--- a/src/components/knife.vue
+++ b/src/components/knife.vue
@@ -1,10 +1,13 @@
 <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('../../dist/fonts/happy-times-NG_regular_master.otf');
+}
 * {
     border: 0px black solid;
-    background-color: #F7F7F7;
+    background-color: white;
 
 }
 
@@ -28,35 +31,37 @@ a {
 }
 
 .content {
-
-  padding-top: 20px;
-  font-family: 'Poppins', sans-serif;;
+  padding-right: 50px;
+  padding-top: 40px;
+  font-family: 'Happy Times';
   font-size: 15px;
   padding-bottom: 40px;
   padding-left: 60px;
-  padding-right: 60px;
+  color: #1B75BC;
+  text-align: left;
 
 }
+.controls {
+  margin-top: 60px;
+}
 
 .title_story {
   font-size: 80px;
   font-family: 'Work Sans', sans-serif;
+  padding-top: 20px;
+  color: #FA00FF;
   text-align: center;
-  padding-top: 70px;
-  color: #333042
 }
 
 .image_container {
 
   padding-top: 10px;
 }
-
 .author {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;;
   text-align: center;
-
-
+  color: #FA00FF;
 }
 
 .image_container img {
@@ -69,6 +74,10 @@ a {
   padding-top: 100px;
 
 }
+.zoom {
+  max-width: 60%;
+}
+
 
 #knife {
   margin-top: 10px;
@@ -100,13 +109,29 @@ a {
   <b-container fluid class="p-0">
     <MenuBar/>
     <b-row>
-      <b-col md="1" offset-md="1" class="small_icon">
+      <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>
+      <b-col md="4">
+        <b-row>
+          <b-col md="10" offset-md="3">
         <div class="zoom">
-        <a href="/anise"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise_prev.png"> </b-img></a>
+      <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife.png"> </b-img>
       </div>
       </b-col>
-      <b-col md="8">
+      </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>
@@ -115,28 +140,9 @@ a {
         </b-row>
       </b-col>
 
-      <b-col md="1" class="small_icon">
-        <div class="zoom">
-        <a href="/simmered"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini_next.png"> </b-img></a>
-      </div>
-      </b-col>
-
-    </b-row>
 
+<b-col md="4">
 
-    <b-row>
-      <b-col md="8" offset-md="2">
-        <b-row>
-          <b-container fluid>
-            <div class="image_container">
-          <b-col md="6" offset-md="3">
-            <b-img class="img-fluid" id="knifeillu" src="media/magiun2/knife.png"> </b-img>
-
-          </b-col>
-        </div>
-
-        </b-container>
-        </b-row>
 <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>
@@ -149,18 +155,19 @@ At present day I own a potato peeler, because as everyone else I must do everyth
 <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-row>
+</b-col>
+<b-col md="4">
   <b-container fluid>
     <div class="image_container">
-  <b-col md="6" offset-md="3">
+
     <b-img class="img-fluid" id="knife" src="media/knife/My_Knife.jpg"> </b-img>
 
-  </b-col>
+
 </div>
 
 </b-container>
-</b-row>
-      </b-col>
+</b-col>
+
 
 </b-row>
       </b-container>
diff --git a/src/components/lychee.vue b/src/components/lychee.vue
index fc24003..9ddcd21 100644
--- a/src/components/lychee.vue
+++ b/src/components/lychee.vue
@@ -6,7 +6,7 @@
   src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
 }
 * {
-    border: 1px black solid;
+    border: 0px black solid;
     background-color: white;
 
 }
@@ -32,7 +32,7 @@ a {
 
 .content {
   padding-right: 50px;
-  padding-top: 100px;
+  padding-top: 40px;
   font-family: 'Happy Times';
   font-size: 15px;
   padding-bottom: 40px;
@@ -102,12 +102,21 @@ a {
         <p>xxxxxxxxxxx</p>
       </b-col>
     </b-row>
+    
     <b-row>
       <b-col md="4">
+        <b-row>
+          <b-col md="10" offset-md="3">
         <div class="zoom">
-          <a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img></a>
+          <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img>
         </div>
+      </b-col>
+      </b-row>
+      <b-row>
+        <b-col md="12">
         <p class="title_story">Have you eaten yet?</p>
+      </b-col>
+      </b-row>
         <b-row>
           <b-col md="12">
             <p class="author">an essay by Witold van Ratingen</p>
diff --git a/src/components/phone.vue b/src/components/phone.vue
index aa4a2ca..cb8a425 100644
--- a/src/components/phone.vue
+++ b/src/components/phone.vue
@@ -1,10 +1,13 @@
 <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('../../dist/fonts/happy-times-NG_regular_master.otf');
+}
 * {
     border: 0px black solid;
-    background-color: #F7F7F7;
+    background-color: white;
 
 }
 
@@ -30,19 +33,24 @@ a {
 .content {
   padding-right: 50px;
   padding-top: 40px;
-  font-family: 'Poppins', sans-serif;;
+  font-family: 'Happy Times';
   font-size: 15px;
   padding-bottom: 40px;
-  text-align: center;
+  padding-left: 60px;
+  color: #1B75BC;
+  text-align: left;
 
+}
 
+.controls {
+  margin-top: 60px;
 }
 
 .title_story {
   font-size: 80px;
   font-family: 'Work Sans', sans-serif;
-  padding-top: 70px;
-  color: #333042;
+  padding-top: 20px;
+  color: #FA00FF;
   text-align: center;
 }
 
@@ -55,8 +63,7 @@ a {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;;
   text-align: center;
-
-
+  color: #FA00FF;
 }
 
 .image_container img {
@@ -69,6 +76,10 @@ a {
 
 }
 
+.zoom {
+  max-width: 60%;
+}
+
 
 @media (max-width: 575px){
      .small_icon {
@@ -89,45 +100,36 @@ a {
   <b-container fluid class="p-0">
     <MenuBar/>
     <b-row>
-      <b-col md="1" offset-md="1" class="small_icon">
+      <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>
+      <b-col md="4">
+        <b-row>
+          <b-col md="10" offset-md="3">
         <div class="zoom">
-          <a href="/soulsoup"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower_prev.png"> </b-img></a>
+  <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone.png"> </b-img>
         </div>
           </b-col>
-      <b-col md="8">
-        <p class="title_story">Christmas Dinner</p>
+        </b-row>
         <b-row>
           <b-col md="12">
-            <p class="author">a poem by Valentina Vella</p>
-
-          </b-col>
-        </b-row>
-      </b-col>
-
-      <b-col md="1" class="small_icon">
-        <div class="zoom">
-        <a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes_next.png"> </b-img></a>
-      </div>
+        <p class="title_story">Christmas Dinner</p>
       </b-col>
-
     </b-row>
-
-
-    <b-row>
-      <b-col md="8" offset-md="2">
-
         <b-row>
-          <b-container fluid>
-            <div class="image_container">
-          <b-col md="6" offset-md="3">
-            <b-img class="img-fluid"  src="media/magiun2/phone.png"> </b-img>
+          <b-col md="12">
+            <p class="author">a poem by Valentina Vella</p>
 
           </b-col>
-        </div>
-
-        </b-container>
         </b-row>
-
+      </b-col>
+      
+  <b-col md="5">
 <div class='content'>
 
 <p>
@@ -169,8 +171,9 @@ a {
   no, he’s dead, he’s dead,<br>
   sea salt and ground black pepper, to taste.</p>
 </div>
+</b-col>
+
 
-      </b-col>
 
 </b-row>
       </b-container>
diff --git a/src/components/simmered.vue b/src/components/simmered.vue
index 9233b0a..84c4399 100644
--- a/src/components/simmered.vue
+++ b/src/components/simmered.vue
@@ -1,10 +1,13 @@
 <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('../../dist/fonts/happy-times-NG_regular_master.otf');
+}
 * {
     border: 0px black solid;
-    background-color: #F7F7F7;
+    background-color: white;
 
 }
 
@@ -28,36 +31,37 @@ a {
 }
 
 .content {
-
-  padding-top: 20px;
-  font-family: 'Poppins', sans-serif;;
+  padding-right: 50px;
+  padding-top: 40px;
+  font-family: 'Happy Times';
   font-size: 15px;
   padding-bottom: 40px;
   padding-left: 60px;
-  padding-right: 60px;
+  color: #1B75BC;
+  text-align: left;
 
 }
+.controls {
+  margin-top: 60px;
+}
 
 .title_story {
   font-size: 80px;
   font-family: 'Work Sans', sans-serif;
+  padding-top: 20px;
+  color: #FA00FF;
   text-align: center;
-  padding-top: 70px;
-  color: #333042
 }
 
-
 .image_container {
 
   padding-top: 10px;
 }
-
 .author {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;;
   text-align: center;
-
-
+  color: #FA00FF;
 }
 
 .image_container img {
@@ -70,6 +74,9 @@ a {
   padding-top: 100px;
 
 }
+.zoom {
+  max-width: 60%;
+}
 
 #knife {
   margin-top: 30px;
@@ -94,14 +101,24 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
+
+
+
     <b-row>
-      <b-col md="1" offset-md="1" class="small_icon">
+      <b-col md="4">
+        <b-row>
+          <b-col md="10" offset-md="3">
         <div class="zoom">
-        <a href="/knife"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife_prev.png"> </b-img></a>
-      </div>
-      </b-col>
-      <b-col md="8">
+  <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>
@@ -110,28 +127,8 @@ a {
         </b-row>
       </b-col>
 
-      <b-col md="1" class="small_icon">
-        <div class="zoom">
-        <a href="/soulsoup"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower_next.png"> </b-img></a>
-      </div>
-      </b-col>
-
-    </b-row>
 
-
-    <b-row>
-      <b-col md="8" offset-md="2">
-        <b-row>
-          <b-container fluid>
-            <div class="image_container">
-          <b-col md="6" offset-md="3">
-            <b-img class="img-fluid" id="knifeillu" src="media/magiun2/porcini.png"> </b-img>
-
-          </b-col>
-        </div>
-
-        </b-container>
-        </b-row>
+<b-col md="4">
 <div class='content'>
 
 <p>Thanks to the pandemic, I am spending much more time in Hong Kong. After losing my
@@ -166,7 +163,8 @@ cuisine at all.</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>
@@ -199,7 +197,9 @@ adapting to changes (and leftover food). </p>
 
         </b-container>
       </b-col>
+
 </b-row>
+
       </b-container>
 </template>
 
diff --git a/src/components/soulsoup.vue b/src/components/soulsoup.vue
index edbe027..c00c6ba 100644
--- a/src/components/soulsoup.vue
+++ b/src/components/soulsoup.vue
@@ -1,10 +1,13 @@
 <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('../../dist/fonts/happy-times-NG_regular_master.otf');
+}
 * {
     border: 0px black solid;
-    background-color: #F7F7F7;
+    background-color: white;
 
 }
 
@@ -30,42 +33,49 @@ a {
 .content {
   padding-right: 50px;
   padding-top: 40px;
-  font-family: 'Poppins', sans-serif;;
+  font-family: 'Happy Times';
   font-size: 15px;
   padding-bottom: 40px;
   padding-left: 60px;
-  padding-right: 60px;
+  color: #1B75BC;
+  text-align: left;
+
+}
 
+.controls {
+  margin-top: 60px;
 }
 
 .title_story {
   font-size: 80px;
   font-family: 'Work Sans', sans-serif;
-  padding-top: 70px;
-  color: #333042;
+  padding-top: 20px;
+  color: #FA00FF;
   text-align: center;
 }
 
 .image_container {
 
-  padding-top: 10px;
+  padding-top: 5px;
 }
 
 .author {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;;
   text-align: center;
+  color: #FA00FF;
 }
 
-.image_container img {
-  max-width: 80%
-}
 
 .small_icon {
   max-width: 60%;
   padding-top: 100px;
 }
 
+.zoom {
+  max-width: 60%;
+}
+
 @media (max-width: 575px){
      .small_icon {
        display: none;
@@ -85,15 +95,29 @@ a {
   <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-col md="1" offset-md="1" class="small_icon">
+    <b-row>
+      <b-col md="4">
+        <b-row>
+          <b-col md="10" offset-md="3">
         <div class="zoom">
-          <a href="/simmered"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini_prev.png"> </b-img></a>
-        </div>
-        </b-col>
+        <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower.png"> </b-img>
+      </div>
+    </b-col>
+    </b-row>
 
-      <b-col md="8">
+    <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>
@@ -102,28 +126,9 @@ a {
         </b-row>
       </b-col>
 
-      <b-col md="1" class="small_icon">
-        <div class="zoom">
-        <a href="/phone"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone_next.png"> </b-img></a>
-      </div>
-      </b-col>
-
-    </b-row>
 
+<b-col md="5">
 
-    <b-row>
-      <b-col md="8" offset-md="2">
-        <b-row>
-          <b-container fluid>
-            <div class="image_container">
-          <b-col md="6" offset-md="3">
-            <b-img class="img-fluid" src="media/magiun2/cauliflower.png"> </b-img>
-
-          </b-col>
-        </div>
-
-        </b-container>
-        </b-row>
 <div class='content'>
 
 <p>Morning… As a commuter, my morning used to be a colorful bustle of to-go coffee, endless
@@ -181,9 +186,7 @@ crying, maybe quietly, but the company of cooking has offered me peace.</p>
 </div>
 
       </b-col>
-      <b-col md="7">
-
-      </b-col>
+        </b-row>
 </b-row>
       </b-container>
 </template>
diff --git a/src/components/whatwecan.vue b/src/components/whatwecan.vue
index be66551..ae989d0 100644
--- a/src/components/whatwecan.vue
+++ b/src/components/whatwecan.vue
@@ -1,10 +1,13 @@
 <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('../../dist/fonts/happy-times-NG_regular_master.otf');
+}
 * {
     border: 0px black solid;
-    background-color: #F7F7F7;
+    background-color: white;
 
 }
 
@@ -30,42 +33,49 @@ a {
 .content {
   padding-right: 50px;
   padding-top: 40px;
-  font-family: 'Poppins', sans-serif;;
+  font-family: 'Happy Times';
   font-size: 15px;
   padding-bottom: 40px;
   padding-left: 60px;
-  padding-right: 60px;
+  color: #1B75BC;
+  text-align: left;
+
+}
 
+.controls {
+  margin-top: 60px;
 }
 
 .title_story {
   font-size: 80px;
   font-family: 'Work Sans', sans-serif;
-  padding-top: 70px;
-  color: #333042;
+  padding-top: 20px;
+  color: #FA00FF;
   text-align: center;
 }
 
 .image_container {
 
-  padding-top: 10px;
+  padding-top: 5px;
 }
 
 .author {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;;
   text-align: center;
+  color: #FA00FF;
 }
 
-.image_container img {
-  max-width: 80%
-}
 
 .small_icon {
   max-width: 60%;
   padding-top: 100px;
 }
 
+.zoom {
+  max-width: 60%;
+}
+
 @media (max-width: 575px){
      .small_icon {
        display: none;
@@ -85,14 +95,29 @@ a {
   <b-container fluid class="p-0">
     <MenuBar/>
     <b-row>
-      <b-col md="1" offset-md="1" class="small_icon">
+      <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>
+      <b-col md="4">
+        <b-row>
+          <b-col md="10" offset-md="3">
         <div class="zoom">
 
-        <a href="/phone"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone_prev.png"> </b-img></a>
+        <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes.png"> </b-img>
       </div>
       </b-col>
-<b-col md="8">
+    </b-row>
+    <b-row>
+      <b-col md="12">
         <p class="title_story">We do what we can <br> with what we have</p>
+      </b-col>
+    </b-row>
         <b-row>
           <b-col md="12">
             <p class="author">an essay by Raluca Chereji</p>
@@ -101,28 +126,7 @@ a {
         </b-row>
       </b-col>
 
-      <b-col md="1" class="small_icon">
-        <div class="zoom">
-        <a href="/lychee"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee_next.png"> </b-img></a>
-      </div>
-      </b-col>
-
-    </b-row>
-
-
-    <b-row>
-      <b-col md="8" offset-md="2">
-        <b-row>
-          <b-container fluid>
-            <div class="image_container">
-          <b-col md="6" offset-md="3">
-            <b-img class="img-fluid" src="media/magiun2/clothes.png"> </b-img>
-
-          </b-col>
-        </div>
-
-        </b-container>
-        </b-row>
+  <b-col md="5">
 <div class='content'>
 
 <p>This became our house motto during quarantine. Devised at first as a way to rationalize the situation
@@ -204,9 +208,8 @@ is already there.</p>
 </div>
 
       </b-col>
-      <b-col md="7">
+        </b-row>
 
-      </b-col>
 </b-row>
       </b-container>
 </template>