Use pst page-toc (#313)

* Use pst page-toc

See src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html

* Feedback from @stefanv

* Cleanup

Author: jarrodmillman

assets/theme-css/dark-mode.css

@@ -41,12 +41,4 @@
     background: var(--colorBlockBackground);
     color: var(--colorText);
   }
-
-  /* The .shortcuts-title "list-bulleted.svg" file is black on
-   transparent background, so we use a CSS filter to invert its color
-   in dark mode. */
-  .shortcuts-title img {
-    filter: invert(1);
-    opacity: 0.75;
-  }
 }

assets/theme-css/shortcuts.css

@@ -7,17 +7,6 @@
   margin: 75px 15px;
 }
 
-.shortcuts-title {
-  font-size: 1.1rem;
-  opacity: 0.75;
-}
-
-.shortcuts-title img {
-  padding-right: 0.75rem;
-  opacity: 0.5;
-  vertical-align: middle;
-}
-
 #shortcuts {
   margin-top: 10px;
 }

layouts/partials/section/section.html

@@ -1,6 +1,6 @@
 <section class="content-padding flex-row">
 <div class="shortcuts-container">
-  <div class="shortcuts-title"><img src="/images/icons/list-bulleted.svg"/>On this page</div>
+  <div><i class="fa-solid fa-list"></i> On this page</div>
   <div id="shortcuts"></div>
 </div>
 <div class="content-container">

layouts/partials/single/content.html

@@ -1,6 +1,6 @@
 <section class="content-padding flex-row">
     <div class="shortcuts-container">
-        <div class="shortcuts-title"><img src="/images/icons/list-bulleted.svg"/>On this page</div>
+	<div><i class="fa-solid fa-list"></i> On this page</div>
         <div id="shortcuts"></div>
     </div>
     <div class="content-container">