fix(toc): too wide when no related contents

This commit is contained in:
ZhenShuo Leo
2025-10-06 09:26:32 +08:00
parent d8ea1d81b5
commit 9b35cc2bae
3 changed files with 8 additions and 15 deletions

View File

@@ -245,6 +245,7 @@ body.zen-mode-enable {
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--spacing: 0.25rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-xl: 36rem;
--container-3xl: 48rem;
@@ -3120,6 +3121,11 @@ body.zen-mode-enable {
width: auto;
}
}
.lg\:max-w-2xs {
@media (width >= 1024px) {
max-width: var(--container-2xs);
}
}
.lg\:max-w-7xl {
@media (width >= 1024px) {
max-width: var(--container-7xl);
@@ -3638,11 +3644,6 @@ button, [role="button"] {
.prose div.min-w-0.max-w-prose > *:first-child {
margin-top: calc(var(--spacing) * 3);
}
#TableOfContents {
@media (width >= 1024px) {
max-width: 25vw;
}
}
#TOCView {
max-height: calc(100vh - 150px);
min-height: 0;

View File

@@ -66,10 +66,6 @@ button,
}
/* Table of Contents */
#TableOfContents {
@apply lg:max-w-[25vw];
}
#TOCView {
max-height: calc(100vh - 150px);
min-height: 0;

View File

@@ -33,17 +33,13 @@
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
{{ $enableToc := .Params.showTableOfContents | default (site.Params.list.showTableOfContents | default false) }}
{{ $showToc := and $enableToc (in .TableOfContents "<ul") }}
{{ $showRelated := site.Params.article.showRelatedPosts | default false }}
{{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
{{ if or $showToc $showRelated }}
<div class="order-first lg:ml-auto px-0 lg:order-last lg:ps-8">
{{ if $showToc }}
<div class="order-first lg:ml-auto px-0 lg:order-last lg:ps-8 lg:max-w-2xs">
<div class="toc ps-5 print:hidden lg:sticky {{ $topClass }}">
{{ if $showToc }}
{{ partial "toc.html" . }}
{{ end }}
{{ if $showRelated }}
sd
{{ end }}
</div>
</div>
{{ end }}