Merge pull request #590 from gethinode/develop

Add horizontal navigation styling parameters

assets/scss/app-dart.scss

@@ -5,6 +5,7 @@
 
 // Include default variable overrides
 @import "common/variables-dart.scss"; // note: modified for dart-sass
+@import "theme/variables.scss";
 @import "common/icons.scss";
 
 // Import Bootstrap configuration (mounted by core Bootstrap module)

assets/scss/app.scss

@@ -3,6 +3,7 @@
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "theme/variables.scss";
 @import "common/icons.scss";
 
 // Import Bootstrap configuration (mounted by core Bootstrap module)

assets/scss/common/_variables-dart.scss

@@ -40,4 +40,8 @@ $primary-text-emphasis-dark:        mix(white, h.$primary, h.$dark-mode-tint) !d
 $secondary-text-emphasis-dark:      mix(white, h.$secondary, h.$dark-mode-tint) !default;
 $link-color-dark:                   mix(white, h.$primary, h.$dark-mode-tint) !default;
 $primary-bg-subtle-dark:            mix(black, h.$primary, h.$dark-mode-shade) !default;
-$primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
+$primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
+
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);

assets/scss/common/_variables.scss

@@ -33,4 +33,10 @@ $secondary-text-emphasis-dark:      mix(white, $secondary, $dark-mode-tint) !def
 $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;
-// scss-docs-end color-mode
+// scss-docs-end color-mode
+
+// scss-docs-start horizontal-nav
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);
+// scss-docs-end horizontal-nav

assets/scss/components/_navbar.scss

@@ -130,8 +130,6 @@
     }
 }
 
-$dropdown-transition: opacity .15s ease-in-out !default;
-
 .dropdown-horizontal {
     @each $breakpoint in map-keys($grid-breakpoints) {
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -152,9 +150,9 @@ $dropdown-transition: opacity .15s ease-in-out !default;
                 text-align: center;
                 border-radius: 0;
                 border: 0;
-                margin-top: calc((-1.5 * $spacer) - 2px);
-                padding-top: calc(1 * $spacer + 2px);
-                padding-bottom: 1 * $spacer;
+                margin-top: $dropdown-horizontal-margin-top;
+                padding-top: $dropdown-horizontal-padding-y;
+                padding-bottom: $dropdown-horizontal-padding-y;
                 box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
             
                 @include transition($dropdown-transition);

assets/scss/theme/_variables.scss

@@ -0,0 +1,2 @@
+// Placeholder to quickly add your own theme variable overrides
+// The file is included at the beginning of the build pipeline

exampleSite/hugo_stats.json

@@ -209,9 +209,6 @@
       "form-control",
       "fs-3",
       "fs-5",
-      "fullcover",
-      "fullscreen",
-      "fw-30",
       "fw-bold",
       "fw-semibold",
       "g-0",

layouts/partials/assets/list.html

@@ -28,8 +28,9 @@
     {{- $thumbnail := .thumbnail -}}
     {{- $style := .style -}}
     {{- $mode := .mode -}}
+    {{- $title := .title -}}
     {{- $loading := .loading -}}
-    {{- partial "assets/image.html" (dict "url" $thumbnail "outerClass" $style "mode" $mode "loading" $loading) -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "outerClass" $style "mode" $mode "loading" $loading) -}}
 {{- end -}}
 
 {{- $page := .page -}}
@@ -70,7 +71,7 @@
                         {{- $style = "reveal fade-bottom-n5 rotate-n5 ps-3" -}}
                         {{- if $odd }}{{ $style = "reveal fade-bottom-5 rotate-5 pe-3" }}{{ end }}
                     {{ end }}
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "style" $style "mode" $item.Params.colormode "loading" $loading) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "title" $item.Title "style" $style "mode" $item.Params.colormode "loading" $loading) }}
                 </div>
                 <div class="col-6{{ if $odd }} order-first{{ end }} psw-lg-5 p-5">
                     {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
@@ -87,7 +88,7 @@
         <div class="container d-flex flex-column">
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-12 text-center">
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "mode" $item.Params.colormode "loading" $loading) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "title" $item.Title "mode" $item.Params.colormode "loading" $loading) }}
                 </div>
                 <div class="col-12 p-3">
                     {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (partial "utilities/GetDescription.html" $item)) }}

layouts/partials/assets/navbar.html

@@ -227,14 +227,14 @@
     <nav class="navbar {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
         <div class="container-xxl p-0">
             <!-- Insert sidebar toggler when applicable -->
-            <div class="d-flex">
+            <div class="d-flex align-items-center">
                 {{- if $page.Scratch.Get "sidebar" -}}
-                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                    <button class="navbar-toggler collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
                         {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
                     </button>
                 {{- else -}}
                     <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                    <button class="navbar-toggler collapsed p-0 mx-auto invisible" type="button">
                         {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
                     </button>
                 {{- end -}}
@@ -255,7 +255,7 @@
             </a>
     
             <!-- Insert main navigation toggler -->
-            <div class="d-flex fw-30">
+            <div class="d-flex">
                 <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>

layouts/partials/assets/persona.html

@@ -69,7 +69,7 @@
         <div class="col-2">
             <div class="position-absolute top-50 start-0 translate-middle-y col-4 ps-3">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>
@@ -89,7 +89,7 @@
         <div class="col-12">
             <div class="position-absolute top-25 start-50 translate-middle col-6">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>

package-lock.json

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

package.json

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