From 7e7e5c8b1053199cf1f541c63185bb1f4b3e2972 Mon Sep 17 00:00:00 2001
From: alicestrt <alice.strt@gmail.com>
Date: Fri, 17 Jul 2020 16:21:58 +0200
Subject: [PATCH] fixed small screen responsive bug

---
 src/components/AboutPage.vue  |  6 ++++++
 src/components/EditorNote.vue | 12 ++++++++++++
 src/components/MenuBar.vue    | 24 +++++++++++++++---------
 src/components/SplashPage.vue | 19 ++++++++++++++++++-
 src/components/bbq.vue        | 11 +++++++++++
 src/components/breakfast.vue  | 12 ++++++++++++
 src/components/cake.vue       | 11 +++++++++++
 src/components/cart.vue       | 11 +++++++++++
 src/components/eggs.vue       | 11 +++++++++++
 src/components/leekpilaf.vue  | 11 +++++++++++
 src/components/noodles.vue    | 11 +++++++++++
 src/components/onion.vue      | 11 +++++++++++
 src/components/pesto.vue      | 13 ++++++++++++-
 src/components/pretzel.vue    | 11 +++++++++++
 src/components/recipe.vue     | 10 ++++++++++
 src/components/ricecooker.vue | 11 +++++++++++
 src/components/scooter.vue    | 16 +++++++++++++++-
 17 files changed, 199 insertions(+), 12 deletions(-)

diff --git a/src/components/AboutPage.vue b/src/components/AboutPage.vue
index 7ebf880..e76f667 100644
--- a/src/components/AboutPage.vue
+++ b/src/components/AboutPage.vue
@@ -51,6 +51,12 @@ a {
   padding-left: 20px;
 }
 
+@media (max-width: 575px) {
+  .title_story {
+    font-size: 30px;
+  }
+}
+
 </style>
 
 <template>
diff --git a/src/components/EditorNote.vue b/src/components/EditorNote.vue
index 1c3f0c2..6ba2586 100644
--- a/src/components/EditorNote.vue
+++ b/src/components/EditorNote.vue
@@ -54,6 +54,18 @@ a {
   padding-top: 70px;
 }
 
+@media (max-width: 575px) {
+  .title_story {
+    font-size: 30px;
+  }
+  .small_icon {
+    max-width: 50%;
+    padding-top: 20px;
+    padding-left: 50px;
+
+  }
+}
+
 </style>
 
 <template>
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 4a47b1c..b5a0063 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -1,9 +1,9 @@
 <template>
-<b-row class="mb-5-menu">
-   <b-navbar fixed=top>
+<b-row>
+   <b-navbar fixed=top toggleable="md">
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
-       <b-nav align="right">
+       <b-nav align="left">
           <b-nav-item to='/'>Home</b-nav-item>
           <b-nav-item to='/about'>About</b-nav-item>
           <b-nav-item to='/editornote'>Editor's note</b-nav-item>
@@ -21,18 +21,24 @@ export default {
 </script>
 
 <style scoped>
-@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
 
-* {
-  max-width: 100%;
-}
 a {
   color: #333042;
-  font-family: 'Permanent Marker', cursive;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 16px;
+  text-shadow: 1px 1px 1px #333042;
 }
 
 a:hover {
   color: #ff4c2b;
+  text-shadow: 1px 1px 1px #ff4c2b;
+
+}
+
+@media (max-width: 575px) {
+  a {
+    font-size: 12px;
+
+  }
 }
 </style>
diff --git a/src/components/SplashPage.vue b/src/components/SplashPage.vue
index 15d8c50..ef49cce 100644
--- a/src/components/SplashPage.vue
+++ b/src/components/SplashPage.vue
@@ -11,6 +11,11 @@
 
 }
 
+body {
+  background-color: #ffe6e6;
+  min-height: 100vh;
+}
+
 a:hover {
   color: #333042;
   text-decoration: none;
@@ -60,9 +65,21 @@ a {
 }
 
 #sparkle {
-  padding-top: 50px;
+  padding-top: 80px;
 }
 
+@media (max-width: 575px) {
+  #mag_title {
+    font-size: 60px;
+    padding-top: 20px;
+    padding-left: 20px;
+  }
+  #mag_subtitle {
+    font-size: 18px;
+    padding-left: 20px;
+margin-top: 20px;
+}
+}
 
 </style>
 
