web: show docs toc in mobile above content. closes #63

Author: progrium

deno.lock

@@ -6,8 +6,8 @@ export default {view: ({attrs, children}) => m(layout, Object.assign({
   heading: "Documentation"
 }, attrs),
 <section>
-  <div class="row justify-center items-start" style="gap: var(--16);">
-    <nav class="md:hidden" style="flex: none; min-width: 256px; position: sticky; top: 0px;">
+  <div class="row justify-center items-start sm:stack" style="gap: var(--16);">
+    <nav style="flex: none; min-width: 256px;">
       <h5><a href="/docs/quickstart">Quickstart</a></h5>
       <ul>
         <li><a href="/docs/quickstart#using-from-cdn">Using from CDN</a></li>

web/layouts/docs.tsx

@@ -140,6 +140,9 @@ body.blog > section nav > div {
   line-height: var(--7);
 }
 
+body.docs > section nav {
+  position: sticky; top: 0px;
+}
 body.docs > section nav ul {
   list-style-type: none;
   margin-top: 0;
@@ -295,6 +298,10 @@ pre > code > div {
     --h3-size: var(--5);
   }
 
+  body.docs > section nav {
+    position: relative;
+  }
+
   body > header > nav {
     padding-top: var(--4);
     padding-bottom: var(--4);