.pagination { display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sidebar-border); flex-wrap: wrap; gap: 1rem; } .pagination a { display: flex; align-items: center; color: var(--primary); text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 0.5rem 0; } .pagination a:hover { text-decoration: underline; } .pagination .prev:before { content: "←"; margin-right: 0.5rem; } .pagination .next { margin-left: auto; } .pagination .next:after { content: "→"; margin-left: 0.5rem; } .toc { display: none; position: sticky; top: 80px; max-height: calc(100vh - 80px); overflow-y: auto; padding-left: 1rem; border-left: 1px solid var(--sidebar-border); font-size: 0.875rem; width: 220px; } .toc-mobile { margin: 2rem 0; padding: 1rem; border: 1px solid var(--sidebar-border); border-radius: 6px; background-color: var(--sidebar-bg); } .toc-header { font-weight: 600; margin-bottom: 0.5rem; } .toc-link { display: block; color: var(--text); opacity: 0.8; text-decoration: none; padding: 0.25rem 0; transition: color 0.2s; font-size: 0.875rem; line-height: 1.4; } .toc-link:hover { color: var(--primary); } .toc-link.active { color: var(--primary); font-weight: 500; } .toc-link.indent { padding-left: 1rem; } .toc-link.indent-2 { padding-left: 2rem; } .sidebar { width: 100%; padding: 1rem; background-color: var(--sidebar-bg); border-bottom: 1px solid var(--sidebar-border); overflow-y: auto; transition: transform 0.3s ease, height 0.3s ease; max-height: 0; overflow: hidden; } .sidebar.open { max-height: 80vh; overflow-y: auto; } .sidebar-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem; background-color: var(--sidebar-bg); border: none; border-bottom: 1px solid var(--sidebar-border); color: var(--text); font-weight: 600; cursor: pointer; text-align: left; } .sidebar-toggle:focus { outline: 2px solid var(--primary); } .sidebar-header { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); opacity: 0.6; margin: 1.5rem 0 0.5rem; } .sidebar-link { display: block; padding: 0.5rem 0; color: var(--text); text-decoration: none; border-radius: 4px; transition: background-color 0.2s; font-size: 0.9375rem; } .sidebar-link:hover { background-color: rgba(0, 0, 0, 0.05); padding-left: 0.5rem; } .dark .sidebar-link:hover { background-color: rgba(255, 255, 255, 0.05); } .sidebar-link.active { color: var(--primary); font-weight: 600; } .sidebar-sublink { display: block; padding: 0.375rem 0 0.375rem 1rem; color: var(--text); text-decoration: none; border-radius: 4px; transition: background-color 0.2s; font-size: 0.875rem; opacity: 0.8; } .sidebar-sublink:hover { background-color: rgba(0, 0, 0, 0.05); padding-left: 1.5rem; opacity: 1; } .dark .sidebar-sublink:hover { background-color: rgba(255, 255, 255, 0.05); } .sidebar-sublink.active { color: var(--primary); font-weight: 600; opacity: 1; } /* Overlay for mobile sidebar */ .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 98; display: none; } .sidebar-overlay.active { display: block; } @media (min-width: 1280px) { .toc-mobile { display: none; } .toc { display: block; } } @media (min-width: 1024px) { .sidebar { width: 280px; padding: 2rem; border-right: 1px solid var(--sidebar-border); border-bottom: none; position: sticky; top: 60px; height: calc(100vh - 60px); max-height: none; overflow-y: auto; display: block !important; } .sidebar-toggle { display: none; } } /* Improved touch targets for mobile */ @media (max-width: 768px) { .pagination a, .sidebar-link, .toc-link { padding: 0.625rem 0; } .sidebar.open { transform: translateX(300px); } } @layer base { :where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) { scrollbar-gutter: stable; background-image: linear-gradient( var(--color-base-100), var(--color-base-100) ); --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%); } :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) { overflow: hidden; } } @layer utilities { .drawer { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative; } .drawer-content { grid-row-start: 1; grid-column-start: 2; min-width: 0; } .drawer-side { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; overflow: hidden; & > .drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0/0.4); place-self: stretch stretch; position: sticky; top: 0; } & > * { grid-row-start: 1; grid-column-start: 1; } & > :not(.drawer-overlay) { will-change: transform; transition: translate 0.3s ease-out; translate: -100%; [dir="rtl"] & { translate: 100%; } } } .drawer-toggle { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; &:checked { & ~ .drawer-side { pointer-events: auto; visibility: visible; opacity: 1; overflow-y: auto; & > :not(.drawer-overlay) { translate: 0%; } } } &:focus-visible ~ .drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid; } } .drawer-end { grid-auto-columns: auto max-content; & > .drawer-toggle { & ~ .drawer-content { grid-column-start: 1; } & ~ .drawer-side { grid-column-start: 2; justify-items: end; } & ~ .drawer-side > :not(.drawer-overlay) { translate: 100%; [dir="rtl"] & { translate: -100%; } } &:checked ~ .drawer-side > :not(.drawer-overlay) { translate: 0%; } } } .drawer-open { & > .drawer-side { overflow-y: auto; } & > .drawer-toggle { display: none; & ~ .drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; & > .drawer-overlay { cursor: default; background-color: #0000; } & > :not(.drawer-overlay) { translate: 0%; [dir="rtl"] & { translate: 0%; } } } &:checked ~ .drawer-side { pointer-events: auto; visibility: visible; } } } .side-contents { padding: 1rem; width: 20rem; min-height: 100%; background-color: var(--sidebar-bg); color: var(--color-base-content); border-right: solid var(--sidebar-border) 1px; margin: 4rem 0 0 0; } @media (width>=768px) { .md\:drawer-open { & > .drawer-side { overflow-y: auto; } & > .drawer-toggle { display: none; & ~ .drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; & > .drawer-overlay { cursor: default; background-color: #0000; } & > :not(.drawer-overlay) { translate: 0%; [dir="rtl"] & { translate: 0%; } } } &:checked ~ .drawer-side { pointer-events: auto; visibility: visible; } } } .side-contents { margin: 0; } } .menu { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; font-size: 0.875rem; display: flex; & :where(li ul) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: 0.5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: 0.1; width: var(--border); content: ""; position: absolute; top: 0.75rem; bottom: 0.75rem; } } & :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } & :where(li:not(.menu-title) > :not(ul, details, .menu-title, .btn)), & :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; text-wrap: balance; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: 0.5rem; padding-block: 0.375rem; padding-inline: 0.75rem; transition-property: color, background-color, box-shadow; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); display: grid; } & :where(li > details > summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { & { outline-offset: 2px; outline: 2px solid #0000; } } &::-webkit-details-marker { display: none; } } & :where(li > details > summary), & :where(li > .menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: 0.375rem; height: 0.375rem; transition-property: rotate, translate; transition-duration: 0.2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px; } } & :where(li > details[open] > summary):after, & :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg; } & :where( li:not(.menu-title, .disabled) > :not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { & { outline-offset: 2px; outline: 2px solid #0000; } } } } & :where( li:not(.menu-title, .disabled) > :not(ul, details, .menu-title):not( .menu-active, :active, .btn ):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not( .menu-active, :active, .btn ):hover ) { cursor: pointer; background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); --tw-outline-style: none; outline-style: none; box-shadow: inset 0 1px oklch(0% 0 0/0.01), inset 0 -1px oklch(100% 0 0/0.01); @media (forced-colors: active) { & { outline-offset: 2px; outline: 2px solid #0000; } } } & :where(li:empty) { background-color: var(--color-base-content); opacity: 0.1; height: 1px; margin: 0.5rem 1rem; } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end; } & > :not(ul, .menu-title, details, .btn):active, & > :not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { --tw-outline-style: none; color: var(--menu-active-fg); background-color: var(--menu-active-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); outline-style: none; @media (forced-colors: active) { & { outline-offset: 2px; outline: 2px solid #0000; } } &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px)-2px var(--menu-active-bg); } } &.menu-disabled { pointer-events: none; color: color-mix( in oklab, var(--color-base-content) 20%, transparent ); } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg; } } & .dropdown-content { margin-top: 0.5rem; padding: 0.5rem; &:before { display: none; } } } }