fix(header): header style and search dropdown (#282)

assets/css/_partial/_header.scss

@@ -8,11 +8,18 @@ header {
   }
 
   .logo {
-    min-height: 1.25em;
-    height: 1.25em;
+    min-height: 1.5em;
+    height: 1.5em;
     vertical-align: text-bottom;
+  }
+
+  .logo, .header-title-pre {
     padding-right: .25rem;
   }
+
+  .header-title-post {
+    padding-left: .25rem;
+  }
 }
 
 .header-wrapper {

exampleSite/config.toml

@@ -86,6 +86,7 @@ enableEmoji = true
       [[languages.en.menu.main]]
         identifier = "github"
         pre = "<i class='fab fa-github fa-fw'></i>"
+        post = ""
         name = ""
         url = "https://github.com/dillonzq/LoveIt"
         title = "GitHub"
@@ -279,6 +280,7 @@ enableEmoji = true
       [[languages.zh-cn.menu.main]]
         identifier = "github"
         pre = "<i class='fab fa-github fa-fw'></i>"
+        post = ""
         name = ""
         url = "https://github.com/dillonzq/LoveIt"
         title = "GitHub"
@@ -468,6 +470,7 @@ enableEmoji = true
       [[languages.fr.menu.main]]
         identifier = "github"
         pre = "<i class='fab fa-github fa-fw'></i>"
+        post = ""
         name = ""
         url = "https://github.com/dillonzq/LoveIt"
         title = "GitHub"
@@ -636,7 +639,7 @@ enableEmoji = true
       name = "LoveIt"
       # you can add extra information before the name (HTML format is supported), such as icons
       # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
-      pre = "<i class='far fa-kiss-wink-heart fa-fw'></i> "
+      pre = "<i class='far fa-kiss-wink-heart fa-fw'></i>"
       # you can add extra information after the name (HTML format is supported), such as icons
       # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
       post = ""

layouts/partials/header.html

@@ -7,7 +7,13 @@
                     {{- with .logo -}}
                         {{- partial "plugin/image.html" (dict "src" . "alt" $.Site.Title "class" "logo") -}}
                     {{- end -}}
-                    {{- .pre | safeHTML }}{{ .name }}{{ .post | safeHTML -}}
+                    {{- with .pre -}}
+                        <span class="header-title-pre">{{ . | safeHTML }}</span>
+                    {{- end -}}
+                    {{- .name -}}
+                    {{- with .post -}}
+                        <span class="header-title-post">{{ . | safeHTML }}</span>
+                    {{- end -}}
                 {{- else -}}
                     {{- .Site.Title -}}
                 {{- end -}}
@@ -79,7 +85,13 @@
                         {{- with .logo -}}
                             {{- partial "plugin/image.html" (dict "src" . "alt" $.Site.Title "class" "logo") -}}
                         {{- end -}}
-                        {{- .pre | safeHTML }}{{ .name }}{{ .post | safeHTML -}}
+                        {{- with .pre -}}
+                            <span class="header-title-pre">{{ . | safeHTML }}</span>
+                        {{- end -}}
+                        {{- .name -}}
+                        {{- with .post -}}
+                            <span class="header-title-post">{{ . | safeHTML }}</span>
+                        {{- end -}}
                     {{- else -}}
                         {{- .Site.Title -}}
                     {{- end -}}

src/js/theme.js

@@ -161,7 +161,7 @@ class Theme {
                 dropdownMenuContainer: `#search-dropdown-${classSuffix}`,
                 clearOnSelected: true,
                 cssClasses: { noPrefix: true },
-             // debug: true,
+                debug: true,
             }, {
                 name: 'search',
                 source: (query, callback) => {