From 28c810a7db3cfe3888c63e9aa935689ea5e4a357 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 14 Mar 2021 22:20:53 +0100
Subject: [PATCH] :lipstick: (love) <3

---
 src/assets/icons/love.svg       |  4 ++
 src/components/WelcomeWorld.vue | 76 +++++++++++++++++++++------------
 2 files changed, 52 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/icons/love.svg

diff --git a/src/assets/icons/love.svg b/src/assets/icons/love.svg
new file mode 100644
index 0000000..b92c81a
--- /dev/null
+++ b/src/assets/icons/love.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#eb2f06" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
+</svg>
\ No newline at end of file
diff --git a/src/components/WelcomeWorld.vue b/src/components/WelcomeWorld.vue
index 953d8d3..174ec86 100644
--- a/src/components/WelcomeWorld.vue
+++ b/src/components/WelcomeWorld.vue
@@ -24,37 +24,41 @@
     </ol>
 
     <form @submit.prevent>
-      <div class="columns is-mobile is-centered is-vcentered">
-        https://github.com/
+      <div class="columns is-centered is-vcentered to-user-repo">
         <div class="column">
-          <div class="field">
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="userInput"
-                placeholder="user"
-              />
+          https://github.com/
+        </div>
+        <div class="columns column is-mobile is-centered is-vcentered">
+          <div class="column">
+            <div class="field">
+              <div class="control">
+                <input
+                  class="input"
+                  type="text"
+                  v-model="userInput"
+                  placeholder="user"
+                />
+              </div>
             </div>
           </div>
-        </div>
-        /
-        <div class="column">
-          <div class="field">
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="repoInput"
-                placeholder="repo"
-              />
+          /
+          <div class="column">
+            <div class="field">
+              <div class="control">
+                <input
+                  class="input"
+                  type="text"
+                  v-model="repoInput"
+                  placeholder="repo"
+                />
+              </div>
             </div>
           </div>
-        </div>
-        <div class="column">
-          <button type="submit" class="button is-primary" @click="submit">
-            go
-          </button>
+          <div class="column is-2">
+            <button type="submit" class="button is-primary" @click="submit">
+              go
+            </button>
+          </div>
         </div>
       </div>
     </form>
@@ -67,11 +71,11 @@
           target="_blank"
           rel="noopener noreferrer"
           >Andy Matuschak's website</a
-        >. May this app be useful to everyone.
+        >. May "Lite note" be useful to everyone.
       </p>
 
       <p>
-        Made with love by
+        Made with <img src="@/assets/icons/love.svg" alt="love" /> by
         <a
           href="http://github.com/jcalixte"
           target="_blank"
@@ -101,4 +105,20 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
 }
+
+footer {
+  img {
+    vertical-align: middle;
+  }
+}
+
+.to-user-repo {
+  text-align: right;
+}
+
+@media screen and (max-width: 768px) {
+  .to-user-repo {
+    text-align: center;
+  }
+}
 </style>