Update layout and logo

_layouts/default.html

@@ -26,30 +26,127 @@
           </svg>
         </a>
       {% endif %}
-      <a class="header-logo-link" href="{{ '/' | relative_url }}" aria-label="JSONC home">
-        <img class="header-logo" src="{{ '/assets/logo.png' | relative_url }}" alt="JSONC logo">
-      </a>
-      <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
-      <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
+      <div class="header-inner">
+        <a class="header-logo-link" href="{{ '/' | relative_url }}" aria-label="JSONC home">
+          <img class="header-logo" src="{{ '/assets/logo.png' | relative_url }}" alt="JSONC logo">
+        </a>
+        <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
+      </div>
       {% if site.show_downloads %}
         <a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
         <a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
       {% endif %}
     </header>
 
-    <main id="content" class="main-content" role="main">
-      {{ content }}
+    <button class="toc-toggle" aria-label="Open table of contents" aria-expanded="false" aria-controls="toc">
+      <span class="toc-toggle-bar"></span>
+      <span class="toc-toggle-bar"></span>
+      <span class="toc-toggle-bar"></span>
+    </button>
+    <div class="toc-backdrop" aria-hidden="true"></div>
+
+    <div class="page-body">
+      <nav id="toc" class="toc-sidebar" aria-label="Table of contents">
+        <div class="toc-inner">
+          <p class="toc-title">Contents</p>
+          <ol class="toc-list"></ol>
+        </div>
+      </nav>
+
+      <main id="content" class="main-content" role="main">
+        {{ content }}
 
       <footer class="site-footer">
         {% if site.github.is_project_page %}
           <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
         {% endif %}
         <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
       </footer>
-    </main>
+      </main>
+    </div>
   </body>
   <script>hljs.highlightAll();</script>
 
