Merge pull request #903 from gethinode/develop

Fix alignment of color-mode aware brand logo

assets/scss/helpers/_display.scss

@@ -5,7 +5,7 @@
 // stylelint-disable annotation-no-unknown
 
 // scss-docs-start display-color
-.d-none-light {
+.d-none-light, .d-none-inline-light {
     display: none if($enable-important-utilities, !important, null); 
 }
 
@@ -13,13 +13,21 @@
     display: block if($enable-important-utilities, !important, null);
 }
 
+.d-none-inline-dark {
+    display: inline if($enable-important-utilities, !important, null);
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .d-none-light {
             display: block if($enable-important-utilities, !important, null);
         }
 
-        .d-none-dark {
+        .d-none-inline-light {
+            display: inline if($enable-important-utilities, !important, null);
+        }
+
+        .d-none-dark, .d-none-inline-dark {
             display: none if($enable-important-utilities, !important, null);
         }
     }

layouts/partials/assets/navbar.html

@@ -204,8 +204,8 @@
                     <a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
                         {{- if (and $logoLight $logoDark) -}}
                             {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
-                            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-inline-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-inline-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
                         {{- else if $logo -}}
                             {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
                             <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.10",
+  "version": "0.23.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.10",
+      "version": "0.23.11",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.10",
+  "version": "0.23.11",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",