updates

src/transformers-custom.css

@@ -75,9 +75,10 @@
 }
 
 .tenet-list li.tenet:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
-    border-color: rgba(0, 123, 255, 0.3);
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+    border-color: rgba(0, 123, 255, 0.5);
+    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
 }
 
 /* Colorful numbering system */
@@ -262,38 +263,32 @@ img {
     margin: 1.5rem 0;
 }
 
-/* Table of contents styling - Fixed sidebar like ultrascale */
-d-contents {
-    display: block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-}
-
+/* Table of contents styling - Fixed top left like ultrascale */
 @media (min-width: 1200px) {
+    d-article {
+        overflow: visible;
+    }
+    
     d-contents {
-        position: fixed !important;
-        top: 0 !important;
-        right: 0 !important;
-        width: 280px !important;
-        height: 100vh !important;
+        position: sticky !important;
+        top: 10px !important;
+        align-self: start !important;
         background: white !important;
-        border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
-        padding: 2rem 1.5rem !important;
+        grid-column-start: 1 !important;
+        grid-column-end: 4 !important;
+        grid-row: auto / span 6 !important;
+        justify-self: end !important;
+        margin-top: 0em !important;
+        padding-right: 3em !important;
+        padding-left: 2em !important;
         overflow-y: auto !important;
-        z-index: 2000 !important;
-        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1) !important;
+        height: calc(100vh - 40px) !important;
+        scrollbar-width: none !important;
+        transition: max-height 0.3s ease-out !important;
+        z-index: -100 !important;
         display: block !important;
         visibility: visible !important;
-    }
-    
-    /* Add margin to main content to avoid overlap */
-    d-article {
-        margin-right: 300px !important;
-    }
-    
-    d-contents nav {
-        position: sticky;
-        top: 2rem;
+        border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
     }
 }
 
@@ -442,11 +437,31 @@ d-contents nav a[title]:hover:before {
     }
 }
 
-/* Improve code syntax highlighting */
-.hljs {
+/* Improve code syntax highlighting with Prism */
+pre[class*="language-"] {
     background: #f8f9fa !important;
-    border-radius: 6px;
-    padding: 1rem;
+    border: 1px solid #e9ecef !important;
+    border-radius: 8px !important;
+    padding: 1.5rem !important;
+    margin: 1.5rem 0 !important;
+    overflow-x: auto !important;
+    font-size: 0.9em !important;
+    line-height: 1.5 !important;
+}
+
+code[class*="language-"] {
+    background: none !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace !important;
+    color: #383a42 !important;
+}
+
+/* Inline code */
+p code, li code {
+    background: #f1f3f4 !important;
+    padding: 0.2em 0.4em !important;
+    border-radius: 3px !important;
+    font-size: 0.9em !important;
+    color: #d73a49 !important;
 }
 
 /* Distill article improvements */

webpack.config.js

@@ -185,11 +185,30 @@ module.exports = {
                             }
                         }
                         
+                        // Initialize Prism syntax highlighting
+                        function initializeSyntaxHighlighting() {
+                            if (typeof Prism !== 'undefined') {
+                                Prism.highlightAll();
+                            }
+                        }
+                        
                         // Try multiple times to ensure it runs after distill.js
-                        document.addEventListener('DOMContentLoaded', initializeTOC);
-                        setTimeout(initializeTOC, 100);
-                        setTimeout(initializeTOC, 500);
-                        setTimeout(initializeTOC, 1000);
+                        document.addEventListener('DOMContentLoaded', function() {
+                            initializeTOC();
+                            initializeSyntaxHighlighting();
+                        });
+                        setTimeout(function() {
+                            initializeTOC();
+                            initializeSyntaxHighlighting();
+                        }, 100);
+                        setTimeout(function() {
+                            initializeTOC();
+                            initializeSyntaxHighlighting();
+                        }, 500);
+                        setTimeout(function() {
+                            initializeTOC();
+                            initializeSyntaxHighlighting();
+                        }, 1000);
                         </script>`;
                         
                         // Create full HTML document with distill template
@@ -198,14 +217,14 @@ module.exports = {
 <head>
     <script src="distill.bundle.js" type="module" fetchpriority="high" blocking></script>
     <script src="main.bundle.js" type="module" fetchpriority="low" defer></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf8">
     <title>Transformers Feature Showcase</title>
     <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
 </head>
 <body>
     <d-front-matter>