title links css

hazelcast · Jul 5, 2024 · 2ffbe22 · 2ffbe22
1 parent 2169d4c
commit 2ffbe22
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/src/css/feedback.css b/src/css/feedback.css
@@ -1,11 +1,22 @@
 /* Feedback question and buttons */
 
 .feedback-prompt {
-  width: 100%;
+  width: var(--toc-width);
   font-family: var(--body-font-family);
   color: var(--nav-muted-color);
   display: flex;
   flex-direction: column;
+  position: sticky;
+  top: calc(var(--toc-top) + var(--toc-height));
+  margin-left: 5em;
+  margin-right: var(--toc-margin-right);
+  z-index: 999;
+}
+
+@media screen and (max-height: 670px) {
+  .feedback-prompt {
+    display: none;
+  }
 }
 
 .feedback-prompt .hidden {

diff --git a/src/css/toc.css b/src/css/toc.css
@@ -1,15 +1,14 @@
 .toc-menu {
   color: var(--toc-font-color);
-  margin-bottom: 50px;
 }
 
 .toc.sidebar {
   display: none;
-  margin-right: 0.75rem;
   position: sticky;
   top: var(--toc-top);
   align-self: flex-start;
   margin-left: 5em;
+  margin-right: var(--toc-margin-right);
 }
 
 .toc .toc-menu ul {
@@ -18,7 +17,7 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  max-height: var(--toc-height);
+  max-height: var(--toc-content-height);
   overflow-y: auto;
   scrollbar-width: none;
 }
@@ -35,9 +34,9 @@
   .toc.sidebar {
     display: block;
     flex: 0 0 var(--toc-width);
-    min-width: 200px;
+    min-width: 222px;
     overflow-y: auto;
-    height: 500px;
+    height: var(--toc-height);
     overflow-x: hidden;
   }
 

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -149,8 +149,10 @@
   --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
-  --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
+  --toc-content-height: calc(100vh - var(--toc-top) - 2.5rem);
   --toc-width: 14rem;
+  --toc-height: 400px;
+  --toc-margin-right: 0.75rem;
   --doc-max-width: calc(720 / var(--rem-base) * 1rem);
   --doc-max-width--desktop: calc(1500 / var(--rem-base) * 1rem);
   --border-radius: 5px;

diff --git a/src/partials/toc.hbs b/src/partials/toc.hbs
@@ -1,5 +1,6 @@
-<aside class="toc sidebar" data-title="{{or page.attributes.toctitle 'Contents'}}" data-levels="{{{or page.attributes.toclevels 2}}}">
-  <div class="toc-menu">
-  </div>
+<div class="toc-container">
+  <aside class="toc sidebar" data-title="{{or page.attributes.toctitle 'Contents'}}" data-levels="{{{or page.attributes.toclevels 2}}}">
+    <div class="toc-menu"></div>
+  </aside>
   {{> feedback}}
-</aside>
+</div>