diff --git a/assets/hb/modules/blog/scss/post/_main.scss b/assets/hb/modules/blog/scss/post/_main.scss index 0436b544..29192286 100644 --- a/assets/hb/modules/blog/scss/post/_main.scss +++ b/assets/hb/modules/blog/scss/post/_main.scss @@ -8,13 +8,23 @@ grid-template-rows: auto auto 1fr; @include media-breakpoint-up(lg) { - grid-template-areas: - "intro toc" - "main toc"; - /* stylelint-disable declaration-block-no-redundant-longhand-properties */ - grid-template-rows: auto 1fr; - grid-template-columns: 4fr 1fr; - /* stylelint-enable declaration-block-no-redundant-longhand-properties */ + @if $hb-blog-toc-position == 'start' { + grid-template-areas: + "toc intro" + "toc main"; + /* stylelint-disable declaration-block-no-redundant-longhand-properties */ + grid-template-rows: 1fr auto; + grid-template-columns: 1fr 4fr; + /* stylelint-enable declaration-block-no-redundant-longhand-properties */ + } @else if $hb-blog-toc-position == 'end' { + grid-template-areas: + "intro toc" + "main toc"; + /* stylelint-disable declaration-block-no-redundant-longhand-properties */ + grid-template-rows: auto 1fr; + grid-template-columns: 4fr 1fr; + /* stylelint-enable declaration-block-no-redundant-longhand-properties */ + } } } diff --git a/assets/hb/modules/blog/scss/post/_toc.scss b/assets/hb/modules/blog/scss/post/_toc.scss index a0af7bc3..0c73b91f 100644 --- a/assets/hb/modules/blog/scss/post/_toc.scss +++ b/assets/hb/modules/blog/scss/post/_toc.scss @@ -7,14 +7,15 @@ /* stylelint-disable selector-id-pattern */ #TableOfContents { - border-bottom: 1px solid var(--#{$prefix}border-color); font-size: 1rem !important; } /* stylelint-enable selector-id-pattern */ } @include media-breakpoint-up(lg) { - height: calc(100vh - var(--#{$prefix}top-offset)); + @if $hb-blog-toc-position != 'content' { + height: calc(100vh - var(--#{$prefix}top-offset)); + } @include top-offset; } diff --git a/assets/hb/modules/blog/scss/variables.tmpl.scss b/assets/hb/modules/blog/scss/variables.tmpl.scss index 9c208cff..f878e131 100644 --- a/assets/hb/modules/blog/scss/variables.tmpl.scss +++ b/assets/hb/modules/blog/scss/variables.tmpl.scss @@ -2,3 +2,6 @@ $hb-blog-sidebar: {{ $hasSidebar }}; $hb-blog-sidebar-position: {{ default "start" site.Params.hb.blog.sidebar.position }}; $hb-blog-home-pinned-posts-pos: '{{ default "" site.Params.hb.blog.home.pinned_posts_position }}'; + +// ToC +$hb-blog-toc-position: {{ default "end" site.Params.hb.blog.toc.position }}; diff --git a/hugo.toml b/hugo.toml index bc62ffaf..001a507b 100644 --- a/hugo.toml +++ b/hugo.toml @@ -42,3 +42,6 @@ pinned_posts_position = "" [params.hb.blog.sidebar] position = "start" + +[params.hb.blog.toc] +position = "end" # start, end or content. diff --git a/layouts/partials/hb/modules/blog/post/toc.html b/layouts/partials/hb/modules/blog/post/toc.html index 974d1e9c..30e976a1 100644 --- a/layouts/partials/hb/modules/blog/post/toc.html +++ b/layouts/partials/hb/modules/blog/post/toc.html @@ -1,3 +1,4 @@ +{{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-begin" "Page" .) }} {{- if partial "base/functions/has-toc" . }}