diff --git a/src/components/bbq.vue b/src/components/bbq.vue
index 999f77d..40933cc 100644
--- a/src/components/bbq.vue
+++ b/src/components/bbq.vue
@@ -65,6 +65,17 @@ a {
 .bbq_images {
   padding-top: 40px;
 }
+
+@media (max-width: 575px){
+  .small_icon {
+    max-width: 50%;
+    padding-top: 20px;
+
+  }
+  .title_story {
+    font-size: 30px;
+  }
+}
 </style>
 
 <template>
diff --git a/src/components/breakfast.vue b/src/components/breakfast.vue
index 6d02676..23bef8d 100644
--- a/src/components/breakfast.vue
+++ b/src/components/breakfast.vue
@@ -68,6 +68,18 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 30px;
+     }
+   }
+   
 </style>
 
 <template>
diff --git a/src/components/cake.vue b/src/components/cake.vue
index 11c936f..a3a57c7 100644
--- a/src/components/cake.vue
+++ b/src/components/cake.vue
@@ -75,6 +75,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+@media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 30px;
+     }
+   }
+
 </style>
 
 <template>
diff --git a/src/components/cart.vue b/src/components/cart.vue
index ad7919d..f7f286d 100644
--- a/src/components/cart.vue
+++ b/src/components/cart.vue
@@ -66,6 +66,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+@media (max-width: 575px){
+  .small_icon {
+    max-width: 50%;
+    padding-top: 20px;
+
+  }
+  .title_story {
+    font-size: 30px;
+  }
+}
+
 </style>
 
 <template>
diff --git a/src/components/eggs.vue b/src/components/eggs.vue
index 0c45179..6dc4cc8 100644
--- a/src/components/eggs.vue
+++ b/src/components/eggs.vue
@@ -68,6 +68,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>
diff --git a/src/components/leekpilaf.vue b/src/components/leekpilaf.vue
index 91226f2..7155b62 100644
--- a/src/components/leekpilaf.vue
+++ b/src/components/leekpilaf.vue
@@ -59,6 +59,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>
diff --git a/src/components/noodles.vue b/src/components/noodles.vue
index 5ae9a41..bdf02dd 100644
--- a/src/components/noodles.vue
+++ b/src/components/noodles.vue
@@ -68,6 +68,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
+
 </style>
 
 <template>
diff --git a/src/components/onion.vue b/src/components/onion.vue
index 5022fad..bcebe8b 100644
--- a/src/components/onion.vue
+++ b/src/components/onion.vue
@@ -73,6 +73,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
+      
 </style>
 
 <template>
diff --git a/src/components/pesto.vue b/src/components/pesto.vue
index 19bdf7f..31ca2ff 100644
--- a/src/components/pesto.vue
+++ b/src/components/pesto.vue
@@ -44,7 +44,7 @@ a {
 }
 
 .image_container {
-  padding-top: 10px;
+  padding-top: 40px;
 }
 
 .author {
@@ -68,6 +68,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 30px;
+     }
+   }
+
 </style>
 
 <template>
diff --git a/src/components/pretzel.vue b/src/components/pretzel.vue
index f6f426a..5029531 100644
--- a/src/components/pretzel.vue
+++ b/src/components/pretzel.vue
@@ -70,6 +70,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>
diff --git a/src/components/recipe.vue b/src/components/recipe.vue
index 62d5363..c226b30 100644
--- a/src/components/recipe.vue
+++ b/src/components/recipe.vue
@@ -69,6 +69,16 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>
diff --git a/src/components/ricecooker.vue b/src/components/ricecooker.vue
index 8487f8d..d1c71ce 100644
--- a/src/components/ricecooker.vue
+++ b/src/components/ricecooker.vue
@@ -53,6 +53,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>
diff --git a/src/components/scooter.vue b/src/components/scooter.vue
index 33d26c3..221d77f 100644
--- a/src/components/scooter.vue
+++ b/src/components/scooter.vue
@@ -32,7 +32,7 @@ a {
   padding-top: 40px;
   font-family: 'Roboto Mono', monospace;
   font-size: 15px;
-  padding-left: 150px;
+  padding-left: 100px;
 }
 
 .title_story {
@@ -65,6 +65,20 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 25px;
+     }
+     .content_poem {
+       padding-right: 20px;
+       padding-left: 60px;
+     }
+   }
 
 
 </style>