chore: update playground style (#755)

playground/app.vue

@@ -1,12 +1,30 @@
 <template>
-  <div>
-    <img src="~/assets/logo.svg">
-    <br>
-    Hello Nuxt 3
+  <div class="app">
+    <img src="~/assets/logo.svg" height="40">
+    <h1 class="greeting">
+      {{ hello }}, <br>Nuxt 3!
+    </h1>
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-})
+<script setup>
+const greetings = [
+  'Hello',
+  'Hi',
+  'Salut',
+  'こんにちは',
+  '你好'
+]
+const hello = greetings[Math.random() * greetings.length | 0]
 </script>
+
+<style scoped>
+.app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  padding: 1rem 1.5rem;
+}
+.greeting {
+  font-size: 4em;
+  font-weight: 400;
+}
+</style>

playground/assets/logo.svg

@@ -1 +1,18 @@
-<svg width="218" height="43" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76.098 10.302h6.404l13.573 22.136V10.302h5.911v31.365h-6.36l-13.617-22.09v22.09h-5.911V10.302zM128.411 41.668h-5.509v-3.504c-1.254 2.466-3.806 3.854-7.03 3.854-5.107 0-8.423-3.674-8.423-8.963V19.083h5.509v12.816c0 3.092 1.883 5.242 4.704 5.242 3.091 0 5.24-2.42 5.24-5.734V19.083h5.509v22.585zM147.583 41.668l-5.285-7.529-5.286 7.529h-5.868l8.153-11.785-7.525-10.8h6.001l4.525 6.499 4.478-6.5h6.047l-7.571 10.8 8.154 11.786h-5.823zM164.602 12.273v6.81h6.271v4.616h-6.271v11.21a1.42 1.42 0 001.418 1.422h4.853v5.328h-3.629c-4.927 0-8.151-2.869-8.151-7.883V23.703h-4.435v-4.62h2.782c1.298 0 2.053-.773 2.053-2.052v-4.758h5.109zM184.761 34.564V10.302h5.909v22.403c0 6.05-2.911 8.962-7.838 8.962h-6.879V36.34h7.033a1.776 1.776 0 001.775-1.776zM194.211 31.137h5.691c.315 3.504 2.644 5.735 6.406 5.735 3.36 0 5.691-1.342 5.691-4.121 0-6.723-16.853-2.063-16.853-14.071.004-5.153 4.438-8.733 10.81-8.733 6.63 0 11.108 3.808 11.382 9.679h-5.661c-.267-2.733-2.407-4.57-5.732-4.57-3.091 0-5.017 1.434-5.017 3.628 0 6.946 17.073 1.752 17.073 13.981 0 5.825-4.794 9.366-11.691 9.366-7.122 0-11.78-4.303-12.093-10.89" fill="#003543"/><path d="M33.893 41.626h22.459a4.062 4.062 0 003.517-6.098L44.786 9.39a4.063 4.063 0 00-7.037 0l-3.856 6.687-7.54-13.077a4.066 4.066 0 00-7.04 0L.545 35.528a4.065 4.065 0 003.517 6.098H18.16c5.586 0 9.705-2.455 12.54-7.244l6.88-11.923 3.687-6.38 11.062 19.166H37.58l-3.688 6.381zM17.93 35.239l-9.839-.003L22.84 9.682 30.2 22.46 25.27 31c-1.882 3.107-4.02 4.24-7.341 4.24z" fill="#00DC82"/></svg>
+<svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+  <g clip-path="url(#a)">
+    <path fill="currentColor"
+      d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z">
+    </path>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z"
+      fill="#80EEC0"></path>
+    <path
+      d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z"
+      fill="#00DC82"></path>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h221v65H0z"></path>
+    </clipPath>
+  </defs>
+</svg>