diff options
| author | Collin Williams <96917990+bluedragon1221@users.noreply.github.com> | 2024-10-27 11:08:01 -0500 |
|---|---|---|
| committer | Collin Williams <96917990+bluedragon1221@users.noreply.github.com> | 2024-10-27 11:08:01 -0500 |
| commit | 7481e417d69af5fa3e4bfc78e9aa45f8b2d369ce (patch) | |
| tree | d86a3ad32ba780443433a3884c9fd317974e5c87 | |
| parent | b8af1f55aed0b89dfa7e18a2a0a1e0ab3bff0467 (diff) | |
fix toc with heading padding stuff
| -rw-r--r-- | Makefile | 3 | ||||
| -rw-r--r-- | article_template.html | 93 | ||||
| -rw-r--r-- | template.html | 83 |
3 files changed, 83 insertions, 96 deletions
@@ -12,7 +12,8 @@ $(BUILD_DIR)/stories/%.html: md/%.md | $(BUILD_DIR)/stories pandoc "$<" \ --standalone \ --embed-resources \ - --template article_template.html \ + --toc \ + --template template.html \ -o "$@" diff --git a/article_template.html b/article_template.html deleted file mode 100644 index 79cb640..0000000 --- a/article_template.html +++ /dev/null @@ -1,93 +0,0 @@ -<!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 a6e44ae..366d7d9 100644 --- a/template.html +++ b/template.html @@ -4,9 +4,88 @@ <meta charset="utf-8"> <title>$title$</title> <link rel="stylesheet" href="./pandoc.css"> + $if(toc)$ + <style> + /* Container for positioning */ + .container { + position: relative; + margin: 0 auto; + } + + /* Main content stays the same as original */ + .content { + margin: auto; + max-width: 42em; + padding: 0em; + } + + /* Sidebar floats to the right of the content */ + .sidebar { + position: fixed; + top: 2em; + left: calc(50% + 22em); /* 50% + half of content width + small gap */ + width: 250px; + 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: 1200px) { + .sidebar { + display: none; + } + } + </style> + $endif$ </head> <body> - <h1>$title$</h1> - $body$ + <div class="container"> + <main class="content"> + <a href="..">« Back</a> + <h1>$title$</h1> + $body$ + </main> + $if(toc)$ + <nav class="sidebar"> + <div class="toc"> + <h3>Table of Contents</h3> + $toc$ + </div> + </nav> + $endif$ + </div> </body> </html> |