diff options
author | Franck Cuny <franck@fcuny.net> | 2024-09-22 13:19:57 -0700 |
---|---|---|
committer | Franck Cuny <franck@fcuny.net> | 2024-09-22 13:19:57 -0700 |
commit | 95cd9f847e657a1bee27413c723ac8abd2bca503 (patch) | |
tree | a3b2f5aa414a1d2abbca7bed596747aa29ca19a2 | |
parent | formatted with `just fmt` (diff) | |
download | fcuny.net-95cd9f847e657a1bee27413c723ac8abd2bca503.tar.gz |
render the TOC correctly for mobile and desktop
-rw-r--r-- | static/css/custom.css | 123 | ||||
-rw-r--r-- | templates/note.html | 65 |
2 files changed, 142 insertions, 46 deletions
diff --git a/static/css/custom.css b/static/css/custom.css index 5c3901b..97459be 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -53,7 +53,12 @@ body { margin-top: 0; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: 0.5em; line-height: 1.25; @@ -133,10 +138,10 @@ h1 { font-size: 1.4rem; } h2 { - font-size: 1.3rem; + font-size: 1.3rem; } -h3{ - font-size: 1.2rem +h3 { + font-size: 1.2rem; } a { @@ -151,8 +156,8 @@ a:active { } code { - font-family: monospace; - font-size: 90%; + font-family: monospace; + font-size: 90%; overflow-x: auto; border-radius: 4px; @@ -162,17 +167,16 @@ pre { padding: 0.2rem 0.5rem; overflow: auto; overflow-x: auto; - font-size: 90%; + font-size: 90%; } pre > code { display: block; } - p > code { - background: #eee; -}; + background: #eee; +} section.times time { font-style: oblique; @@ -196,19 +200,20 @@ table { word-break: normal; } -th, td { - border: 1px solid #ddd; - padding: 8px; - text-align: left; +th, +td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; } th { - background-color: #f2f2f2; + background-color: #f2f2f2; } tr:nth-child(even) { - background-color: #f9f9f9; + background-color: #f9f9f9; } tr:nth-child(odd) { - background-color: #ffffff; + background-color: #ffffff; } thead { color: #000; @@ -232,31 +237,35 @@ li { display: list-item; } +/* Note layout */ +.note-container { + display: flex; + justify-content: space-between; + max-width: 60rem; /* Keep this for overall container max-width */ + margin: 0 auto; + padding: 1em; +} + +.note-content { + flex: 0 0 736px; /* Set a fixed width */ + max-width: 736px; /* Ensure it doesn't exceed this width */ + width: 100%; /* Allow it to shrink on smaller screens */ +} /* Table of Contents styles */ .toc-container { - margin-bottom: 2em; + background-color: #f9f9f9; + border: 1px solid #ccc; } -.toc-toggle { +.toc-header { background-color: #f0f0f0; - border: 1px solid #ccc; - color: #333; padding: 0.5em 1em; - cursor: pointer; - font-size: 0.9em; - transition: background-color 0.3s; -} - -.toc-toggle:hover { - background-color: #e0e0e0; + font-weight: bold; } .toc { - border: 1px solid #ccc; - background-color: #f9f9f9; padding: 1em; - margin-top: 0.5em; } .toc ul { @@ -282,3 +291,55 @@ li { .toc a:hover { color: #ffc832; } + +/* Desktop styles */ +.desktop-toc { + flex: 0 0 200px; + margin-left: 2em; + position: sticky; + top: 1em; + align-self: flex-start; + max-height: calc(100vh - 2em); + overflow-y: auto; +} + +/* Mobile styles */ +.mobile-toc { + display: none; + margin-bottom: 2em; +} + +.mobile-toc .toc-header { + cursor: pointer; + display: flex; + align-items: center; +} + +.mobile-toc .toc-arrow { + margin-right: 0.5em; + transition: transform 0.3s; +} + +.mobile-toc .toc { + display: none; +} + +/* Responsive layout */ +@media (max-width: 968px) { + .note-container { + flex-direction: column; + } + + .note-content { + flex: 1; + max-width: 100%; + } + + .desktop-toc { + display: none; + } + + .mobile-toc { + display: block; + } +} 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> |