diff options
| author | Himanshu Sardana <himanshusardana2005@gmail.com> | 2026-03-27 00:23:01 +0000 |
|---|---|---|
| committer | Himanshu Sardana <himanshusardana2005@gmail.com> | 2026-03-27 00:23:01 +0000 |
| commit | 38f75dbac195815710bcfb54dd7c6bfd1afeb224 (patch) | |
| tree | e8a1129f934be977d71b29d189c44311c33609c0 /layout.html | |
| parent | ad8a7daced9ac7b8e58b5eaba92dec05dc90b88d (diff) | |
chore: cleanup root dir
Diffstat (limited to 'layout.html')
| -rw-r--r-- | layout.html | 242 |
1 files changed, 0 insertions, 242 deletions
diff --git a/layout.html b/layout.html deleted file mode 100644 index 97bdb4b..0000000 --- a/layout.html +++ /dev/null @@ -1,242 +0,0 @@ -<!doctype html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <meta name="description" content="{{ .Title }}" /> - <title>{{ .Title }}</title> - <link rel="preconnect" href="https://fonts.googleapis.com" /> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> - <link - href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" - rel="stylesheet" - /> - <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script> - <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js"></script> - <link rel="stylesheet" href="../style.css" /> - <style> - .toc { - position: static !important; - width: auto !important; - right: auto !important; - top: auto !important; - background: var(--bg-subtle) !important; - border: 1px solid var(--border) !important; - padding: 1.2rem 1.4rem !important; - margin: 0 0 3rem !important; - } - - .toc-title { - margin: 0 0 0.8rem !important; - font-size: 0.65rem !important; - line-height: 1 !important; - display: block; - } - - .toc ul { - display: block; - margin: 0; - padding: 0; - } - - .toc li { - display: block; - padding-left: 0 !important; - margin: 0.25rem 0 !important; - } - - .toc li::before { - display: none !important; - } - - .toc a.active { - color: var(--text); - font-weight: 500; - } - - .toc-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; - background: none; - border: none; - padding: 0; - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-muted); - margin-bottom: 0.8rem; - width: 100%; - text-align: left; - } - - .toc-toggle svg { - transition: transform 140ms ease; - flex-shrink: 0; - } - - .toc-toggle[aria-expanded="false"] svg { - transform: rotate(-90deg); - } - - .toc-body { - overflow: hidden; - transition: - max-height 240ms ease, - opacity 200ms ease; - max-height: 800px; - opacity: 1; - } - - .toc-body.collapsed { - max-height: 0; - opacity: 0; - } - - @media (max-width: 699px) { - .toc-title { - display: none; - } - .toc-toggle { - display: flex; - } - .toc-body { - } - } - - @media (min-width: 700px) { - .toc-toggle { - display: none; - } - .toc-title { - display: block; - } - .toc-body { - max-height: none !important; - opacity: 1 !important; - } - } - - @media (min-width: 1100px) { - .toc { - position: fixed !important; - top: 6rem !important; - left: max(2rem, calc((100vw - 680px) / 2 - 220px)) !important; - width: 200px !important; - background: transparent !important; - border: none !important; - padding: 0 !important; - margin: 0 !important; - } - - .toc-toggle { - display: none; - } - .toc-title { - display: block; - } - .toc-body { - max-height: none !important; - opacity: 1 !important; - } - - .toc-level-2 { - margin-left: 0.8rem !important; - } - .toc-level-3 { - margin-left: 1.4rem !important; - } - .toc-level-4 { - margin-left: 2rem !important; - } - } - </style> - </head> - <body> - <main class="article"> - <nav class="toc" aria-label="Table of contents"> - <button - class="toc-toggle" - aria-expanded="false" - aria-controls="toc-body" - > - <svg - width="10" - height="10" - viewBox="0 0 10 10" - fill="none" - aria-hidden="true" - > - <path - d="M2 3.5L5 6.5L8 3.5" - stroke="currentColor" - stroke-width="1.4" - stroke-linecap="round" - stroke-linejoin="round" - /> - </svg> - Contents - </button> - - <div class="toc-body collapsed" id="toc-body"> - <ul> - {{ range .TOC }} - <li class="toc-level-{{ .Level }}"> - <a href="#{{ .ID }}">{{ .Text }}</a> - </li> - {{ end }} - </ul> - </div> - </nav> - - <h1>{{ .Title }}</h1> - {{ .Content }} - </main> - - <script> - const toggle = document.querySelector(".toc-toggle"); - const body = document.getElementById("toc-body"); - - if (toggle && body) { - toggle.addEventListener("click", () => { - const expanded = toggle.getAttribute("aria-expanded") === "true"; - toggle.setAttribute("aria-expanded", String(!expanded)); - body.classList.toggle("collapsed", expanded); - }); - } - - const tocLinks = document.querySelectorAll(".toc a"); - - if (tocLinks.length > 0) { - const headingIDs = Array.from(tocLinks).map((a) => - decodeURIComponent(a.getAttribute("href").slice(1)), - ); - const headings = headingIDs - .map((id) => document.getElementById(id)) - .filter(Boolean); - - let current = null; - - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - current = entry.target.id; - } - }); - - tocLinks.forEach((a) => { - const id = decodeURIComponent(a.getAttribute("href").slice(1)); - a.classList.toggle("active", id === current); - }); - }, - { rootMargin: "0px 0px -70% 0px", threshold: 0 }, - ); - - headings.forEach((h) => observer.observe(h)); - } - </script> - </body> -</html> |