From 24a90abedae216d12f9bd1c7f80ac85fe332a563 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 29 Mar 2021 10:17:33 -0400
Subject: [PATCH] chore(sfc-playground): logo, responsive

---
 packages/sfc-playground/index.html      |   1 +
 packages/sfc-playground/public/icon.png | Bin 0 -> 3395 bytes
 packages/sfc-playground/src/Header.vue  |  26 +++++++++++++++++++-----
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 packages/sfc-playground/public/icon.png

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 0000000000000000000000000000000000000000..4388bfdca3d4d778d2f25a5861599f8f19a1177c
GIT binary patch
literal 3395
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

literal 0
Hc-jL100001

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 {
-- 
2.47.3