improved usability of TOC on mobile

This commit is contained in:
Nuno Coração 2022-10-04 15:37:27 +01:00
parent 3cc0546634
commit 2ad4756f31
2 changed files with 21 additions and 11 deletions

View file

@ -1621,10 +1621,10 @@ select {
width: 3rem;
}
.w-max {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
.w-fit {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.w-36 {
@ -1635,12 +1635,6 @@ select {
width: 100%;
}
.w-fit {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.w-24 {
width: 6rem;
}
@ -3415,6 +3409,10 @@ body:has(#menu-controller:checked) {
order: 9999;
}
.lg\:block {
display: block;
}
.lg\:hidden {
display: none;
}

View file

@ -1,4 +1,4 @@
<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5">
<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
<summary
class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
>
@ -10,3 +10,15 @@
{{ .TableOfContents | emojify }}
</div>
</details>
<details class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
<summary
class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
>
{{ i18n "article.table_of_contents" }}
</summary>
<div
class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
>
{{ .TableOfContents | emojify }}
</div>
</details>