diff --git a/assets/css/_core/_breadcrumb.scss b/assets/css/_core/_breadcrumb.scss index 0ca54f48..c9e091ad 100644 --- a/assets/css/_core/_breadcrumb.scss +++ b/assets/css/_core/_breadcrumb.scss @@ -1,9 +1,14 @@ .breadcrumb-container { padding-inline: 1rem; font-size: 0.75rem; + background-color: $global-background-color; @include z-index(1); @extend .print-d-none; + [data-theme='dark'] & { + background-color: $global-background-color-dark; + } + &.sticky { position: sticky; top: $header-height; @@ -16,12 +21,10 @@ margin: 0 auto; list-style: none; border-bottom: 1px inset $global-border-color; - background-color: $global-background-color; @extend %page-style; [data-theme='dark'] & { border-bottom-color: $global-border-color-dark; - background-color: $global-background-color-dark; } .breadcrumb-item { diff --git a/assets/css/_partials/_single/_collections.scss b/assets/css/_partials/_single/_collections.scss index e63cc473..b4f8b66a 100644 --- a/assets/css/_partials/_single/_collections.scss +++ b/assets/css/_partials/_single/_collections.scss @@ -7,6 +7,7 @@ position: relative; @include border-radius($global-border-radius * 1.5); @include user-select(none); + @extend .print-d-none; [data-theme='dark'] & { background-color: lighten($global-background-color-dark, 3%); @@ -82,9 +83,18 @@ } } +// Collection aside container +.aside-collection { + position: sticky; + top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height)); + box-sizing: border-box; + @include overflow-wrap(break-word); + @include blur; + @extend .print-d-none; +} + // Collection List .collection-details { - &:not(:last-of-type) { margin-bottom: 0.5rem; } diff --git a/assets/css/_partials/_single/_toc.scss b/assets/css/_partials/_single/_toc.scss index 4d9e7e5f..c2b42356 100644 --- a/assets/css/_partials/_single/_toc.scss +++ b/assets/css/_partials/_single/_toc.scss @@ -52,10 +52,9 @@ #toc-auto { display: block; position: sticky; - top: var(--#{$prefix}scroll-mt); + top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height)); box-sizing: border-box; visibility: hidden; - @include z-index(1); @include overflow-wrap(break-word); @include blur; @extend .print-d-none; diff --git a/assets/js/theme.js b/assets/js/theme.js index 2b3161f6..078b91e7 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -330,7 +330,7 @@ class FixIt { const $breadcrumbContainer = document.querySelector('.breadcrumb-container.sticky') this.breadcrumbHeight = $breadcrumbContainer?.clientHeight ?? 0; if (this.breadcrumbHeight) { - document.querySelector('#content')?.style.setProperty('--fi-breadcrumb-height', `${this.breadcrumbHeight}px`); + document.querySelector('main.container')?.style.setProperty('--fi-breadcrumb-height', `${this.breadcrumbHeight}px`); } }