feat: add the sidebar.width parameter, which accepts percentage value…

…, such as .3 (equals to 30%), 40%
hbstack · Dec 14, 2023 · 8f6847e · 8f6847e
1 parent 68b9197
commit 8f6847e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/assets/hb/modules/blog/scss/_sidebar.scss b/assets/hb/modules/blog/scss/_sidebar.scss
@@ -1,3 +1,7 @@
+@function hb-blog-sidebar-width-fr($fullWidth) {
+    @return #{$fullWidth * $hb-blog-sidebar-width}fr;
+}
+
 @if $hb-blog-sidebar {
     .hb-blog-main-container {
         @include media-breakpoint-up(lg) {
@@ -6,18 +10,18 @@
 
             @if $hb-blog-sidebar-position == end {
                 grid-template-areas: "main sidebar";
-                grid-template-columns: minmax(0, 5fr) 2fr;
+                grid-template-columns: minmax(0, 5fr) hb-blog-sidebar-width-fr(5);
             } @else {
                 grid-template-areas: "sidebar main";
-                grid-template-columns: 2fr minmax(0, 5fr);
+                grid-template-columns: hb-blog-sidebar-width-fr(5) minmax(0, 5fr);
             }
         }
 
         @include media-breakpoint-up(xl) {
             @if $hb-blog-sidebar-position == end {
-                grid-template-columns: minmax(0, 7fr) 2fr;
+                grid-template-columns: minmax(0, 7fr) hb-blog-sidebar-width-fr(7);
             } @else {
-                grid-template-columns: 2fr minmax(0, 7fr);
+                grid-template-columns: hb-blog-sidebar-width-fr(7) minmax(0, 7fr);
             }
         }
     }

diff --git a/assets/hb/modules/blog/scss/variables.tmpl.scss b/assets/hb/modules/blog/scss/variables.tmpl.scss
@@ -1,6 +1,7 @@
 {{- $hasSidebar := partialCached "hb/modules/blog/functions/has-sidebar" . }}
 $hb-blog-sidebar: {{ $hasSidebar }};
 $hb-blog-sidebar-position: {{ default "start" site.Params.hb.blog.sidebar.position }};
+$hb-blog-sidebar-width: {{ default 0.35 site.Params.hb.blog.sidebar.width }};
 $hb-blog-home-pinned-posts-pos: '{{ default "" site.Params.hb.blog.home.pinned_posts_position }}';
 
 // ToC

diff --git a/hugo.toml b/hugo.toml
@@ -42,6 +42,7 @@ pinned_posts_position = ""
 
 [params.hb.blog.sidebar]
 position = "start"
+width = 0.35
 
 [params.hb.blog.toc]
 position = "end" # start, end or content.