Merge pull request #1 from goombalab/dev

Sticky table of contents
goombalab · Jun 4, 2024 · 556305f · 556305f
2 parents b97171f + 8f135e8
commit 556305f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/_layouts/distill.liquid b/_layouts/distill.liquid
@@ -100,7 +100,9 @@
             </nav>
           </d-contents>
         {% endif %}
-        {{ content }}
+        <div>
+          {{ content }}
+        </div>
       </d-article>
 
       <d-appendix>
@@ -118,6 +120,8 @@
 
     <!-- Footer -->
     {% include footer.liquid %}
+
+    <!-- JavaScripts -->
     {% include scripts/bootstrap.liquid %}
     {% include scripts/analytics.liquid %}
     {% include scripts/progressBar.liquid %}

diff --git a/_sass/_distill.scss b/_sass/_distill.scss
@@ -19,6 +19,7 @@ d-article d-byline a {
 }
 
 d-article {
+  overflow-x: visible !important;
   border-top-color: var(--global-divider-color) !important;
   p,
   h1,
@@ -178,6 +179,8 @@ d-article {
     padding-right: 3em;
     border-right: 1px solid var(--global-divider-color);
     width: calc(max(70%, 300px));
+    position: sticky;
+    top: 85px;
     margin-right: 0px;
     margin-top: 0em;
     display: grid;
@@ -248,7 +251,10 @@ d-appendix {
 
 @media (max-width: 1024px) {
   d-article {
+    overflow-x: hidden;
     d-contents {
+      position: static;
+      top: 0px;
       display: block;
       grid-column-start: 2;
       grid-column-end: -2;