👷 Finish the left header brand coding.

assets/css/_variables/base.scss

@@ -68,8 +68,12 @@ $card-bg-color-dark           : $black-light;
 $menu-item-bg-color           : $whitesmoke;
 $menu-item-bg-color-dark      : $black-light;
 
-$theme-color                  : convert($theme_color_light);
-$theme-color-dark             : convert($theme_color_dark);
+// TODO why there need convert
+//$theme-color                  : convert($theme_color_light);
+//$theme-color-dark             : convert($theme_color_dark);
+
+$theme-color                  : $theme_color_light;
+$theme-color-dark             : $theme_color_dark;
 
 // Typography
 // Font, line-height, and elements colors.

exampleSite/config.yaml

@@ -80,9 +80,7 @@ params:
     #android_manifest: /manifest.json
 
   # Custom Logo (Warning: Do not support scheme Mist)
-  customLogo: 
-    show: false
-    url: /imgs/hugo_next_logo.png
+  customLogo: #/imgs/hugo_next_logo.png
 
   # Creative Commons 4.0 International License.
   # See: https://creativecommons.org/about/cclicenses/
@@ -149,7 +147,7 @@ params:
     # Manual define the sidebar width. If commented, will be default for:
     # Muse | Mist: 320
     # Pisces | Gemini: 240
-    width: 300
+    width: 240
 
     # Sidebar Display (only for Muse | Mist), available values:
     #  - post    expand on posts automatically. Default.

i18n/en-us.yaml

@@ -2,6 +2,9 @@
 # English Version
 #--------------------------------------
 
+NavToggleLabel:
+  other: Toggle navigation bar
+
 ColoneFlag:
   other: ":"
 

i18n/zh-cn.yaml

@@ -2,6 +2,9 @@
 # 中文版本
 #--------------------------------------
 
+NavToggleLabel:
+  other: 切换导航栏
+
 ColoneFlag:
   other: ":"
 

layouts/_default/baseof.html

@@ -25,7 +25,7 @@
   <main class="main">
     <header class="header" itemscope itemtype="http://schema.org/WPHeader">
       <div class="header-inner">
-        {{- partial "header" . }}
+        {{- partial "header" (dict "P" $P "Page" .Page) }}
       </div>
       <!-- Sidebar -->
       {{- if ne $P.sidebar.display "remove" }}

layouts/partials/head/meta.html

@@ -27,7 +27,7 @@
   <meta property="og:image:width" content="TODO" />
   <meta property="og:image:height" content="TODO" />
   <meta property="og:image:type" content="TODO" />
-  <meta property="og:image" content="{{ $P.customLogo.url }}">
+  <meta property="og:image" content="{{ $P.customLogo }}">
   <meta property="og:url" content="{{ $Page.Permalink }}">
   <meta property="og:site_name" content="{{ default $Page.Title $Page.Site.Title }}">
   <meta property="og:locale" content="{{ $lang }}">

layouts/partials/header.html

@@ -0,0 +1 @@
+{{ partial "header/brand" . }}

layouts/partials/header/brand.html

@@ -0,0 +1,36 @@
+{{ $title := .Page.Site.Title }}
+<div class="site-brand-container">
+  <div class="site-nav-toggle">
+    <div class="toggle" aria-label="{{ T "NavToggleLabel" }}" role="button">
+        <span class="toggle-line"></span>
+        <span class="toggle-line"></span>
+        <span class="toggle-line"></span>
+    </div>
+  </div>
+
+  <div class="site-meta">
+    {{- if and .P.customLogo (eq .P.scheme "Muse") }}
+      <img class="custom-logo-image" src="{{ .P.customLogo }}" alt="{{ $title }}">
+    {{- end }}
+
+    <a href="{{ .Page.Site.BaseURL }}" class="brand" rel="start">
+      <i class="logo-line"></i>
+      <h1 class="site-title">{{ $title }}</h1>
+      <i class="logo-line"></i>
+    </a>
+    {{ if isset .P "subtitle" }}
+      <p class="site-subtitle" itemprop="description">{{ .P.subtitle }}</p>
+    {{- end }}
+    {{- if and .P.customLogo (or (eq .P.scheme "Gemini") (eq .P.scheme "Pisces"))}}
+      <img class="custom-logo-image" src="{{ .P.customLogo }}" alt="{{ $title }}">
+    {{- end }}
+  </div>
+
+  <div class="site-nav-right">
+    <div class="toggle popup-trigger">
+      {{ if or .P.algoliaSearch.enable .P.localSearch.enable }}
+        <i class="fa fa-search fa-fw fa-lg"></i>
+      {{- end }}
+    </div>
+  </div>
+</div>