From 149bc0f9033e1f32ef52a6763cec692b1832f8ac Mon Sep 17 00:00:00 2001
From: Avik Pal <avikpal@mit.edu>
Date: Thu, 19 Sep 2024 12:08:32 -0400
Subject: [PATCH] docs: add the new CSS

---
 docs/src/.vitepress/theme/style.css | 312 +++++++++++++++-------------
 1 file changed, 163 insertions(+), 149 deletions(-)

diff --git a/docs/src/.vitepress/theme/style.css b/docs/src/.vitepress/theme/style.css
index 50cf27ed4..32a04d636 100644
--- a/docs/src/.vitepress/theme/style.css
+++ b/docs/src/.vitepress/theme/style.css
@@ -5,129 +5,130 @@ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/var
 /* Layouts */
 
 .VPHero .clip {
-    white-space: pre;
-    max-width: 500px;
+  white-space: pre;
+  max-width: 500px;
 }
 
 /* Fonts */
 
 @font-face {
-    font-family: JuliaMono-Regular;
-    src: url("https://cdn.jsdelivr.net/gh/cormullion/juliamono/webfonts/JuliaMono-Regular.woff2");
+  font-family: JuliaMono-Regular;
+  src: url("https://cdn.jsdelivr.net/gh/cormullion/juliamono/webfonts/JuliaMono-Regular.woff2");
 }
 
 :root {
-    /* Typography */
-    --vp-font-family-base: "Barlow", "Inter var experimental", "Inter var",
-        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-        Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  /* Typography */
+  --vp-font-family-base: "Barlow", "Inter var experimental", "Inter var",
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 
-    /* Code Snippet font */
-    --vp-font-family-mono: JuliaMono-Regular, monospace;
+  /* Code Snippet font */
+  --vp-font-family-mono: JuliaMono-Regular, monospace;
 
-    /*
+  /*
     Disable the 'calt' (contextual alternates, often called ligatures) font feature
     for monospaced text, which is usually enabled by default. This feature changes
     the display of character combinations such "-" + ">", and "|" + ">". These can
     be confusing for beginners, particularly if the font has 'unusual' designs.
     */
-    font-feature-settings: 'calt' 0;
+  font-feature-settings: "calt" 0;
 }
 
 .mono {
+  pre {
+    font-family: JuliaMono-Light;
+  }
 
-    pre {
-        font-family: JuliaMono-Light;
-    }
-
-    code {
-        font-family: JuliaMono-Light;
-    }
-
-    ;
+  code {
+    font-family: JuliaMono-Light;
+  }
 }
 
 /* Colors */
 
 :root {
-    --julia-blue: #4063D8;
-    --julia-purple: #9558B2;
-    --julia-red: #CB3C33;
-    --julia-green: #389826;
-
-    --vp-c-brand: #389826;
-    --vp-c-brand-light: #3dd027;
-    --vp-c-brand-lighter: #9499ff;
-    --vp-c-brand-lightest: #bcc0ff;
-    --vp-c-brand-dark: #535bf2;
-    --vp-c-brand-darker: #454ce1;
-    --vp-c-brand-dimm: #212425;
+  --julia-blue: #4063d8;
+  --julia-purple: #9558b2;
+  --julia-red: #cb3c33;
+  --julia-green: #389826;
+
+  --vp-c-brand: #389826;
+  --vp-c-brand-light: #3dd027;
+  --vp-c-brand-lighter: #9499ff;
+  --vp-c-brand-lightest: #bcc0ff;
+  --vp-c-brand-dark: #535bf2;
+  --vp-c-brand-darker: #454ce1;
+  --vp-c-brand-dimm: #212425;
 }
 
 /* Component: Button */
 
 :root {
-    --vp-button-brand-border: var(--vp-c-brand-light);
-    --vp-button-brand-text: var(--vp-c-white);
-    --vp-button-brand-bg: var(--vp-c-brand);
-    --vp-button-brand-hover-border: var(--vp-c-brand-light);
-    --vp-button-brand-hover-text: var(--vp-c-white);
-    --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-    --vp-button-brand-active-border: var(--vp-c-brand-light);
-    --vp-button-brand-active-text: var(--vp-c-white);
-    --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
 }
 
 /* Component: Home */
 
 :root {
-    --vp-home-hero-name-color: transparent;
-    --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
-            #9558B2 30%,
-            #CB3C33);
-
-    --vp-home-hero-image-background-image: linear-gradient(-45deg,
-            #9558B2 30%,
-            #389826 30%,
-            #CB3C33);
-    --vp-home-hero-image-filter: blur(40px);
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #9558b2 30%,
+    #cb3c33
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #9558b2 30%,
+    #389826 30%,
+    #cb3c33
+  );
+  --vp-home-hero-image-filter: blur(40px);
 }
 
 @media (min-width: 640px) {
-    :root {
-        --vp-home-hero-image-filter: blur(56px);
-    }
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
 }
 
 @media (min-width: 960px) {
-    :root {
-        --vp-home-hero-image-filter: blur(72px);
-    }
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
 }
 
 /* Component: Custom Block */
 
 :root.dark {
-    --vp-custom-block-tip-border: var(--vp-c-brand);
-    --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
-    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
-
-    /* // Tweak the color palette for blacks and dark grays */
-    --vp-c-black: hsl(220 20% 9%);
-    --vp-c-black-pure: hsl(220, 24%, 4%);
-    --vp-c-black-soft: hsl(220 16% 13%);
-    --vp-c-black-mute: hsl(220 14% 17%);
-    --vp-c-gray: hsl(220 8% 56%);
-    --vp-c-gray-dark-1: hsl(220 10% 39%);
-    --vp-c-gray-dark-2: hsl(220 12% 28%);
-    --vp-c-gray-dark-3: hsl(220 12% 23%);
-    --vp-c-gray-dark-4: hsl(220 14% 17%);
-    --vp-c-gray-dark-5: hsl(220 16% 13%);
-
-    /* // Backgrounds */
-    /* --vp-c-bg: hsl(240, 2%, 11%); */
-    --vp-custom-block-info-bg: hsl(220 14% 17%);
-    /* --vp-c-gutter: hsl(220 20% 9%);
+  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+
+  /* // Tweak the color palette for blacks and dark grays */
+  --vp-c-black: hsl(220 20% 9%);
+  --vp-c-black-pure: hsl(220, 24%, 4%);
+  --vp-c-black-soft: hsl(220 16% 13%);
+  --vp-c-black-mute: hsl(220 14% 17%);
+  --vp-c-gray: hsl(220 8% 56%);
+  --vp-c-gray-dark-1: hsl(220 10% 39%);
+  --vp-c-gray-dark-2: hsl(220 12% 28%);
+  --vp-c-gray-dark-3: hsl(220 12% 23%);
+  --vp-c-gray-dark-4: hsl(220 14% 17%);
+  --vp-c-gray-dark-5: hsl(220 16% 13%);
+
+  /* // Backgrounds */
+  /* --vp-c-bg: hsl(240, 2%, 11%); */
+  --vp-custom-block-info-bg: hsl(220 14% 17%);
+  /* --vp-c-gutter: hsl(220 20% 9%);
 
       --vp-c-bg-alt: hsl(220 20% 9%);
       --vp-c-bg-soft: hsl(220 14% 17%);
@@ -138,28 +139,28 @@ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/var
 /* Component: Algolia */
 
 .DocSearch {
-    --docsearch-primary-color: var(--vp-c-brand) !important;
+  --docsearch-primary-color: var(--vp-c-brand) !important;
 }
 
 /* Component: MathJax */
 
-mjx-container>svg {
-    display: block;
-    margin: auto;
+mjx-container > svg {
+  display: block;
+  margin: auto;
 }
 
 mjx-container {
-    padding: 0.5rem 0;
+  padding: 0.5rem 0;
 }
 
 mjx-container {
-    display: inline;
-    margin: auto 2px -2px;
+  display: inline;
+  margin: auto 2px -2px;
 }
 
-mjx-container>svg {
-    margin: auto;
-    display: inline;
+mjx-container > svg {
+  margin: auto;
+  display: inline;
 }
 
 /**
@@ -167,19 +168,19 @@ mjx-container>svg {
    * -------------------------------------------------------------------------- */
 
 :root {
-    --vp-c-brand-1: #CB3C33;
-    --vp-c-brand-2: #CB3C33;
-    --vp-c-brand-3: #CB3C33;
-    --vp-c-sponsor: #ca2971;
-    --vitest-c-sponsor-hover: #c13071;
+  --vp-c-brand-1: #cb3c33;
+  --vp-c-brand-2: #cb3c33;
+  --vp-c-brand-3: #cb3c33;
+  --vp-c-sponsor: #ca2971;
+  --vitest-c-sponsor-hover: #c13071;
 }
 
 .dark {
-    --vp-c-brand-1: #91dd33;
-    --vp-c-brand-2: #91dd33;
-    --vp-c-brand-3: #91dd33;
-    --vp-c-sponsor: #91dd33;
-    --vitest-c-sponsor-hover: #e51370;
+  --vp-c-brand-1: #91dd33;
+  --vp-c-brand-2: #91dd33;
+  --vp-c-brand-3: #91dd33;
+  --vp-c-sponsor: #91dd33;
+  --vitest-c-sponsor-hover: #e51370;
 }
 
 /**
@@ -187,84 +188,97 @@ mjx-container>svg {
    * -------------------------------------------------------------------------- */
 
 :root:not(.dark) .dark-only {
-    display: none;
+  display: none;
 }
 
 :root:is(.dark) .light-only {
-    display: none;
+  display: none;
 }
 
-
 /* https://bddxg.top/article/note/vitepress优化/一些细节上的优化.html#文档页面调整-加宽 */
 
 @media (min-width: 1440px) {
-    .VPSidebar {
-        padding-left: 20px !important;
-        width: 250px !important;
-    }
-
-    .VPNavBar .title {
-        padding-left: 15px !important;
-        width: 230px !important;
-    }
-
-    .VPContent.has-sidebar {
-        padding-left: 250px !important;
-        padding-right: 5vw !important;
-    }
-
-    .VPNavBar .curtain {
-        width: 100% !important;
-    }
-
-    .VPDoc {
-        padding: 32px 0 0 !important;
-    }
-
-    .VPNavBar.has-sidebar .content {
-        padding-left: 250px !important;
-        padding-right: 20px !important;
-    }
-
-    .VPNavBar .divider {
-        padding-left: 250px !important;
-    }
+  .VPSidebar {
+    padding-left: 20px !important;
+    width: 250px !important;
+  }
+
+  .VPNavBar .title {
+    padding-left: 15px !important;
+    width: 230px !important;
+  }
+
+  .VPContent.has-sidebar {
+    padding-left: 250px !important;
+    padding-right: 5vw !important;
+  }
+
+  .VPNavBar .curtain {
+    width: 100% !important;
+  }
+
+  .VPDoc {
+    padding: 32px 0 0 !important;
+  }
+
+  .VPNavBar.has-sidebar .content {
+    padding-left: 250px !important;
+    padding-right: 20px !important;
+  }
+
+  .VPNavBar .divider {
+    padding-left: 250px !important;
+  }
 }
 
 @media (min-width: 960px) {
-    .VPDoc {
-        padding: 32px 32px 0 10 !important;
-    }
+  .VPDoc {
+    padding: 32px 32px 0 10 !important;
+  }
 
-    .VPContent.has-sidebar {
-        padding-left: 255px !important;
-    }
+  .VPContent.has-sidebar {
+    padding-left: 255px !important;
+  }
 }
 
 .VPNavBar {
-    padding-right: 0px !important;
+  padding-right: 0px !important;
 }
 
 .VPDoc.has-aside .content-container {
-    max-width: 100% !important;
+  max-width: 100% !important;
 }
 
 .aside {
-    max-width: 200px !important;
-    padding-left: 0 !important;
+  max-width: 200px !important;
+  padding-left: 0 !important;
 }
 
 /* This one does the right menu */
 
 .VPDocOutlineItem li {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    max-width: 200px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 200px;
 }
 
 .VPNavBar .title {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* Component: Docstring Custom Block */
+
+.jldocstring.custom-block {
+  border: 1px solid var(--vp-c-gray-2);
+  color: var(--vp-c-text-1);
+}
+
+.jldocstring.custom-block summary {
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  margin: 0 0 8px;
 }