+
{childLinks.map((child) => (
))}
diff --git a/src/components/Layout/PageContent/article.css b/src/components/Layout/PageContent/article.css
new file mode 100644
index 0000000000..5c9558c791
--- /dev/null
+++ b/src/components/Layout/PageContent/article.css
@@ -0,0 +1,462 @@
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ font-size: 1rem;
+ font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
+ line-height: 1.5;
+ max-width: 100vw;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+}
+
+.content > section > * + * {
+ margin-top: 1.25rem;
+}
+
+.content > section > :first-child {
+ margin-top: 0;
+}
+
+/* Typography */
+.article-content {
+ & > h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-bottom: 1rem;
+ font-weight: bold;
+ line-height: 1;
+ }
+}
+
+h1,
+h2 {
+ max-width: 40ch;
+}
+
+:is(h2, h3):not(:first-child) {
+ margin-top: 3rem;
+}
+
+:is(h4, h5, h6):not(:first-child) {
+ margin-top: 2rem;
+}
+
+h1 {
+ @apply text-heading-1;
+}
+
+.article-content {
+ & > h2 {
+ @apply text-heading-2;
+ }
+ & > h3 {
+ @apply text-heading-3;
+ }
+ & > h4 {
+ @apply text-heading-4;
+ }
+ & > h5 {
+ @apply text-heading-5;
+ }
+}
+
+article p {
+ @apply mb-4;
+ line-height: 1.65em;
+}
+
+.content ul {
+ line-height: 1.1em;
+}
+
+p,
+.content ul {
+ @apply text-black;
+}
+
+small,
+.text_small {
+ font-size: 0.833rem;
+}
+
+.article-main a {
+ @apply text-base;
+ @apply text-link-active;
+ font-weight: 450;
+ text-underline-offset: 0.08em;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+nav a {
+ color: inherit;
+}
+
+.article-content :is(ul, ol) > * + * {
+ margin-top: 0.75rem;
+}
+
+.article-content nav :is(ul, ol) > * + * {
+ margin-top: inherit;
+}
+
+.article-content li > :is(p, pre, blockquote):not(:first-child) {
+ margin-top: 1rem;
+}
+
+.article-content :is(ul, ol) {
+ padding-left: 1em;
+}
+
+.article-content nav :is(ul, ol) {
+ padding-left: inherit;
+}
+
+.article-content ol {
+ list-style: none;
+ & li {
+ position: relative;
+ }
+}
+
+.article-content ol li::before {
+ content: counter(list-item);
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 20px;
+ position: absolute;
+ top: 2px;
+ left: -14px;
+}
+
+.article-content ul {
+ list-style: none;
+ & li {
+ position: relative;
+ }
+}
+
+.article-content ul li:not(#tabs-container li)::before {
+ content: "•";
+ font-weight: 500;
+ position: absolute;
+ top: -5px;
+ left: -14px;
+ font-size: 20px;
+}
+
+.article-content nav {
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+}
+
+.article-content ::marker {
+ font-weight: bold;
+ color: var(--theme-text-light);
+}
+
+.article-content iframe {
+ width: 100%;
+ height: auto;
+ aspect-ratio: 16 / 9;
+}
+
+a > code {
+ position: relative;
+ color: var(--theme-text-accent);
+ background: transparent;
+ text-underline-offset: var(--padding-block);
+}
+
+a > code::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ background: var(--theme-accent);
+ opacity: var(--theme-accent-opacity);
+ border-radius: var(--border-radius);
+}
+
+a:hover,
+a:focus {
+ text-decoration: underline;
+}
+
+a:focus {
+ outline: 2px solid currentColor;
+ outline-offset: 0.25em;
+}
+
+strong {
+ font-weight: 600;
+ color: inherit;
+}
+
+/* Supporting Content */
+
+.article-content .expressive-code {
+ @apply mb-7;
+}
+
+code {
+ --border-radius: 3px;
+ --padding-block: 0.2rem;
+ --padding-inline: 0.33rem;
+
+ font-family: var(--font-mono);
+ font-size: 0.85em;
+ color: inherit;
+ background-color: var(--theme-code-inline-bg);
+ padding: var(--padding-block) var(--padding-inline);
+ margin: calc(var(--padding-block) * -1) -0.125em;
+ border-radius: var(--border-radius);
+ word-break: break-word;
+}
+
+pre.astro-code > code {
+ all: unset;
+}
+
+pre > code {
+ font-size: 1em;
+}
+
+table,
+pre {
+ position: relative;
+ --padding-block: 1rem;
+ --padding-inline: 2rem;
+ padding: var(--padding-block) var(--padding-inline);
+ padding-right: calc(var(--padding-inline) * 2);
+ margin-left: calc(var(--padding-inline) * -1);
+ margin-right: calc(var(--padding-inline) * -1);
+ font-family: var(--font-mono);
+
+ line-height: 1.5;
+ font-size: 0.85em;
+ overflow-y: hidden;
+ overflow-x: auto;
+}
+
+table {
+ width: 100%;
+ padding: var(--padding-block) 0;
+ margin: 0;
+ border-collapse: collapse;
+}
+
+/* Zebra striping */
+tr:nth-of-type(odd) {
+ background: var(--theme-bg-hover);
+}
+th {
+ background: var(--color-black);
+ color: var(--theme-color);
+ font-weight: bold;
+}
+td,
+th {
+ padding: 6px;
+ text-align: left;
+}
+
+pre {
+ background-color: var(--theme-code-bg);
+ color: var(--theme-code-text);
+}
+
+blockquote code {
+ background-color: var(--theme-bg);
+}
+
+@media (min-width: 37.75em) {
+ pre {
+ --padding-inline: 1.25rem;
+ border-radius: 8px;
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
+blockquote {
+ margin: 2rem 0;
+ padding: 1.25em 1.5rem;
+ border-left: 3px solid var(--theme-text-light);
+ background-color: var(--theme-bg-offset);
+ border-radius: 0 0.25rem 0.25rem 0;
+ line-height: 1.7;
+}
+
+img {
+ max-width: 100%;
+}
+
+.article-content button {
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ gap: 0.25em;
+ padding: 0.33em 0.67em;
+ border: 0;
+ background: var(--theme-bg);
+ display: flex;
+ font-size: 1rem;
+ align-items: center;
+ gap: 0.25em;
+ border-radius: 99em;
+ color: var(--theme-text);
+ background-color: var(--theme-bg);
+}
+
+h2.heading {
+ font-size: 1rem;
+ font-weight: 700;
+ padding: 0.1rem 1rem;
+ text-transform: uppercase;
+ margin-bottom: 0.5rem;
+}
+
+.header-link {
+ font-size: 16px;
+ font-weight: 400;
+}
+
+.header-link a {
+ display: inline-flex;
+ gap: 0.5em;
+ width: 100%;
+ font: inherit;
+ padding: 0.4rem 0;
+ line-height: 1.3;
+ color: inherit;
+ text-decoration: none;
+ unicode-bidi: plaintext;
+}
+
+@media (min-width: 50em) {
+ .header-link a {
+ padding: 0.275rem 0;
+ }
+}
+
+.header-link:hover a,
+.header-link a:focus {
+ @apply hover:text-link-active;
+}
+.header-link svg {
+ opacity: 0.6;
+}
+.header-link:hover svg {
+ opacity: 0.8;
+}
+
+/* Add line and padding on the left side */
+.header-link.depth-3 {
+ padding-inline-start: 1rem;
+}
+.header-link.depth-4 {
+ padding-inline-start: 2rem;
+}
+
+/* Screenreader Only Text */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.focus\:not-sr-only:focus,
+.focus\:not-sr-only:focus-visible {
+ position: static;
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 0;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+}
+
+:target {
+ scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem;
+}
+
+/* Highlight TOC header link matching the current scroll position */
+.current-header-link {
+ font-weight: 700;
+}
+
+@media (forced-colors: active) {
+ .current-header-link {
+ border: 1px solid CanvasText;
+ }
+}
+
+.current-header-link a {
+ color: var(--theme-text);
+}
+
+dl > dt {
+ font-weight: bold;
+}
+
+dl > dd {
+ margin-left: 1em;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+}
+
+.parameters dt {
+ margin-left: 2em;
+}
+
+.copy-code {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: #3730a3;
+ color: var(--color-white);
+ padding: 0.25rem 0.5rem;
+ font-size: 0.75rem;
+ line-height: 1rem;
+ border-radius: 0;
+}
+
+.copy-code:hover {
+ background-color: #312e81;
+}
+
+.tabList {
+ margin-bottom: var(--ifm-leading);
+}
+
+.tabItem {
+ margin-top: 0 !important;
+}
+
+.article-categories a {
+ color: black;
+ text-decoration: none;
+ &:hover {
+ & span {
+ @apply text-link-active;
+ }
+ }
+}
diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/Layout/RightSidebar/RightSidebar.astro
similarity index 100%
rename from src/components/RightSidebar/RightSidebar.astro
rename to src/components/Layout/RightSidebar/RightSidebar.astro
diff --git a/src/components/RightSidebar/TableOfContents/CollapsedTOC.tsx b/src/components/Layout/RightSidebar/TableOfContents/CollapsedTOC.tsx
similarity index 91%
rename from src/components/RightSidebar/TableOfContents/CollapsedTOC.tsx
rename to src/components/Layout/RightSidebar/TableOfContents/CollapsedTOC.tsx
index bc403b298e..9559c3292b 100644
--- a/src/components/RightSidebar/TableOfContents/CollapsedTOC.tsx
+++ b/src/components/Layout/RightSidebar/TableOfContents/CollapsedTOC.tsx
@@ -8,7 +8,7 @@ interface CollapsedTOCProps {
const CollapsedTOC: FC
= ({ setIsOpened }) => {
return (
-
+
+
+