💄 (love) <3

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>

src/components/WelcomeWorld.vue

@@ -24,8 +24,11 @@
     </ol>
 
     <form @submit.prevent>
-      <div class="columns is-mobile is-centered is-vcentered">
+      <div class="columns is-centered is-vcentered to-user-repo">
+        <div class="column">
           https://github.com/
+        </div>
+        <div class="columns column is-mobile is-centered is-vcentered">
           <div class="column">
             <div class="field">
               <div class="control">
@@ -51,12 +54,13 @@
               </div>
             </div>
           </div>
-        <div class="column">
+          <div class="column is-2">
             <button type="submit" class="button is-primary" @click="submit">
               go
             </button>
           </div>
         </div>
+      </div>
     </form>
 
     <footer>
@@ -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>