lewis.moe
Monorepo for Tangled
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>
+21
-21
docs/template.html
+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">