diff options
Diffstat (limited to '')
-rw-r--r-- | templates/note.html | 65 |
1 files changed, 50 insertions, 15 deletions
diff --git a/templates/note.html b/templates/note.html index 1d85b62..ccd21a6 100644 --- a/templates/note.html +++ b/templates/note.html @@ -1,15 +1,46 @@ {% extends "base.html" %} - {% block title %}{{ page.title }} - {{ config.title }}{% endblock title %} - {% block content -%} -<main> - <h1>{{ page.title }}</h1> + +<div class="note-container"> + <main role="main" class="note-content"> + <h1>{{ page.title }}</h1> + + {% if page.toc %} + <div class="toc-container mobile-toc"> + <div class="toc-header" id="mobile-toc-toggle"> + <span class="toc-arrow">▸</span> Table of Contents + </div> + <div id="mobile-toc" class="toc"> + <ul> + {% for h1 in page.toc %} + <li> + <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a> + {% if h1.children %} + <ul> + {% for h2 in h1.children %} + <li> + <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a> + </li> + {% endfor %} + </ul> + {% endif %} + </li> + {% endfor %} + </ul> + </div> + </div> + {% endif %} + + {{ page.content | safe }} + + <p class="date">{{ page.date | date(format="%B %d, %Y") }}</p> + </main> {% if page.toc %} - <div class="toc-container"> - <button id="toggle-toc" class="toc-toggle">Table of Contents</button> - <div id="toc" class="toc"> + <aside class="toc-container desktop-toc"> + <div class="toc-header">Table of Contents</div> + <div class="toc"> <ul> {% for h1 in page.toc %} <li> @@ -27,17 +58,21 @@ {% endfor %} </ul> </div> - </div> + </aside> {% endif %} - - {{ page.content | safe -}} -</main> +</div> <script> - document.getElementById('toggle-toc').addEventListener('click', function() { - var toc = document.getElementById('toc'); - toc.style.display = toc.style.display === 'none' ? 'block' : 'none'; - this.textContent = toc.style.display === 'none' ? 'Show Table of Contents' : 'Hide Table of Contents'; + document.getElementById('mobile-toc-toggle').addEventListener('click', function() { + var toc = document.getElementById('mobile-toc'); + var arrow = this.querySelector('.toc-arrow'); + if (toc.style.display === 'none' || toc.style.display === '') { + toc.style.display = 'block'; + arrow.innerHTML = '▾'; // Down-pointing triangle + } else { + toc.style.display = 'none'; + arrow.innerHTML = '▸'; // Right-pointing triangle + } }); </script> |