summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--themes/everforest/layout.html453
-rw-r--r--themes/modern-dark-2/layout.html136
-rw-r--r--themes/modern-dark-catppuccin/layout.html136
-rw-r--r--themes/rose-pine/layout.html136
-rw-r--r--themes/terminal-gruvbox/layout.html136
-rw-r--r--themes/tufte/layout.html141
6 files changed, 745 insertions, 393 deletions
diff --git a/themes/everforest/layout.html b/themes/everforest/layout.html
index 1394a62..14df56f 100644
--- a/themes/everforest/layout.html
+++ b/themes/everforest/layout.html
@@ -24,59 +24,33 @@
--bg2: #3a4845;
--bg3: #445055;
--bg4: #4c5a5a;
- --bg5: #596461;
--fg: #d3c6aa;
--fg-dim: #9da9a0;
--fg-muted: #5a6f68;
- --red: #e67e80;
- --orange: #e69875;
- --yellow: #dbbc7f;
--green: #a7c080;
--aqua: #83c092;
- --blue: #7fbbb3;
- --purple: #d699b6;
- --accent: var(--green);
- --accent-2: var(--aqua);
- --accent-dim: rgba(167, 192, 128, 0.1);
- --accent-glow: rgba(167, 192, 128, 0.06);
+ --yellow: #dbbc7f;
+ --orange: #e69875;
--border: #404d49;
- --border-soft: rgba(167, 192, 128, 0.08);
- --serif: "Crimson Pro", Georgia, serif;
- --sans: "Familjen Grotesk", system-ui, sans-serif;
- --mono: "JetBrains Mono", ui-monospace, monospace;
- --radius: 4px;
--max-w: 720px;
- --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
- *,
- *::before,
- *::after {
+ *, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
- html {
- scroll-behavior: smooth;
- }
+
+ html { scroll-behavior: smooth; }
body {
margin: 0;
padding: 3.5rem 2rem 6rem;
background-color: var(--bg1);
- background-image:
- radial-gradient(
- ellipse 90% 40% at 50% -10%,
- rgba(83, 192, 146, 0.04) 0%,
- transparent 65%
- ),
- url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a7c080' fill-opacity='0.018'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
color: var(--fg);
- font-family: var(--serif);
+ font-family: "Crimson Pro", Georgia, serif;
line-height: 1.82;
font-size: 19px;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
}
body > * {
@@ -86,304 +60,96 @@
}
h1, h2, h3, h4 {
- font-family: var(--sans);
+ font-family: "Familjen Grotesk", system-ui, sans-serif;
line-height: 1.18;
letter-spacing: -0.02em;
scroll-margin-top: 1.5rem;
}
- h1 {
- font-size: clamp(2.1rem, 5vw, 2.8rem);
- font-weight: 700;
- margin-bottom: 0.5rem;
- color: var(--fg);
- text-shadow: 0 0 40px rgba(167, 192, 128, 0.18);
- }
-
- h2 {
- font-size: 1.4rem;
- font-weight: 600;
- margin-top: 3.5rem;
- color: var(--aqua);
- padding-bottom: 0.5rem;
- border-bottom: 1px solid var(--border);
- }
-
- h3 {
- font-size: 1.1rem;
- font-weight: 600;
- margin-top: 2.2rem;
- color: var(--yellow);
- }
-
- p {
- margin: 1.35rem 0;
- color: var(--fg);
- }
-
- a {
- color: var(--aqua);
- text-decoration-line: underline;
- text-decoration-color: rgba(131, 192, 146, 0.35);
- text-underline-offset: 3px;
- text-decoration-thickness: 1px;
- }
-
- a:hover {
- color: var(--green);
- text-decoration-color: var(--green);
- }
-
- ul, ol {
- margin: 1.3rem 0;
- padding-left: 0;
- list-style: none;
- }
-
- ul li, ol li {
- position: relative;
- padding-left: 1.6rem;
- margin: 0.5rem 0;
- color: var(--fg);
- }
-
- ul li::before {
- content: "◆";
- position: absolute;
- left: 0;
- font-size: 0.45rem;
- top: 0.6em;
- color: var(--green);
- }
-
- code {
- font-family: var(--mono);
- font-size: 0.82rem;
- background: var(--bg0);
- color: var(--orange);
- padding: 0.18rem 0.4rem;
- border-radius: var(--radius);
- border: 1px solid var(--border);
- word-break: break-word;
- }
-
- pre {
- background: var(--bg0);
- border: 1px solid var(--border);
- border-left: 3px solid var(--green);
- padding: 1.4rem 1.6rem;
- overflow-x: auto;
- border-radius: var(--radius);
- margin: 2rem 0;
- }
-
- pre code {
- background: none;
- border: none;
- padding: 0;
- color: var(--fg);
- font-size: 0.87rem;
- line-height: 1.7;
- }
-
- blockquote {
- margin: 2.5rem 0;
- padding: 1.2rem 1.6rem;
- background: var(--bg2);
- border-left: 3px solid var(--green);
- border-radius: 0 var(--radius) var(--radius) 0;
- }
-
- blockquote p {
- margin: 0;
- font-style: italic;
- font-size: 1.08rem;
- color: #c4bb9e;
- }
-
- img {
- max-width: 100%;
- height: auto;
- display: block;
- border-radius: var(--radius);
- border: 1px solid var(--border);
- margin: 2.5rem auto;
- }
-
- table {
- width: 100%;
- border-collapse: collapse;
- margin: 2rem 0;
- font-size: 0.88rem;
- font-family: var(--mono);
- background: var(--bg2);
- border-radius: var(--radius);
- overflow: hidden;
- border: 1px solid var(--border);
- }
-
- thead {
- background: var(--bg3);
- }
-
- th {
- text-align: left;
- padding: 0.7rem 1rem;
- font-size: 0.67rem;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: var(--aqua);
- border-bottom: 1px solid var(--border);
- font-weight: 500;
- }
-
- td {
- padding: 0.6rem 1rem;
- border-bottom: 1px solid var(--border-soft);
- color: var(--fg-dim);
- }
-
- hr {
- border: none;
- margin: 3.5rem auto;
- height: 1px;
- background: linear-gradient(
- 90deg,
- transparent,
- var(--border) 25%,
- var(--border) 75%,
- transparent
- );
- }
-
- .toc-wrap {
- margin: 2.5rem 0;
- }
-
- .toc {
- background: var(--bg0);
- border: 1px solid var(--border);
- border-left: 3px solid var(--green);
- border-radius: 3px;
- padding: 1rem 1.2rem;
- }
+ h1 { font-size: clamp(2.1rem, 5vw, 2.8rem); font-weight: 700; margin-bottom: 0.5rem; color: var(--fg); }
+ h2 { font-size: 1.4rem; font-weight: 600; margin-top: 3.5rem; color: var(--aqua); padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
+ h3 { font-size: 1.1rem; font-weight: 600; margin-top: 2.2rem; color: var(--yellow); }
+ p { margin: 1.35rem 0; color: var(--fg); }
- .toc-title {
- font-size: 0.8rem;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: var(--green);
- margin: 0 0 0.8rem;
- display: block;
- }
+ a { color: var(--aqua); text-decoration-line: underline; text-decoration-color: rgba(131, 192, 146, 0.35); }
+ a:hover { color: var(--green); }
- .toc ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
+ ul, ol { margin: 1.3rem 0; padding-left: 0; list-style: none; }
+ ul li, ol li { position: relative; padding-left: 1.6rem; margin: 0.5rem 0; }
+ ul li::before { content: "◆"; position: absolute; left: 0; font-size: 0.45rem; top: 0.6em; color: var(--green); }
- .toc li {
- padding: 0.2rem 0;
- margin: 0;
- }
-
- .toc li::before {
- display: none;
- }
-
- .toc a {
- font-size: 0.85rem;
- color: var(--fg-dim);
- text-decoration: none;
- }
+ code { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; background: var(--bg0); color: var(--orange); padding: 0.18rem 0.4rem; border-radius: 4px; border: 1px solid var(--border); }
+ pre { background: var(--bg0); border: 1px solid var(--border); border-left: 3px solid var(--green); padding: 1.4rem 1.6rem; overflow-x: auto; border-radius: 4px; margin: 2rem 0; }
+ pre code { background: none; border: none; padding: 0; color: var(--fg); }
- .toc a:hover {
- color: var(--green);
- }
+ blockquote { margin: 2.5rem 0; padding: 1.2rem 1.6rem; background: var(--bg2); border-left: 3px solid var(--green); border-radius: 0 4px 4px 0; }
+ blockquote p { margin: 0; font-style: italic; color: #c4bb9e; }
- nav {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 1rem 0 3rem;
- border-bottom: 1px solid var(--border);
- margin-bottom: 3.5rem;
- }
+ img { max-width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid var(--border); margin: 2.5rem auto; }
+ table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.88rem; background: var(--bg2); border-radius: 4px; border: 1px solid var(--border); }
+ thead { background: var(--bg3); }
+ th { text-align: left; padding: 0.7rem 1rem; font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aqua); border-bottom: 1px solid var(--border); }
+ td { padding: 0.6rem 1rem; color: var(--fg-dim); }
- nav .logo {
- font-family: var(--sans);
- font-weight: 700;
- font-size: 1.05rem;
- letter-spacing: -0.02em;
- color: var(--fg);
- text-decoration: none;
- }
+ nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0 3rem; border-bottom: 1px solid var(--border); margin-bottom: 3.5rem; }
+ nav .logo { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; color: var(--fg); text-decoration: none; }
+ nav .logo span { color: var(--green); }
+ nav ul { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
+ nav ul li::before { display: none; }
+ nav a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); text-decoration: none; }
+ nav a:hover { color: var(--aqua); }
- nav .logo span {
- color: var(--green);
- }
+ footer { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.7rem; color: var(--fg-muted); display: flex; justify-content: space-between; }
- nav ul {
- display: flex;
- gap: 2rem;
- margin: 0;
- padding: 0;
- }
+ main { display: flex; flex-direction: column; align-items: center; }
- nav ul li::before {
- display: none;
- }
+ .toc { background: var(--bg0); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 3px; padding: 1rem 1.2rem; }
+ .toc-title { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin: 0 0 0.8rem; display: block; cursor: pointer; }
+ .toc ul { list-style: none; padding: 0; margin: 0; }
+ .toc li { padding: 0.2rem 0; margin: 0; }
+ .toc li::before { display: none; }
+ .toc a { font-size: 0.85rem; color: var(--fg-dim); text-decoration: none; display: block; padding: 0.2rem 0; }
+ .toc a:hover { color: var(--green); }
+ .toc a.active { color: var(--green); font-weight: 500; }
- nav a {
- font-family: var(--mono);
- font-size: 0.7rem;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--fg-muted);
- text-decoration: none;
+ @media (max-width: 699px) {
+ .toc-wrap { margin: 2rem 0; }
+ .toc { background: var(--bg0); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 3px; padding: 1rem 1.2rem; }
+ .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(--fg-muted); margin-bottom: 0.8rem; width: 100%; text-align: left; }
+ .toc-toggle svg { transition: transform 140ms ease; }
+ .toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+ .toc-body { overflow: hidden; transition: max-height 240ms ease, opacity 200ms ease; max-height: 500px; opacity: 1; }
+ .toc-body.collapsed { max-height: 0; opacity: 0; }
+ .toc-title { display: none; }
}
- nav a:hover {
- color: var(--aqua);
+ @media (min-width: 700px) and (max-width: 1099px) {
+ .toc-wrap { margin: 2.5rem 0; }
+ .toc { display: block; background: transparent; border: none; border-left: 3px solid var(--green); padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
}
- footer {
- margin-top: 5rem;
- padding-top: 2rem;
- border-top: 1px solid var(--border);
- font-family: var(--mono);
- font-size: 0.7rem;
- letter-spacing: 0.04em;
- color: var(--fg-muted);
- display: flex;
- justify-content: space-between;
- align-items: center;
+ @media (min-width: 1100px) {
+ main { flex-direction: row; align-items: flex-start; max-width: 1100px; }
+ .toc-wrap { position: sticky; top: 6rem; width: 200px; flex-shrink: 0; margin-right: 3rem; order: -1; }
+ .toc { background: transparent; border: none; border-left: 3px solid var(--green); border-radius: 0; padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ .article { flex: 1; max-width: 680px; }
+ main > *:not(.toc-wrap):not(.article) { max-width: 680px; }
}
@media (max-width: 700px) {
- body {
- padding: 2rem 1.3rem 4rem;
- font-size: 17px;
- }
- h1 {
- font-size: 1.9rem;
- }
- h2 {
- font-size: 1.25rem;
- }
- nav ul {
- gap: 1.2rem;
- }
- footer {
- flex-direction: column;
- text-align: center;
- }
+ body { padding: 2rem 1.3rem 4rem; font-size: 17px; }
+ h1 { font-size: 1.9rem; }
+ h2 { font-size: 1.25rem; }
+ nav ul { gap: 1.2rem; }
+ footer { flex-direction: column; text-align: center; }
}
</style>
</head>
<body>
- <!-- topbar -->
<nav>
<a href="/" class="logo">Kite<span>.</span></a>
<ul>
@@ -392,33 +158,80 @@
</nav>
<main>
- <!-- article header -->
- <header class="article-header">
- <h1 class="article-h1">{{ .Title }}</h1>
- </header>
-
- <!-- TOC -->
{{ if .TOC }}
<div class="toc-wrap">
+ <button class="toc-toggle" aria-expanded="true" aria-controls="toc-body">
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+ <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+ </svg>
+ Contents
+ </button>
<details class="toc" open>
<summary class="toc-title">Contents</summary>
- <ul>
- {{ range .TOC }}
- <li>
- <a href="#{{ .ID }}">{{ .Text }}</a>
- </li>
- {{ end }}
- </ul>
+ <div class="toc-body" id="toc-body">
+ <ul>
+ {{ range .TOC }}
+ <li>
+ <a href="#{{ .ID }}">{{ .Text }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
</details>
</div>
{{ end }}
- <!-- article content -->
- <article class="prose">{{ .Content }}</article>
+ <article class="article">
+ <header class="article-header">
+ <h1>{{ .Title }}</h1>
+ </header>
+ {{ .Content }}
+ </article>
</main>
<footer>
<span>&copy; {{ .Year }} Kite</span>
</footer>
+
+ <script>
+ const toggle = document.querySelector(".toc-toggle");
+ const body = document.getElementById("toc-body");
+ const details = document.querySelector(".toc");
+
+ 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>
+</html> \ No newline at end of file
diff --git a/themes/modern-dark-2/layout.html b/themes/modern-dark-2/layout.html
index c8c8005..fbe0632 100644
--- a/themes/modern-dark-2/layout.html
+++ b/themes/modern-dark-2/layout.html
@@ -247,9 +247,9 @@
);
}
- .toc-wrap {
- margin: 2.5rem 0;
- }
+ main { display: flex; flex-direction: column; align-items: center; }
+
+ .toc-wrap { margin: 2.5rem 0; }
.toc {
background: var(--surface);
@@ -266,6 +266,7 @@
color: var(--accent);
margin: 0 0 0.8rem;
display: block;
+ cursor: pointer;
}
.toc ul {
@@ -288,6 +289,8 @@
color: var(--text-dim);
text-decoration: none;
border: none;
+ display: block;
+ padding: 0.2rem 0;
}
.toc a:hover {
@@ -295,6 +298,61 @@
border: none;
}
+ .toc a.active {
+ color: var(--accent);
+ 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; }
+ .toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+
+ .toc-body {
+ overflow: hidden;
+ transition: max-height 240ms ease, opacity 200ms ease;
+ max-height: 500px;
+ opacity: 1;
+ }
+
+ .toc-body.collapsed { max-height: 0; opacity: 0; }
+
+ @media (max-width: 699px) {
+ .toc-title { display: none; }
+ }
+
+ @media (min-width: 700px) and (max-width: 1099px) {
+ .toc { display: block; background: transparent; border: none; border-left: 2px solid var(--accent); padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ }
+
+ @media (min-width: 1100px) {
+ main { flex-direction: row; align-items: flex-start; max-width: 1100px; }
+ .toc-wrap { position: sticky; top: 6rem; width: 200px; flex-shrink: 0; margin-right: 3rem; order: -1; }
+ .toc { background: transparent; border: none; border-left: 2px solid var(--accent); border-radius: 0; padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ .article { flex: 1; max-width: 680px; }
+ main > *:not(.toc-wrap):not(.article) { max-width: 680px; }
+ }
+
nav {
display: flex;
align-items: center;
@@ -390,30 +448,78 @@
</nav>
<main>
- <header class="article-header">
- <h1 class="article-h1">{{ .Title }}</h1>
- </header>
-
{{ if .TOC }}
<div class="toc-wrap">
+ <button class="toc-toggle" aria-expanded="true" aria-controls="toc-body">
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+ <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+ </svg>
+ Contents
+ </button>
<details class="toc" open>
<summary class="toc-title">Contents</summary>
- <ul>
- {{ range .TOC }}
- <li>
- <a href="#{{ .ID }}">{{ .Text }}</a>
- </li>
- {{ end }}
- </ul>
+ <div class="toc-body" id="toc-body">
+ <ul>
+ {{ range .TOC }}
+ <li>
+ <a href="#{{ .ID }}">{{ .Text }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
</details>
</div>
{{ end }}
- <article class="prose">{{ .Content }}</article>
+ <article class="article">
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ </article>
</main>
<footer>
<span>&copy; {{ .Year }} Kite</span>
</footer>
+
+ <script>
+ const toggle = document.querySelector(".toc-toggle");
+ const body = document.getElementById("toc-body");
+ const details = document.querySelector(".toc");
+
+ 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>
diff --git a/themes/modern-dark-catppuccin/layout.html b/themes/modern-dark-catppuccin/layout.html
index 660f6ed..7c2f3ae 100644
--- a/themes/modern-dark-catppuccin/layout.html
+++ b/themes/modern-dark-catppuccin/layout.html
@@ -256,9 +256,9 @@
background: linear-gradient(90deg, transparent, var(--surface-0) 20%, var(--surface-0) 80%, transparent);
}
- .toc-wrap {
- margin: 2.5rem 0;
- }
+ main { display: flex; flex-direction: column; align-items: center; }
+
+ .toc-wrap { margin: 2.5rem 0; }
.toc {
background: var(--mantle);
@@ -275,6 +275,7 @@
color: var(--mauve);
margin: 0 0 0.8rem;
display: block;
+ cursor: pointer;
}
.toc ul {
@@ -297,6 +298,8 @@
color: var(--overlay-1);
text-decoration: none;
border: none;
+ display: block;
+ padding: 0.2rem 0;
}
.toc a:hover {
@@ -304,6 +307,61 @@
border: none;
}
+ .toc a.active {
+ color: var(--mauve);
+ 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(--overlay-0);
+ margin-bottom: 0.8rem;
+ width: 100%;
+ text-align: left;
+ }
+
+ .toc-toggle svg { transition: transform 140ms ease; }
+ .toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+
+ .toc-body {
+ overflow: hidden;
+ transition: max-height 240ms ease, opacity 200ms ease;
+ max-height: 500px;
+ opacity: 1;
+ }
+
+ .toc-body.collapsed { max-height: 0; opacity: 0; }
+
+ @media (max-width: 699px) {
+ .toc-title { display: none; }
+ }
+
+ @media (min-width: 700px) and (max-width: 1099px) {
+ .toc { display: block; background: transparent; border: none; border-left: 2px solid var(--mauve); padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ }
+
+ @media (min-width: 1100px) {
+ main { flex-direction: row; align-items: flex-start; max-width: 1100px; }
+ .toc-wrap { position: sticky; top: 6rem; width: 200px; flex-shrink: 0; margin-right: 3rem; order: -1; }
+ .toc { background: transparent; border: none; border-left: 2px solid var(--mauve); border-radius: 0; padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ .article { flex: 1; max-width: 680px; }
+ main > *:not(.toc-wrap):not(.article) { max-width: 680px; }
+ }
+
nav {
display: flex;
align-items: center;
@@ -389,30 +447,78 @@
</nav>
<main>
- <header class="article-header">
- <h1 class="article-h1">{{ .Title }}</h1>
- </header>
-
{{ if .TOC }}
<div class="toc-wrap">
+ <button class="toc-toggle" aria-expanded="true" aria-controls="toc-body">
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+ <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+ </svg>
+ Contents
+ </button>
<details class="toc" open>
<summary class="toc-title">Contents</summary>
- <ul>
- {{ range .TOC }}
- <li>
- <a href="#{{ .ID }}">{{ .Text }}</a>
- </li>
- {{ end }}
- </ul>
+ <div class="toc-body" id="toc-body">
+ <ul>
+ {{ range .TOC }}
+ <li>
+ <a href="#{{ .ID }}">{{ .Text }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
</details>
</div>
{{ end }}
- <article class="prose">{{ .Content }}</article>
+ <article class="article">
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ </article>
</main>
<footer>
<span>&copy; {{ .Year }} Kite</span>
</footer>
+
+ <script>
+ const toggle = document.querySelector(".toc-toggle");
+ const body = document.getElementById("toc-body");
+ const details = document.querySelector(".toc");
+
+ 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> \ No newline at end of file
diff --git a/themes/rose-pine/layout.html b/themes/rose-pine/layout.html
index 2239d62..0d1bbd7 100644
--- a/themes/rose-pine/layout.html
+++ b/themes/rose-pine/layout.html
@@ -250,9 +250,9 @@
background: linear-gradient(90deg, transparent, var(--rp-highlight-med) 20%, var(--rp-highlight-med) 80%, transparent);
}
- .toc-wrap {
- margin: 2.5rem 0;
- }
+ main { display: flex; flex-direction: column; align-items: center; }
+
+ .toc-wrap { margin: 2.5rem 0; }
.toc {
background: var(--rp-surface);
@@ -269,6 +269,7 @@
color: var(--rp-iris);
margin: 0 0 0.8rem;
display: block;
+ cursor: pointer;
}
.toc ul {
@@ -291,6 +292,8 @@
color: var(--rp-subtle);
text-decoration: none;
border: none;
+ display: block;
+ padding: 0.2rem 0;
}
.toc a:hover {
@@ -298,6 +301,61 @@
border: none;
}
+ .toc a.active {
+ color: var(--rp-iris);
+ 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(--rp-muted);
+ margin-bottom: 0.8rem;
+ width: 100%;
+ text-align: left;
+ }
+
+ .toc-toggle svg { transition: transform 140ms ease; }
+ .toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+
+ .toc-body {
+ overflow: hidden;
+ transition: max-height 240ms ease, opacity 200ms ease;
+ max-height: 500px;
+ opacity: 1;
+ }
+
+ .toc-body.collapsed { max-height: 0; opacity: 0; }
+
+ @media (max-width: 699px) {
+ .toc-title { display: none; }
+ }
+
+ @media (min-width: 700px) and (max-width: 1099px) {
+ .toc { display: block; background: transparent; border: none; border-left: 2px solid var(--rp-iris); padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ }
+
+ @media (min-width: 1100px) {
+ main { flex-direction: row; align-items: flex-start; max-width: 1100px; }
+ .toc-wrap { position: sticky; top: 6rem; width: 200px; flex-shrink: 0; margin-right: 3rem; order: -1; }
+ .toc { background: transparent; border: none; border-left: 2px solid var(--rp-iris); border-radius: 0; padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ .article { flex: 1; max-width: 680px; }
+ main > *:not(.toc-wrap):not(.article) { max-width: 680px; }
+ }
+
nav {
display: flex;
align-items: center;
@@ -383,30 +441,78 @@
</nav>
<main>
- <header class="article-header">
- <h1 class="article-h1">{{ .Title }}</h1>
- </header>
-
{{ if .TOC }}
<div class="toc-wrap">
+ <button class="toc-toggle" aria-expanded="true" aria-controls="toc-body">
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+ <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+ </svg>
+ Contents
+ </button>
<details class="toc" open>
<summary class="toc-title">Contents</summary>
- <ul>
- {{ range .TOC }}
- <li>
- <a href="#{{ .ID }}">{{ .Text }}</a>
- </li>
- {{ end }}
- </ul>
+ <div class="toc-body" id="toc-body">
+ <ul>
+ {{ range .TOC }}
+ <li>
+ <a href="#{{ .ID }}">{{ .Text }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
</details>
</div>
{{ end }}
- <article class="prose">{{ .Content }}</article>
+ <article class="article">
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ </article>
</main>
<footer>
<span>&copy; {{ .Year }} Kite</span>
</footer>
+
+ <script>
+ const toggle = document.querySelector(".toc-toggle");
+ const body = document.getElementById("toc-body");
+ const details = document.querySelector(".toc");
+
+ 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> \ No newline at end of file
diff --git a/themes/terminal-gruvbox/layout.html b/themes/terminal-gruvbox/layout.html
index be63094..146cb76 100644
--- a/themes/terminal-gruvbox/layout.html
+++ b/themes/terminal-gruvbox/layout.html
@@ -242,9 +242,9 @@
background: linear-gradient(90deg, transparent, var(--gb-bg-2) 20%, var(--gb-bg-2) 80%, transparent);
}
- .toc-wrap {
- margin: 2rem 0;
- }
+ main { display: flex; flex-direction: column; align-items: center; }
+
+ .toc-wrap { margin: 2rem 0; }
.toc {
background: var(--gb-bg);
@@ -261,6 +261,7 @@
color: var(--gb-yellow);
margin: 0 0 0.6rem;
display: block;
+ cursor: pointer;
}
.toc ul {
@@ -283,6 +284,8 @@
color: var(--gb-fg-2);
text-decoration: none;
border: none;
+ display: block;
+ padding: 0.15rem 0;
}
.toc a:hover {
@@ -290,6 +293,61 @@
border: none;
}
+ .toc a.active {
+ color: var(--gb-yellow);
+ 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(--gb-fg-3);
+ margin-bottom: 0.6rem;
+ width: 100%;
+ text-align: left;
+ }
+
+ .toc-toggle svg { transition: transform 140ms ease; }
+ .toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+
+ .toc-body {
+ overflow: hidden;
+ transition: max-height 240ms ease, opacity 200ms ease;
+ max-height: 500px;
+ opacity: 1;
+ }
+
+ .toc-body.collapsed { max-height: 0; opacity: 0; }
+
+ @media (max-width: 699px) {
+ .toc-title { display: none; }
+ }
+
+ @media (min-width: 700px) and (max-width: 1099px) {
+ .toc { display: block; background: transparent; border: none; border-left: 2px solid var(--gb-yellow); padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ }
+
+ @media (min-width: 1100px) {
+ main { flex-direction: row; align-items: flex-start; max-width: 1100px; }
+ .toc-wrap { position: sticky; top: 6rem; width: 200px; flex-shrink: 0; margin-right: 3rem; order: -1; }
+ .toc { background: transparent; border: none; border-left: 2px solid var(--gb-yellow); border-radius: 0; padding: 0 0 0 1rem; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ .article { flex: 1; max-width: 680px; }
+ main > *:not(.toc-wrap):not(.article) { max-width: 680px; }
+ }
+
nav {
display: flex;
align-items: center;
@@ -374,30 +432,78 @@
</nav>
<main>
- <header class="article-header">
- <h1 class="article-h1">{{ .Title }}</h1>
- </header>
-
{{ if .TOC }}
<div class="toc-wrap">
+ <button class="toc-toggle" aria-expanded="true" aria-controls="toc-body">
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+ <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+ </svg>
+ Contents
+ </button>
<details class="toc" open>
<summary class="toc-title">Contents</summary>
- <ul>
- {{ range .TOC }}
- <li>
- <a href="#{{ .ID }}">{{ .Text }}</a>
- </li>
- {{ end }}
- </ul>
+ <div class="toc-body" id="toc-body">
+ <ul>
+ {{ range .TOC }}
+ <li>
+ <a href="#{{ .ID }}">{{ .Text }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
</details>
</div>
{{ end }}
- <article class="prose">{{ .Content }}</article>
+ <article class="article">
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ </article>
</main>
<footer>
<span>&copy; {{ .Year }} Kite</span>
</footer>
+
+ <script>
+ const toggle = document.querySelector(".toc-toggle");
+ const body = document.getElementById("toc-body");
+ const details = document.querySelector(".toc");
+
+ 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> \ No newline at end of file
diff --git a/themes/tufte/layout.html b/themes/tufte/layout.html
index d5bb93f..3ac212d 100644
--- a/themes/tufte/layout.html
+++ b/themes/tufte/layout.html
@@ -137,6 +137,8 @@
margin: 2rem auto;
}
+ main { display: flex; flex-direction: column; align-items: center; }
+
.toc-wrap {
margin: 2rem 0;
padding: 1rem;
@@ -151,23 +153,88 @@
color: #555;
margin: 0 0 0.5rem;
display: block;
+ cursor: pointer;
}
.toc ul {
margin: 0;
padding-left: 1rem;
+ list-style: none;
+ }
+
+ .toc li {
+ padding: 0.15rem 0;
+ margin: 0;
}
+ .toc li::before { display: none; }
+
.toc a {
color: #333;
text-decoration: none;
font-size: 0.95rem;
+ display: block;
+ padding: 0.15rem 0;
}
.toc a:hover {
color: #0066cc;
}
+ .toc a.active {
+ color: #0066cc;
+ font-weight: 500;
+ }
+
+ .toc-toggle {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ background: none;
+ border: none;
+ padding: 0;
+ font-size: 0.7rem;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: #888;
+ margin-bottom: 0.5rem;
+ width: 100%;
+ text-align: left;
+ }
+
+ .toc-toggle svg { transition: transform 140ms ease; }
+ .toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+
+ .toc-body {
+ overflow: hidden;
+ transition: max-height 240ms ease, opacity 200ms ease;
+ max-height: 500px;
+ opacity: 1;
+ }
+
+ .toc-body.collapsed { max-height: 0; opacity: 0; }
+
+ @media (max-width: 699px) {
+ .toc-title { display: none; }
+ }
+
+ @media (min-width: 700px) and (max-width: 1099px) {
+ .toc { display: block; background: transparent; border: none; padding: 0; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ }
+
+ @media (min-width: 1100px) {
+ main { flex-direction: row; align-items: flex-start; max-width: 1100px; }
+ .toc-wrap { position: sticky; top: 6rem; width: 200px; flex-shrink: 0; margin-right: 3rem; order: -1; background: transparent; padding: 0; }
+ .toc { background: transparent; border: none; padding: 0; }
+ .toc-title { display: block; }
+ .toc-body { max-height: none !important; opacity: 1 !important; }
+ .article { flex: 1; max-width: 680px; }
+ main > *:not(.toc-wrap):not(.article) { max-width: 680px; }
+ }
+
nav {
display: flex;
align-items: center;
@@ -246,30 +313,78 @@
</nav>
<main>
- <header class="article-header">
- <h1>{{ .Title }}</h1>
- </header>
-
{{ if .TOC }}
<div class="toc-wrap">
- <details open>
+ <button class="toc-toggle" aria-expanded="true" aria-controls="toc-body">
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+ <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+ </svg>
+ Contents
+ </button>
+ <details class="toc" open>
<summary class="toc-title">Contents</summary>
- <ul>
- {{ range .TOC }}
- <li>
- <a href="#{{ .ID }}">{{ .Text }}</a>
- </li>
- {{ end }}
- </ul>
+ <div class="toc-body" id="toc-body">
+ <ul>
+ {{ range .TOC }}
+ <li>
+ <a href="#{{ .ID }}">{{ .Text }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
</details>
</div>
{{ end }}
- <article class="prose">{{ .Content }}</article>
+ <article class="article">
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ </article>
</main>
<footer>
<span>&copy; {{ .Year }} Kite</span>
</footer>
+
+ <script>
+ const toggle = document.querySelector(".toc-toggle");
+ const body = document.getElementById("toc-body");
+ const details = document.querySelector(".toc");
+
+ 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> \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-05-22 10:09:51 +0000