Vs branch 11

News.md

@@ -1,5 +1,9 @@
 ## 2025
 
+### March 
+
+- Join us for a hybrid online+offline course: [High-Fidelity Simulations Using Basilisk C](/teaching/2025-Basilisk101-Madrid) in Madrid, Spain (March 10-13). Learn some computational (colorful) fluid dynamics with hands-on coding sessions.
+
 ### February
 
 - [<strong>Sanjay, V.</strong>, Zhang, B., Lv, C., & Lohse, D. J. Fluid Mech., 1004, A6 (2025) selected as the cover article.](/research#14)
@@ -46,4 +50,4 @@
 
 ### May
 
-<strong>Vatsal Sanjay</strong> awarded the <a href="https://www.tudelft.nl/2024/jm-burgerscentrum/kivi-hoogendoorn-fluid-mechanics-award-2023" style="text-decoration: none; color: #0056b3; font-weight: 500;">KIVI Hoogendoorn Fluid Mechanics Award 2023</a> for his PhD thesis "Viscous Free-Surface Flows". The award ceremony will take place at the Burgers Symposium on 29–30 May 2024 in Lunteren.
+<strong>Vatsal Sanjay</strong> awarded the <a href="https://www.tudelft.nl/2024/jm-burgerscentrum/kivi-hoogendoorn-fluid-mechanics-award-2023" style="text-decoration: none; color: #0056b3; font-weight: 500;">KIVI Hoogendoorn Fluid Mechanics Award 2023</a> for his PhD thesis "Viscous Free-Surface Flows". The award ceremony took place at the Burgers Symposium on 29–30 May 2024 in Lunteren.

_layouts/research.html

@@ -52,22 +52,39 @@
       margin-bottom: 0.5em;
     }
     /* Tag styling */
-    tags span {
+    tags span, tags a.tag-link {
       display: inline-block;
       padding: 2px 8px;
       margin: 2px;
       border-radius: 12px;
       background-color: #f0f0f0;
       cursor: pointer;
       transition: background-color 0.2s ease;
+      text-decoration: none;
+      color: inherit;
     }
-    tags span:hover {
+    tags span:hover, tags a.tag-link:hover {
       background-color: #e0e0e0;
     }
-    tags span.active {
+    tags span.active, tags a.tag-link.active {
       background-color: #007bff;
       color: white;
     }
+    /* Style for filter notification */
+    .filter-note {
+      margin: 1rem 0;
+      padding: 0.5rem 1rem;
+      background-color: rgba(0,123,255,0.1);
+      border-radius: 4px;
+    }
+    .filter-note a {
+      margin-left: 0.5rem;
+      color: #007bff;
+      text-decoration: none;
+    }
+    .filter-note a:hover {
+      text-decoration: underline;
+    }
     .paper-container.hidden {
       display: none;
     }
@@ -564,7 +581,7 @@ <h3>Contents</h3>
           });
         };
 
-        // Add click handlers to tags
+        // Restore click handlers for client-side filtering
         allTags.forEach(tag => {
           tag.addEventListener('click', () => {
             const tagText = tag.textContent;
@@ -600,6 +617,18 @@ <h3>Contents</h3>
           });
         });
 
+        // Handle filter note if present (for pre-built pages)
+        const filterNote = document.querySelector('.filter-note');
+        if (filterNote) {
+          const clearFilterLink = filterNote.querySelector('a');
+          if (clearFilterLink) {
+            clearFilterLink.addEventListener('click', (e) => {
+              e.preventDefault();
+              window.location.href = '/research/';
+            });
+          }
+        }
+
         // Apply filter from URL if present
         if (tagFromUrl) {
           const matchingTag = Array.from(allTags).find(tag => tag.textContent === tagFromUrl);

assets/css/research.css

@@ -30,41 +30,66 @@
   padding: 8rem 0 6rem 0;
   background-color: var(--research-bg-color);
   position: relative;
+  transition: background-color 0.1s linear;
+  box-shadow: none;
 }
 
