[dev] modification on frontend

* theme color
* better responsive view
* better desription

frontend/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <meta name="description" content="Generate your O'RLY Cover here to make your life happier.">
+    <meta name="description" content="Generate your O'RLY Cover here to entertain yourself and friends.">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>O'RLY Cover Generator</title>
   </head>

frontend/public/manifest.json

@@ -42,5 +42,5 @@
   "start_url": "/index.html",
   "display": "standalone",
   "background_color": "#FEFEFE",
-  "theme_color": "#00B8AB"
+  "theme_color": "#20B2AA"
 }

frontend/src/App.vue

@@ -122,6 +122,6 @@
   }
 
   .w50 {
-    flex: 1 0 auto;
+    flex: 0 0 auto;
   }
 </style>

frontend/src/components/Inputer.vue

@@ -83,14 +83,13 @@
 
 <style scoped>
   form {
-    max-width: 500px;
-    min-width: 400px;
+    width: 500px;
   }
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: 400px) {
     form {
       max-width: 96%;
-      min-width: auto;
+      width: auto;
     }
   }
 

frontend/src/components/Result.vue

@@ -48,25 +48,21 @@
 
 <style scoped>
   .result {
-    max-width: 400px;
+    width: 400px;
   }
-  @media screen and (max-width: 400px) {
+  @media screen and (min-width: 970px) {
     .result {
-      max-width: 96%;
-    }
-  }
-  @media screen and (min-width: 1000px) {
-    .result {
-      margin: 0
+      margin: 0 0 0 50px;
     }
   }
-  @media screen and (min-width: 900px) {
+  @media screen and (max-width: 970px) {
     .result {
-      margin: 0 0 0 50px;
+      margin: 30px 50px 0 50px;
     }
   }
-  @media screen and (max-width: 835px) {
+  @media screen and (max-width: 401px) {
     .result {
+      max-width: 96%;
       margin: 30px 0 0 0;
     }
   }