layout updates

src/css/main.css

@@ -423,6 +423,10 @@ html[data-theme="dark"]{
   margin-top: 0;
 }
 
+article {
+  max-width: 730px;
+  margin: 0 auto;
+}
 /* Font rendering + code block tweaks */
 article .markdown {
   -webkit-font-smoothing: auto;
@@ -432,7 +436,7 @@ article .markdown {
   --ifm-code-border-radius: 0;
 }
 article .markdown code {
-  font-size: 75%;
+  font-size: 85%;
   border-radius: 0;
   border: 1px solid #e1e4e5;
 }
@@ -443,7 +447,7 @@ article .markdown :not(pre) > code {
 }
 article .markdown pre code {
   background-color: #f8f8f8;
-  font-size: .75rem !important;
+  font-size: .85rem !important;
 }
 html[data-theme="dark"]{
   article .markdown code {
@@ -458,3 +462,8 @@ html[data-theme="dark"]{
     background-color: #353437;
   }
 }
+
+.breadcrumbs__link:any-link:hover,
+.breadcrumbs__link:hover {
+  background: transparent;
+}

src/css/theme-colors.css

@@ -273,11 +273,18 @@ html[data-theme="dark"] {
   }
 
 }
+
+.theme-admonition,
+.theme-admonition.theme-admonition-note {
+  border: none;
+  border-color: transparent;
+}
 /* info and note  */
 .theme-admonition.theme-admonition-note,
 .theme-admonition.alert--info {
   background-color: var(--color-wave-100);
-  border-color: var(--color-wave-400);
+  /* border-color: var(--color-wave-400); */
+
   a  {
     text-decoration-color: var(--color-wave-blu-700);
     color: var(--color-blu-700);
@@ -292,7 +299,7 @@ html[data-theme="dark"] {
 .theme-admonition.theme-admonition-tip,
 .theme-admonition.theme-admonition-success {
     background-color: var(--color-nextflow-100);
-    border-color: var(--color-nextflow-900);
+    /* border-color: var(--color-nextflow-900); */
     text-decoration-color: var(--color-nextflow-600);
     a {
       color: var(--color-nextflow-800);
@@ -318,9 +325,9 @@ html[data-theme="dark"]  {
       background: #403F43;
     }
   }
-  .details.alert--info {
+  /* .details.alert--info {
     border-color: #F1F1F1;
-  }
+  } */
 
   .theme-doc-version-banner {
     background: var(--color-multiqc-1000);
@@ -341,7 +348,7 @@ html[data-theme="dark"]  {
   }
   .theme-admonition.alert--success {
     background-color: var(--color-nextflow-1000);
-    border-color: var(--color-nextflow-100);
+    /* border-color: var(--color-nextflow-100); */
     text-decoration-color: var(--color-nextflow-200);
     a {
       color: var(--color-nextflow-200);

src/css/typography.css

@@ -5,7 +5,7 @@ h1, h2, h3, h4, h5, h6 {
 h1 {
   font-size: 2.5rem;
   font-weight: 600;
-  margin-top: 2rem;
+  /* margin-top: 2rem; */
   margin-bottom: 1rem;
   line-height: 1.1;
   @media (min-width: 996px) {

src/theme/TOC/index.tsx

@@ -0,0 +1,24 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import type {Props} from '@theme/TOC';
+
+import styles from './styles.module.css';
+
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+
+export default function TOC({className, ...props}: Props): ReactNode {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <h4 className="font-semibold text-[.95rem]">On this page</h4>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}

src/theme/TOC/styles.module.css

@@ -0,0 +1,16 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}