forked from tangled.org/core
this repo has no description tangled.org

docs: improve template to work nicer on mobile

prevents scrolling if the content is insufficient, this allows next/prev
buttons to be above the fold.

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li 3596ea2d e74cc404

verified
Changed files
+21 -21
docs
+21 -21
docs/template.html
··· 37 37 <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin /> 38 38 39 39 </head> 40 - <body class="bg-white dark:bg-gray-900 min-h-screen"> 40 + <body class="bg-white dark:bg-gray-900 min-h-screen flex flex-col min-h-screen"> 41 41 $for(include-before)$ 42 42 $include-before$ 43 43 $endfor$ 44 + 44 45 $if(toc)$ 45 - <!-- mobile topbar toc --> 46 - <details id="mobile-$idprefix$TOC" role="doc-toc" class="md:hidden bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 z-50 space-y-4 group px-6 py-4"> 47 - <summary class="cursor-pointer list-none text-sm font-semibold select-none flex gap-2 justify-between items-center dark:text-white"> 48 - $if(toc-title)$$toc-title$$else$Table of Contents$endif$ 49 - <span class="group-open:hidden inline">${ menu.svg() }</span> 50 - <span class="hidden group-open:inline">${ x.svg() }</span> 51 - </summary> 52 - ${ table-of-contents:toc.html() } 53 - </details> 54 - 55 - <!-- desktop sidebar toc --> 56 - <nav id="$idprefix$TOC" role="doc-toc" class="hidden md:block fixed left-0 top-0 w-80 h-screen bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto p-4 z-50"> 57 - $if(toc-title)$ 58 - <h2 id="$idprefix$toc-title" class="text-lg font-semibold mb-4 text-gray-900">$toc-title$</h2> 59 - $endif$ 60 - ${ table-of-contents:toc.html() } 61 - </nav> 46 + <!-- mobile topbar toc --> 47 + <details id="mobile-$idprefix$TOC" role="doc-toc" class="md:hidden bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 z-50 space-y-4 group px-6 py-4"> 48 + <summary class="cursor-pointer list-none text-sm font-semibold select-none flex gap-2 justify-between items-center dark:text-white"> 49 + $if(toc-title)$$toc-title$$else$Table of Contents$endif$ 50 + <span class="group-open:hidden inline">${ menu.svg() }</span> 51 + <span class="hidden group-open:inline">${ x.svg() }</span> 52 + </summary> 53 + ${ table-of-contents:toc.html() } 54 + </details> 55 + <!-- desktop sidebar toc --> 56 + <nav id="$idprefix$TOC" role="doc-toc" class="hidden md:block fixed left-0 top-0 w-80 h-screen bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto p-4 z-50"> 57 + $if(toc-title)$ 58 + <h2 id="$idprefix$toc-title" class="text-lg font-semibold mb-4 text-gray-900">$toc-title$</h2> 59 + $endif$ 60 + ${ table-of-contents:toc.html() } 61 + </nav> 62 62 $endif$ 63 63 64 - <div class="min-h-screen flex-1 flex flex-col $if(toc)$md:ml-80$endif$"> 65 - <main class="flex-1 max-w-4xl w-full mx-auto p-6"> 64 + <div class="$if(toc)$md:ml-80$endif$ flex-1 flex flex-col"> 65 + <main class="max-w-4xl w-full mx-auto p-6 flex-1"> 66 66 $if(top)$ 67 67 $-- only print title block if this is NOT the top page 68 68 $else$ ··· 76 76 <p class="text-sm text-gray-500 dark:text-gray-400">$author$</p> 77 77 $endfor$ 78 78 $if(date)$ 79 - <p class="text-sm text-gray-500 dark:text-gray-400">$date$</p> 79 + <p class="text-sm text-gray-500 dark:text-gray-400">Updated on $date$</p> 80 80 $endif$ 81 81 $if(abstract)$ 82 82 <div class="mt-6 p-4 bg-gray-50 rounded-lg">