+  <!-- TOC burger toggle -->
+  <script>
+    (function () {
+      var btn = document.querySelector('.toc-toggle');
+      var toc = document.getElementById('toc');
+      var backdrop = document.querySelector('.toc-backdrop');
+      function openToc() {
+        toc.classList.add('toc-open');
+        backdrop.classList.add('toc-backdrop-visible');
+        btn.setAttribute('aria-expanded', 'true');
+        document.body.style.overflow = 'hidden';
+      }
+      function closeToc() {
+        toc.classList.remove('toc-open');
+        backdrop.classList.remove('toc-backdrop-visible');
+        btn.setAttribute('aria-expanded', 'false');
+        document.body.style.overflow = '';
+      }
+      btn.addEventListener('click', function () {
+        toc.classList.contains('toc-open') ? closeToc() : openToc();
+      });
+      backdrop.addEventListener('click', closeToc);
+      toc.addEventListener('click', function (e) {
+        if (e.target.tagName === 'A') closeToc();
+      });
+    })();
+  </script>
+
+  <!-- Table of Contents -->
+  <script>
+    (function () {
+      const headings = document.querySelectorAll('.main-content h2, .main-content h3');
+      const tocList = document.querySelector('.toc-list');
+      if (!tocList || headings.length === 0) return;
+
+      let currentH2Item = null;
+      headings.forEach(function (heading) {
+        if (!heading.id) {
+          heading.id = heading.textContent.trim().toLowerCase()
+            .replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
+        }
+        const link = document.createElement('a');
+        link.href = '#' + heading.id;
+        link.textContent = heading.textContent;
+
+        const li = document.createElement('li');
+        li.appendChild(link);
+
+        if (heading.tagName === 'H2') {
+          li.classList.add('toc-h2');
+          tocList.appendChild(li);
+          currentH2Item = li;
+        } else {
+          li.classList.add('toc-h3');
+          let subList = currentH2Item && currentH2Item.querySelector('ol');
+          if (!subList) {
+            subList = document.createElement('ol');
+            if (currentH2Item) currentH2Item.appendChild(subList);
+            else tocList.appendChild(subList);
+          }
+          subList.appendChild(li);
+        }
+      });
+
+      // Highlight active section on scroll
+      const allLinks = tocList.querySelectorAll('a');
+      const observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            allLinks.forEach(function (a) { a.classList.remove('toc-active'); });
+            const active = tocList.querySelector('a[href="#' + entry.target.id + '"]');
+            if (active) active.classList.add('toc-active');
+          }
+        });
+      }, { rootMargin: '0px 0px -80% 0px' });
+
+      headings.forEach(function (h) { observer.observe(h); });
+    })();
+  </script>
+
   <!-- Invalid syntax highlighting-->
   <script>
     function markInvalidNumbers(codeBlock) {

assets/css/style.scss

@@ -3,14 +3,37 @@
 
 @import 'jekyll-theme-cayman';
 
+body {
+  font-family: Arial, sans-serif;
+}
+
 .page-header {
   position: relative;
+  padding: 1rem 1rem 0.9rem;
+}
+
+.header-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 244px 1fr;
+  column-gap: 1.5rem;
+  align-items: center;
+  min-height: 130px;
+}
+
+.project-name {
+  margin: 0;
+  font-size: clamp(1.8rem, 5vw, 2.3rem);
+  align-self: center;
+  justify-self: start;
+  text-align: left;
 }
 
 .header-repo-link {
   position: absolute;
-  top: 1.5rem;
-  right: 1.5rem;
+  top: 1rem;
+  right: 1rem;
   color: rgba(255, 255, 255, 0.92);
   line-height: 0;
   transition: opacity 160ms ease, transform 160ms ease;
@@ -22,27 +45,210 @@
 }
 
 .header-repo-icon {
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   display: block;
 }
 
 .header-logo-link {
   display: inline-block;
-  margin-bottom: 0.85rem;
+  margin: 0;
+  justify-self: center;
   line-height: 0;
 }
 
 .header-logo {
-  width: 56px;
+  width: 128px;
   height: auto;
   display: block;
 }
 
 @media screen and (max-width: 42em) {
+  .page-header {
+    padding: 1.1rem 0.8rem 0.9rem;
+  }
+
+  .header-inner {
+    grid-template-columns: 1fr;
+    row-gap: 0.35rem;
+    justify-items: center;
+    min-height: 0;
+  }
+
+  .project-name {
+    font-size: 1.65rem;
+    justify-self: center;
+  }
+
+  .header-logo {
+    width: 98px;
+  }
+
   .header-repo-link {
-    top: 1rem;
-    right: 1rem;
+    top: 0.7rem;
+    right: 0.7rem;
+  }
+}
+
+/* Page layout with TOC sidebar */
+.page-body {
+  display: flex;
+  align-items: flex-start;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.toc-sidebar {
+  flex: 0 0 244px;
+  position: sticky;
+  top: 1.5rem;
+  max-height: calc(100vh - 3rem);
+  overflow-y: auto;
+  padding: 1rem 1rem 1rem 1.5rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  border-right: 1px solid #e0e0e0;
+  scrollbar-width: thin;
+}
+
+.toc-inner {
+  padding: 0;
+}
+
+.toc-title {
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  letter-spacing: 0.08em;
+  color: #555;
+  margin: 0 0 0.6rem 0;
+}
+
+.toc-list,
+.toc-list ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-list li {
+  margin: 0.2rem 0;
+}
+
+.toc-list a {
+  color: #555;
+  text-decoration: none;
+  display: block;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  transition: background 120ms, color 120ms;
+}
+
+.toc-list a:hover {
+  background: #f0f0f0;
+  color: #155799;
+}
+
+.toc-list a.toc-active {
+  color: #155799;
+  font-weight: 600;
+  background: #eef4fb;
+}
+
+.toc-h3 {
+  padding-left: 0.8rem;
+  font-size: 0.88rem;
+}
+
+.main-content {
+  flex: 1;
+  min-width: 0;
+  padding-left: 1.5rem;
+}
+
+/* Burger toggle button — hidden on wide screens */
+.toc-toggle {
+  display: none;
+}
+
+@media screen and (max-width: 64em) {
+  .toc-sidebar {
+    /* Hidden by default on small screens; slides in as a drawer */
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 260px;
+    max-height: 100%;
+    background: #fff;
+    box-shadow: 2px 0 12px rgba(0,0,0,0.18);
+    transform: translateX(-110%);
+    transition: transform 240ms ease;
+    z-index: 200;
+    padding-top: 3.5rem;
+  }
+
+  .toc-sidebar.toc-open {
+    transform: translateX(0);
+  }
+
+  .toc-list li {
+    margin: 3px 0;
+  }
+
+  .toc-list a {
+    padding: 0.35rem 0.3rem;
+  }
+
+  .toc-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.35);
+    z-index: 199;
+  }
+
+  .toc-backdrop.toc-backdrop-visible {
+    display: block;
+  }
+
+  /* Burger button */
+  .toc-toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    position: fixed;
+    bottom: 1.2rem;
+    right: 1.2rem;
+    z-index: 201;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: none;
+    background: #155799;
+    cursor: pointer;
+    padding: 11px 10px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    align-items: center;
+  }
+
+  .toc-toggle-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background: #fff;
+    border-radius: 2px;
+    transition: opacity 160ms;
+  }
+
+  .toc-toggle:hover {
+    background: #1a6db5;
+  }
+
+  .main-content {
+    padding-left: 1.2rem;
+    padding-right: 1rem;
   }
 }