fixed the footnote popups

src/scss/;';w

@@ -0,0 +1,118 @@
+//@format
+$toc_breakpoint: 768px;
+.toc {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 100px;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+.node .toc-tree {
+    border: none;
+    padding: 0;
+}
+.toc-block--mobile {
+    @include breakpoint($desktop-up) {
+        //display: none;
+    }
+}
+.toc-block--wide {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 100px;
+    margin-top: 2rem;
+    .toc--title {
+        &[aria-expanded='true'] h2::after {
+            //content: "\f146";//square
+            content: '\f068';
+        }
+        &[aria-expanded='false'] h2::after {
+            //content: "\f0fe";
+            content: '\f067';
+        }
+        h2::after {
+            font-family: 'FontAwesome';
+            position: absolute;
+            //top: 6px;
+            right: 0;
+            font-weight: 400;
+            line-height: 20px;
+            font-size: 2rem;
+            background: #ccc;
+            padding: 10px;
+            //text-align: right;
+        }
+        h2 {
+            text-align: left;
+            border: 1px dotted #ccc;
+            padding: 0px;
+            padding-left: 10px;
+            line-height: 40px;
+            margin-bottom: 0px;
+            background: #f5f3f3;
+        }
+    }
+    .toc--list {
+        border: 1px dotted #ccc;
+        border-top: 0px;
+        padding-top: 1rem;
+        ol {
+            list-style-type: none;
+            padding-left: 0;
+
+            font-family: $serif;
+            font-size: 1.8rem;
+            line-height: 1.8;
+        }
+        a {
+            &:hover {
+                background: #ccc;
+            }
+        }
+    }
+}
+
+.region-sidebar-second {
+    height: 1000px;
+}
+.node__main-content .toc-block--wide {
+    @include breakpoint($desktop-up) {
+        //display: none;
+    }
+}
+.toc-container .toc-block--wide {
+    @include breakpoint($desktop-up) {
+        position: -webkit-sticky; /* Safari */
+        position: sticky;
+        top: 300px;
+    }
+}
+.toc-desktop {
+    display: block !important;
+}
+.toc-mobile {
+    display: none !important;
+}
+//.article-title-banner {
+//grid-area: header;
+//}
+//.node__main-content {
+//grid-area: main;
+//}
+//.toc-container {
+//grid-area: toc;
+//}
+//.node__container {
+//display: grid;
+//grid-template-columns: 70% 30%;
+//grid-template-rows: auto;
+//grid-template-areas:
+//'header header'
+//'toc toc'
+//'main main';
+//@include breakpoint($desktop-up) {
+//grid-template-areas:
+//'header header'
+//'main toc';
+//}
+//}

src/scss/_toc.scss

@@ -4,14 +4,18 @@ $toc_breakpoint: 768px;
     position: -webkit-sticky; /* Safari */
     position: sticky;
     top: 100px;
-    margin-top: 2rem;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+.node .toc-tree {
+    border: none;
+    padding: 0;
 }
 .toc-block--mobile {
     @include breakpoint($desktop-up) {
         //display: none;
     }
 }
-
 .toc-block--wide {
     position: -webkit-sticky; /* Safari */
     position: sticky;
@@ -39,6 +43,7 @@ $toc_breakpoint: 768px;
             //text-align: right;
         }
         h2 {
+            text-align: left;
             border: 1px dotted #ccc;
             padding: 0px;
             padding-left: 10px;
@@ -50,6 +55,22 @@ $toc_breakpoint: 768px;
     .toc--list {
         border: 1px dotted #ccc;
         border-top: 0px;
+        padding-top: 1rem;
+        ol {
+            list-style-type: none;
+            padding-left: 0;
+
+            font-family: $serif;
+            font-size: 1.8rem;
+            line-height: 1.8;
+        }
+        a {
+            display: block;
+            padding-left: 1rem;
+            &:hover {
+                background: #ccc;
+            }
+        }
     }
 }