Table of Contents SEO Updates - Undo Revert

express/blocks/how-to-steps/how-to-steps.js

@@ -24,7 +24,7 @@
       shareIcon.addEventListener('click', () => {
         if (templateHref) {
           navigator.clipboard.writeText(templateHref).catch((err) => {
             console.error('Failed to copy template-x link: ', err);
           });
         }
       });
@@ -67,6 +67,7 @@
   if (isStepNumberDefined) {
     numberStepStart = +rows[0].querySelectorAll('div')[1].innerText.trim();
     rows[0].remove();
+    rows.splice(0, 1);
   }
 
   const narrowVariant = block?.classList.contains('narrow');

express/features/table-of-contents-seo/table-of-contents-seo.css

@@ -1,13 +1,13 @@
 .table-of-contents-seo {
   position: fixed;
-  z-index: 25;
+  z-index: 1;
   top: 50%;
   transform: translateY(-50%);
   left: 0;
   background-color: #f4f4f4;
   padding-top: 10px;
   padding-bottom: 10px;
-  width: 300px;
+  width: 200px;
   white-space: nowrap;
   text-align: left; 
   border-radius: 0 12px 12px 0;
@@ -18,6 +18,7 @@
 .toc-title {
   font-weight: bold;
   margin-bottom: 10px; 
+  color: var(--color-info-accent);
 }
 
 .toc-entry {
@@ -26,7 +27,6 @@
   display: flex;
   align-items: flex-start;
   padding-left: 14px;
-  padding-right: 50px;
   text-align: left;
   white-space: normal;
   overflow-wrap: break-word;
@@ -38,6 +38,7 @@
 
 .toc .toc-entry a {
   color: var(--color-info-accent);
+  text-decoration: none;
 }
 
 .toc.mobile-toc .toc-entry .toc-normal {
@@ -50,10 +51,11 @@
 
 .toc-entry .vertical-line {
   width: 4px;
-  height: 100%;
+  height: 20px;
   background-color: transparent;
   position: absolute;
   left: 0;
+  top: 0;
 }
 
 .toc-entry.active .vertical-line {
@@ -64,13 +66,16 @@
   margin-right: 5px;
   flex-shrink: 0;
   align-self: flex-start;
+  color: var(--color-info-accent);
+  flex-shrink: 0;
 }
 
 .toc-title,
 .toc-entry {
   display: flex;
   align-items: center;
   padding-left: 20px; 
+  padding-right: 20px;
 }
 
 .toc-title > div,
@@ -84,11 +89,6 @@
   margin-left: -6px;
 }
 
-.toc-entry .toc-number {
-  flex-shrink: 0;
-  font-weight: bold;
-}
-
 .number-circle {
   background-color: #E0E2FD;
   color: black;
@@ -113,14 +113,67 @@
   transform: translate(-50%, -50%);
 }
 
-.mobile-toc {
-  color: var(--color-info-accent);
+main .section.section-wrapper .mobile-toc {
+  border: 1px solid #D0D0D0;
+  background-color: #f8f8f8;
+  margin: 0;
+  max-width: none;
+  z-index: 2;
+}
+
+.mobile-toc .toc-title {
+  height: 36px;
+  margin-bottom: 0;
+}
+
+.mobile-toc .toc-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
   padding: 10px;
-  margin-bottom: 15px;
-  background-color: #f4f4f4;
-  border-radius: 16px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05), 0 -6px 12px rgba(0, 0, 0, 0.05), 
-            6px 0 12px rgba(0, 0, 0, 0.05), -6px 0 12px rgba(0, 0, 0, 0.05);
+}
+
+.mobile-toc .toc-content {
+  display: none;
+}
+
+.mobile-toc .toc-content.open {
+  margin-top: 8px;
+  display: block;
+  padding-left: 10px;
+  padding-bottom: 10px;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.toc-chevron {
+  padding-right: 10px;
+  padding-top: 8px;
+}
+
+.toc-chevron::before {
+  border-style: solid;
+  border-width: 0.15em 0.15em 0 0;
+  content: '';
+  display: inline-block;
+  height: 0.45em;
+  left: 0.15em;
+  position: relative;
+  top: 0.15em;
+  transform: rotate(-45deg);
+  vertical-align: top;
+  width: 0.45em;
+  transition: transform 0.05s ease;
+}
+
+.toc-chevron.up:before {
+  transform: rotate(135deg);
 }
 
 @media (min-width: 600px) {