docs: keep the page tree in place while the footer scrolls in

The footer sat after the layout grid, so the sticky tree hit the grid's end
and scrolled away with it, taking the search box and the first pages off
screen. The footer is now a row of the grid under the article, and the tree
spans both rows, so it holds its place to the bottom of the page.

Signed-off-by: ravindu644 <droidcasts@protonmail.com>

Author: ravindu644

assets/css/main.css

@@ -86,8 +86,12 @@ html { scroll-padding-top: 80px; } /* an anchor lands below the 64px sticky nav,
 
 @media (min-width: 840px) {
   .docs-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
+  /* the footer is a row of the grid, under the article only, so the sticky tree keeps its place
+     while the footer scrolls in; outside the grid the tree scrolled away with the grid's end */
+  .docs-layout .footer { grid-column: 2 / -1; }
   .sidebar {
     display: block;
+    grid-row: 1 / -1;
     position: sticky;
     inset: 64px auto auto; /* undo the popover's inset: 0 */
     width: auto;

template.html

@@ -45,6 +45,7 @@
   <aside class="toc-column">
 {{TOC}}
   </aside>
+{{FOOTER}}
 </div>
 <dialog class="search-dialog" aria-label="Search the docs">
   <form method="dialog" class="search-form">
@@ -54,7 +55,6 @@
   </form>
   <ul class="search-results"></ul>
 </dialog>
-{{FOOTER}}
 <script src="/assets/js/site.js" defer></script>
 <script src="/assets/js/docs.js" defer></script>
 </body>