diff options
| author | Collin Williams <96917990+bluedragon1221@users.noreply.github.com> | 2024-10-27 09:47:48 -0500 |
|---|---|---|
| committer | Collin Williams <96917990+bluedragon1221@users.noreply.github.com> | 2024-10-27 09:47:48 -0500 |
| commit | b8af1f55aed0b89dfa7e18a2a0a1e0ab3bff0467 (patch) | |
| tree | 7c8ca76c5e728ace0bf0fa7c847afb30ab107073 | |
| parent | 8412b7179fc4488d29235fa0c7ce3c80c3a0850c (diff) | |
toc on sidebar for md files
| -rw-r--r-- | Makefile | 2 | ||||
| -rw-r--r-- | article_template.html | 93 | ||||
| -rw-r--r-- | template.html | 1 |
3 files changed, 94 insertions, 2 deletions
@@ -12,7 +12,7 @@ $(BUILD_DIR)/stories/%.html: md/%.md | $(BUILD_DIR)/stories pandoc "$<" \ --standalone \ --embed-resources \ - --template template.html \ + --template article_template.html \ -o "$@" diff --git a/article_template.html b/article_template.html new file mode 100644 index 0000000..79cb640 --- /dev/null +++ b/article_template.html @@ -0,0 +1,93 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>$title$</title> + <link rel="stylesheet" href="./pandoc.css"> + <style> + /* Sidebar layout styles */ + .container { + display: grid; + grid-template-columns: minmax(0, 42em) 250px; + gap: 2em; + max-width: 1200px; + margin: 0 auto; + padding: 0 1em; + } + + .content { + min-width: 0; + } + + .sidebar { + position: sticky; + top: 2em; + height: fit-content; + padding: 1em; + background: #f8f8f8; + border-left: 1px solid #eee; + border-radius: 4px; + } + + .toc { + font-size: 0.9em; + } + + .toc h3 { + margin-top: 0; + font-size: 1.2em; + color: #333; + } + + .toc ul { + list-style: none; + padding-left: 1em; + margin: 0.5em 0; + } + + .toc li { + margin: 0.5em 0; + line-height: 1.4; + } + + .toc a { + color: #666; + text-decoration: none; + transition: color 0.2s; + } + + .toc a:hover { + color: #0645ad; + } + + @media only screen and (max-width: 768px) { + .container { + grid-template-columns: 1fr; + } + + .sidebar { + position: static; + margin-top: 2em; + border-left: none; + border-top: 1px solid #eee; + } + } + </style> + </head> + <body> + <div class="container"> + <main class="content"> + <a href="..">« Back</a> + <h1>$title$</h1> + $body$ + </main> + <nav class="sidebar"> + <div class="toc"> + <h3>Table of Contents</h3> + $toc$ + </div> + </nav> + </div> + </body> +</html> + diff --git a/template.html b/template.html index 210755b..a6e44ae 100644 --- a/template.html +++ b/template.html @@ -6,7 +6,6 @@ <link rel="stylesheet" href="./pandoc.css"> </head> <body> - <a href="..">« Back</a> <h1>$title$</h1> $body$ </body> |