diff options
Diffstat (limited to 'article_template.html')
| -rw-r--r-- | article_template.html | 93 |
1 files changed, 93 insertions, 0 deletions
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> + |