💄 Style: add sticky style for collection aside (#359)

hugo-fixit · Dec 13, 2023 · 95612e3 · 95612e3
1 parent 443abcf
commit 95612e3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`);
     }
   }