From: Evan You <yyx990803@gmail.com>
Date: Mon, 29 Mar 2021 14:17:33 +0000 (-0400)
Subject: chore(sfc-playground): logo, responsive
X-Git-Tag: v3.0.10~27
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=24a90abedae216d12f9bd1c7f80ac85fe332a563;p=thirdparty%2Fvuejs%2Fcore.git

chore(sfc-playground): logo, responsive
---

diff --git a/packages/sfc-playground/index.html b/packages/sfc-playground/index.html
index 15915f304c..a5e3521343 100644
--- a/packages/sfc-playground/index.html
+++ b/packages/sfc-playground/index.html
@@ -4,6 +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">
+  <link rel="icon" type="image/png" href="/icon.png">
   <title>Vue SFC Playground</title>
 
   <link rel="preconnect" href="https://fonts.gstatic.com">
diff --git a/packages/sfc-playground/public/icon.png b/packages/sfc-playground/public/icon.png
new file mode 100644
index 0000000000..4388bfdca3
Binary files /dev/null and b/packages/sfc-playground/public/icon.png differ
diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index 9ba1dbb63f..bdea5894b3 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -1,12 +1,12 @@
 <template>
   <nav>
-    <h1>Vue SFC Playground</h1>
+    <h1>
+      <img alt="logo" src="/icon.png">
+      <span>Vue SFC Playground</span>
+    </h1>
     <div class="links">
-      <a class="commit-link" :href="`https://github.com/vuejs/vue-next/tree/${commit}`" target="_blank">
-        vue@{{ commit }}
-      </a>
       <a class="commit-link" href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">
-        History
+        @{{ commit }}
       </a>
       <button class="share" @click="copyLink">
         <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
@@ -66,6 +66,20 @@ h1 {
   vertical-align: middle;
 }
 
+h1 img {
+  height: 24px;
+  vertical-align: middle;
+  margin-right: 10px;
+  position: relative;
+  top: -2px;
+}
+
+@media (max-width:400px) {
+  h1 span {
+    display: none;
+  }
+}
+
 .commit-link {
   color: var(--color-branding);
   text-decoration: none;
@@ -77,11 +91,13 @@ h1 {
 .share {
   position: relative;
   top: 6px;
+  margin: 0 2px;
 }
 
 .download {
   position: relative;
   top: 8px;
+  margin: 0 2px;
 }
 
 .commit-link {