-/* Improve bold text visibility in dark mode */
+/* Improve bold text visibility across all modes */
+.research-content strong,
+.research-content b {
+  font-weight: 700;
+  transition: none;
+}
+
+/* Dark mode color changes only */
 [data-theme="dark"] .research-content strong,
 [data-theme="dark"] .research-content b {
   color: #ffffff;
-  font-weight: 700;
   text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
 }
 
-/* Add more solid background in dark mode */
+/* Add more solid background in dark mode - color only */
 [data-theme="dark"] .s-research {
   background-color: #1E1E25;
   box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
 }
 
-/* Improve blockquote visibility in dark mode */
-[data-theme="dark"] .research-content blockquote {
-  background-color: #272736;
-  border-left: 4px solid #4d8dff;
+/* Blockquote styling consistent across themes */
+.research-content blockquote {
+  background-color: var(--research-paper-bg);
+  border-left: 4px solid var(--research-subheading-color);
   padding: 1rem;
   margin: 1.5rem 0;
-  color: #ffffff;
+  color: var(--research-text-color);
   border-radius: 0 4px 4px 0;
+  transition: background-color 0.15s linear;
 }
 
-/* Improve list item visibility in dark mode */
-[data-theme="dark"] .research-content ul,
-[data-theme="dark"] .research-content ol {
+/* Dark mode color changes only */
+[data-theme="dark"] .research-content blockquote {
+  background-color: #272736;
+  border-left-color: #4d8dff;
   color: #ffffff;
 }
 
+/* List item styling consistent across themes */
+.research-content ul,
+.research-content ol {
+  color: var(--research-text-color);
+  transition: none;
+}
+
+.research-content li {
+  color: var(--research-text-color);
+  margin-bottom: 0.5rem;
+  transition: none;
+}
+
+/* Dark mode color changes only */
+[data-theme="dark"] .research-content ul,
+[data-theme="dark"] .research-content ol,
 [data-theme="dark"] .research-content li {
   color: #ffffff;
-  margin-bottom: 0.5rem;
 }
 
 @media screen and (max-width: 800px) {
@@ -86,12 +111,17 @@
 }
 
 /* Improve content visibility in dark mode */
-[data-theme="dark"] .research-content {
-  background-color: #272736;
+.research-content {
   border-radius: 8px;
   padding: 2rem;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(80, 80, 120, 0.2);
+  box-shadow: 0 4px 20px var(--research-shadow);
+  border: 1px solid transparent;
+  transition: background-color 0.15s linear;
+}
+
+[data-theme="dark"] .research-content {
+  background-color: #272736;
+  border-color: rgba(80, 80, 120, 0.2);
 }
 
 @media screen and (max-width: 600px) {
@@ -108,8 +138,10 @@
   text-align: center;
   background: linear-gradient(45deg, #0085ff, var(--research-heading-color));
   -webkit-background-clip: text;
+  background-clip: text; /* Standard property for compatibility */
   -webkit-text-fill-color: transparent;
   animation: fadeIn 0.8s ease-out;
+  transition: none;
 }
 
 @media screen and (max-width: 600px) {
@@ -164,12 +196,15 @@
   padding: 1.5rem;
   margin: 2rem 0;
   border-radius: 8px;
-  transition: all 0.3s ease;
+  transition: transform 0.2s ease;
+  /* Only keep transform transition for hover effect, remove theme-switching transitions */
   border: 1px solid transparent;
   background-color: transparent;
   scroll-margin-top: 120px;
   position: relative;
   color: var(--research-text-color);
+  /* Add consistent box-shadow with 0 opacity by default */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
 }
 
 .paper-container:hover {
@@ -179,6 +214,12 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
+[data-theme="dark"] .paper-container:hover {
+  background-color: rgba(70, 140, 255, 0.1);
+  border-color: rgba(70, 140, 255, 0.2);
+  /* keep transform and box-shadow the same to avoid layout shifts */
+}
+
 .paper-container h3 {
   margin-top: 0;
 }