render the TOC correctly for mobile and desktop

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">&#9656;</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 = '&#9662;'; // Down-pointing triangle
+    } else {
+      toc.style.display = 'none';
+      arrow.innerHTML = '&#9656;'; // Right-pointing triangle
+    }
   });
 </script>