Merge pull request #418 from gethinode/develop

Fix navbar

assets/scss/common/_variables-dark.scss

@@ -1,6 +1,7 @@
 @if $enable-dark-mode {
     @include color-mode(dark) {
         --bs-primary: #{$primary-text-emphasis-dark};
+        --bs-secondary: #{$secondary-text-emphasis-dark};
         --bs-primary-dark: #{$primary-bg-subtle-dark};
         --bs-primary-bg-subtle: #{$primary-bg-subtle-dark};
         --bg-primary-subtle: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 0.1));
@@ -45,6 +46,17 @@
           --bs-btn-disabled-border-color: var(--bs-primary);
         }
         
+        .btn-outline-secondary {
+          --bs-btn-color: var(--bs-secondary);
+          --bs-btn-border-color: var(--bs-secondary);
+          --bs-btn-hover-bg: var(--bs-secondary);
+          --bs-btn-hover-border-color: var(--bs-secondary);
+          --bs-btn-active-bg: var(--bs-secondary);
+          --bs-btn-active-border-color: var(--bs-secondary);
+          --bs-btn-disabled-color: var(--bs-secondary);
+          --bs-btn-disabled-border-color: var(--bs-secondary);
+        }
+
         .link-primary {
           color: var(--bs-primary) if($enable-important-utilities, !important, null);
           text-decoration-color: var(--bs-primary) if($enable-important-utilities, !important, null);

assets/scss/common/_variables.scss

@@ -28,6 +28,7 @@ $carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
 
 // scss-docs-start color-mode
 $primary-text-emphasis-dark:        mix(white, $primary, $dark-mode-tint) !default;
+$secondary-text-emphasis-dark:      mix(white, $secondary, $dark-mode-tint) !default;
 $link-color-dark:                   mix(white, $primary, $dark-mode-tint) !default;
 $primary-bg-subtle-dark:            mix(black, $primary, $dark-mode-shade) !default;
 $primary-border-subtle-dark:        mix(black, $primary, $dark-mode-shade / 2) !default;

assets/scss/components/_timeline.scss

@@ -14,11 +14,7 @@ $semi-circle-border: 0.2rem;
     .timeline-#{$state} {
       --timeline-highlight: var(--#{$prefix}#{$state});
     }
-
-    .timeline-bg-#{$state} {
-        --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
-      }
-  }
+}
 
 // scss-docs-end timeline
 
@@ -27,10 +23,16 @@ $semi-circle-border: 0.2rem;
 }
 
 .timeline-sm {
-    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2.4);
     --timeline-offset: 25%
 }
 
+@include media-breakpoint-up(sm) {
+    .timeline-sm {
+        --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    }
+}
+  
 .timeline::before, .timeline-sm::before {
     content: "";
     width: 2 * $semi-circle-border;

layouts/partials/assets/navbar.html

@@ -223,7 +223,7 @@
     
             <!-- Insert main navigation toggler -->
             <div class="d-flex fw-30">
-                <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
+                <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
                     aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
                     <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
                     <span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>

layouts/shortcodes/timeline.html

@@ -102,7 +102,7 @@
 </div>
 
 <!-- Render timeline for smaller devices -->
-<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
+<div class="container p-0 d-block d-md-none small{{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
     {{ range $index, $item := $entries }}
         <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
             {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.18.0-beta3",
+  "version": "0.18.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.18.0-beta3",
+      "version": "0.18.0",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

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