Move shortcuts to right side, as in PDST

Author: stefanv

assets/js/shortcuts.js

@@ -153,7 +153,9 @@ function setupShortcuts(shortcutDepth = 2) {
 
   // Removes the shortcuts container if no shortcuts exist.
   // Also removes the 'Get Help' link.
-  const shortcuts = Array.from(document.querySelectorAll("#shortcuts div"));
+  const shortcuts = Array.from(
+    document.querySelectorAll("#shortcuts div:not(#shortcuts-header)"),
+  );
   if (shortcuts.length == 0) {
     const shortcutsContainer = document.getElementById("shortcuts-container");
     if (shortcutsContainer) {

assets/theme-css/shortcuts.css

@@ -1,16 +1,21 @@
 #shortcuts-container {
   position: sticky;
   align-self: flex-start;
-  top: 6rem;
+  margin-top: 3rem;
+  top: 9rem; /* top + 3rem */
   width: 100%;
   max-width: 150px;
-  margin: 75px 15px;
 }
 
 #shortcuts {
   margin-top: 10px;
 }
 
+#shortcuts-header {
+  padding-left: calc(1rem + 2px);
+  padding-bottom: 0.25rem;
+}
+
 #shortcuts > div:not(.active) {
   margin-left: 2px;
   border-left: 1px solid var(--pst-color-text-base);

layouts/partials/single/content.html

@@ -1,21 +1,21 @@
 <section class="content-padding flex-row">
-    <div id="shortcuts-container">
-      <div><i class="fa-solid fa-list"></i> On this page</div>
-        <div id="shortcuts"></div>
+  <div class="content-container">
+    <div class="columns">
+      <div class="column is-centered-tablet-portrait">
+        <h1>{{ .Title }}</h1>
+      </div>
     </div>
-    <div class="content-container">
-        <div class="columns">
-            <div class="column is-centered-tablet-portrait">
-                <h1>{{ .Title }}</h1>
-            </div>
-        </div>
-        {{ with partial "post_meta.html" . -}}
-        <div class="post-meta">{{ . }}</div>
-        {{- end }}
+    {{ with partial "post_meta.html" . -}}
+    <div class="post-meta">{{ . }}</div>
+    {{- end }}
 
-        <div class="post-content">
-          {{ .Content }}
-        </div>
+    <div class="post-content">
+        {{ .Content }}
+    </div>
+  </div>
+  <div id="shortcuts-container">
+    <div id="shortcuts">
+      <div id="shortcuts-header"><i class="fa-solid fa-list"></i> On this page</div>
     </div>
   </div>
 </section>