tweak(default-theme): navbar vertical alignment

vuejs · Apr 17, 2018 · 599edd2 · 599edd2
1 parent 49894b9
commit 599edd2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/lib/default-theme/Navbar.vue b/lib/default-theme/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <header class="navbar">
     <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
-    <router-link to="/">
+    <router-link to="/" class="home-link">
       <img class="logo"
         v-if="$site.themeConfig.logo"
         :src="$withBase($site.themeConfig.logo)">
@@ -33,19 +33,17 @@ export default {
 
 .navbar
   padding 0.7rem 1.5rem
-  line-height 2rem
+  line-height $navbarHeight - 1.4rem
   position relative
   a, span, img
-    vertical-align middle
     display inline-block
   .logo
-    display inline-block
-    height 2rem
-    min-width 2rem
+    height $navbarHeight - 1.4rem
+    min-width $navbarHeight - 1.4rem
     margin-right 0.8rem
+    vertical-align top
   .site-name
     font-size 1.3rem
-    line-height 2rem
     font-weight 600
     color $textColor
     position relative

diff --git a/lib/default-theme/SearchBox.vue b/lib/default-theme/SearchBox.vue
@@ -190,6 +190,9 @@ export default {
       right 0
 
 @media (max-width: $MQMobileNarrow)
-  .search-box .suggestions
-    width calc(100vw - 4rem)
+  .search-box
+    .suggestions
+      width calc(100vw - 4rem)
+    input:focus
+      width 8rem
 </style>