refactor: improve toc bar and popup layout

cotes2020 · Oct 5, 2024 · 524afec · 524afec
1 parent 3fda103
commit 524afec
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -106,7 +106,7 @@ <h1 data-toc-skip>{{ page.title }}</h1>
     </div>
 
     <button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
-      <span class="ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
+      <span class="label ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
       <i class="fa-solid fa-angle-right fa-fw"></i>
     </button>
 

diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
@@ -294,12 +294,15 @@ header {
 /* --- TOC button, bar and popup in mobile/tablet --- */
 
 #toc-bar {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 1;
   margin: 0 -1rem;
   height: $topbar-height;
   background: var(--main-bg);
+  border-bottom: 1px solid var(--main-border-color);
+  transition: all 0.2s ease-in-out;
 
   .label {
     @extend %heading;
@@ -313,13 +316,19 @@ header {
     white-space: nowrap;
     color: inherit;
   }
+
+  &.invisible {
+    top: -$topbar-height;
+    transition: none;
+  }
 }
 
 #toc-solo-trigger {
   color: var(--link-color);
   border-radius: $radius-sm;
 
-  span {
+  .label {
+    font-size: 1rem;
     font-family: $font-family-heading;
   }
 }
@@ -329,8 +338,12 @@ header {
   border-width: 1px;
   border-radius: $radius-lg;
   color: var(--text-color);
+  background: var(--main-bg);
+  margin-top: $topbar-height;
+  max-height: 80%;
 
   .header {
+    position: -webkit-sticky;
     position: sticky;
     top: 0;
     background-color: inherit;
@@ -343,6 +356,10 @@ header {
     }
   }
 
+  button:focus-visible {
+    box-shadow: none;
+  }
+
   ul {
     list-style-type: none;
     padding-left: 1.25rem;
@@ -362,7 +379,13 @@ header {
     font-weight: 600;
   }
 
+  &::-webkit-backdrop {
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+  }
+
   &::backdrop {
+    -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
   }
 }