added some writeup about paper

Author: abhaypuri98

index.html

@@ -263,6 +263,43 @@ body {
     color: var(--abstract-text-color);
 }
 
+/* Enhanced styling for bold text in dark mode - making it more visible */
+[data-theme="dark"] strong,
+[data-theme="dark"] b {
+    color: #78b9ff !important; /* Lighter, more vibrant blue */
+    font-weight: 600;
+    background-color: rgba(50, 115, 220, 0.15); /* Subtle highlight background */
+    padding: 0 4px;
+    border-radius: 3px;
+    display: inline-block; /* Ensure proper display */
+    text-shadow: 0 0 1px rgba(120, 185, 255, 0.3); /* Add slight text shadow for better visibility */
+    position: relative; /* For z-index positioning */
+    z-index: 2; /* Ensure text appears above backgrounds */
+}
+
+/* Special styling for bold text in specific contexts */
+[data-theme="dark"] td strong,
+[data-theme="dark"] th strong,
+[data-theme="dark"] li strong,
+[data-theme="dark"] h1 strong,
+[data-theme="dark"] h2 strong,
+[data-theme="dark"] h3 strong,
+[data-theme="dark"] h4 strong,
+[data-theme="dark"] h5 strong,
+[data-theme="dark"] h6 strong,
+[data-theme="dark"] .tldr-box strong,
+[data-theme="dark"] p strong,
+[data-theme="dark"] .abstract-text strong {
+    color: #78b9ff !important;
+    background-color: rgba(50, 115, 220, 0.15);
+    padding: 0 4px;
+    border-radius: 3px;
+    display: inline-block;
+    position: relative;
+    z-index: 2;
+    text-shadow: 0 0 1px rgba(120, 185, 255, 0.3);
+}
+
 /* Override for card text gradient */
 [data-theme="dark"] .expandable-card:not(.expanded) .card-text-container:after {
     background: var(--expand-gradient) !important;
@@ -309,4 +346,55 @@ figcaption {
 .theme-toggle i {
     font-size: 20px;
     color: var(--text-color);
+}
+
+/* Enhanced aesthetics for dark mode elements */
+[data-theme="dark"] .section {
+    background-color: #1a1a1a !important; /* Slightly darker for better contrast */
+    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtler border */
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Enhanced shadow */
+    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+}
+
+[data-theme="dark"] .section:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Make titles more vibrant in dark mode */
+[data-theme="dark"] h2.title {
+    background: linear-gradient(90deg, #4e8cff, #7a97ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600 !important;
+    letter-spacing: -0.02em;
+    text-shadow: 0 2px 10px rgba(78, 140, 255, 0.2);
+}
+
+/* Add subtle animation to buttons in dark mode */
+[data-theme="dark"] .external-link.button {
+    transition: all 0.3s ease !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+[data-theme="dark"] .external-link.button:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22) !important;
+    background: linear-gradient(135deg, #2b2b2b, #383838) !important;
+}
+
+/* Improve figures in dark mode */
+[data-theme="dark"] figure {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+[data-theme="dark"] figure:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
+}
+
+/* Smoother dark mode background */
+[data-theme="dark"] body {
+    background: linear-gradient(135deg, #121212, #1a1a1a) !important;
 }

static/css/dark-mode.css

@@ -4,10 +4,19 @@ function setTheme(themeName) {
     localStorage.setItem('theme', themeName);
     updateThemeIcon(themeName);
 
+    // Apply theme class to body
+    if (themeName === 'dark') {
+        document.body.classList.add('dark-mode');
+        document.body.classList.remove('light-mode');
+    } else {
+        document.body.classList.add('light-mode');
+        document.body.classList.remove('dark-mode');
+    }
+
     // Force refresh of critical styles by applying inline styles
     if (themeName === 'dark') {
         document.body.style.backgroundColor = '#121212';
-        document.body.style.backgroundImage = 'none';
+        document.body.style.backgroundImage = 'linear-gradient(135deg, #121212, #1a1a1a)';
         document.body.style.color = '#e0e0e0';
 
         // Apply additional dark mode styles to elements that might have inline styles
@@ -21,6 +30,9 @@ function setTheme(themeName) {
         // Apply specific light mode styles to override any persistent dark mode styles
         applyLightModeStyles();
     }
+    
+    // Force a repaint/reflow to ensure all styling is applied correctly
+    void document.body.offsetHeight;
 }
 
 // Function to apply dark mode styles directly to elements
@@ -69,6 +81,41 @@ function applyDarkModeStyles() {
         text.style.color = '#d0d0d0';
     });
 
+    // Bold text styling for dark mode
+    document.querySelectorAll('strong, b').forEach(boldText => {
+        boldText.style.color = '#78b9ff';
+        boldText.style.fontWeight = '600';
+        boldText.style.backgroundColor = 'rgba(50, 115, 220, 0.15)';
+        boldText.style.padding = '0 4px';
+        boldText.style.borderRadius = '3px';
+        boldText.style.display = 'inline-block';
+        boldText.style.position = 'relative';
+        boldText.style.zIndex = '2';
+        boldText.style.textShadow = '0 0 1px rgba(120, 185, 255, 0.3)';
+    });
+
+    // Special handling for sections that might contain bold text
+    document.querySelectorAll('.section p, .abstract-text').forEach(element => {
+        // Force a repaint/reflow to ensure all styling is applied
+        const display = element.style.display;
+        element.style.display = 'none';
+        void element.offsetHeight; // Trigger reflow
+        element.style.display = display;
+        
+        // Get all bold elements and ensure they have correct styling
+        element.querySelectorAll('strong, b').forEach(boldText => {
+            boldText.style.color = '#78b9ff';
+            boldText.style.fontWeight = '600';
+            boldText.style.backgroundColor = 'rgba(50, 115, 220, 0.15)';
+            boldText.style.padding = '0 4px';
+            boldText.style.borderRadius = '3px';
+            boldText.style.display = 'inline-block';
+            boldText.style.position = 'relative';
+            boldText.style.zIndex = '2';
+            boldText.style.textShadow = '0 0 1px rgba(120, 185, 255, 0.3)';
+        });
+    });
+
     // TL;DR box
     document.querySelectorAll('.tldr-box').forEach(box => {
         box.style.backgroundColor = '#252525';
@@ -142,6 +189,15 @@ function applyLightModeStyles() {
         text.style.color = '#444444';
     });
 
+    // Reset bold text styling for light mode
+    document.querySelectorAll('strong, b').forEach(boldText => {
+        boldText.style.color = '#333333';
+        boldText.style.fontWeight = '700';
+        boldText.style.backgroundColor = 'transparent';
+        boldText.style.padding = '0';
+        boldText.style.borderRadius = '0';
+    });
+
     // TL;DR box
     document.querySelectorAll('.tldr-box').forEach(box => {
         box.style.backgroundColor = '#f9f9f9';