Fix banner (add iamges to the left)

RSTZZZ · RSTZZZ · commit d86c4f711ea5 · 2025-07-21T19:35:27.000Z
diff --git a/_includes/page__hero_particles.html b/_includes/page__hero_particles.html
@@ -1,7 +1,28 @@
+{% if page.header.overlay_color or page.header.overlay_image %}
+{% capture overlay_style %}
+{% if page.header.overlay_image %}
+background-image: {% if page.header.overlay_filter %}
+{{ page.header.overlay_filter }},
+{% endif %}url('{{
+page.header.overlay_image | relative_url }}');
+background-position: center;
+background-size: cover;
+{% if page.header.overlay_css %}
+{{ page.header.overlay_css }}
+{% endif %}
+{% endif %}
+{% if page.header.overlay_color %}
+background-color: {{ page.header.overlay_color }};
+{% endif %}
+{% endcapture %}
+{% endif %}
+
 <div class="page__hero--overlay">
     <div id="particles-js"></div>
 
     <div class="wrapper">
+        <div class="page_overlay_image" style="{{ overlay_style | strip }}">
+        </div>
         <div class="page__title-container">
             {% if page.title %}
             <h1 class="page__title" itemprop="headline">
diff --git a/_pages/about.md b/_pages/about.md
@@ -2,7 +2,8 @@
 title: About the Lab
 layout: splash_v2
 header:
-    overlay_image: /assets/images/trottier.webp
+    overlay_image: /assets/images/logo/logo.png
+    overlay_css: "background-size&#58; contain; background-repeat&#58; no-repeat;"
 excerpt: "Showcasing our tools and resources that bridge research innovations with real-world applications"
 
 taxonomy: About the Lab
diff --git a/_pages/home.md b/_pages/home.md
@@ -3,15 +3,8 @@ permalink: /
 title: Complex Data Lab
 layout: splash
 header:
-    overlay_image: /assets/images/trottier.webp
-    actions:
-        - label: "GitHub"
-          url: "https://github.com/ComplexData-MILA"
-        - label: "Twitter"
-          url: "https://x.com/complexDataLab"
-        - label: "LinkedIn"
-          url: "https://www.linkedin.com/company/complex-data-lab-mcgill-mila"
-
+    overlay_image: /assets/images/logo/logo.png
+    overlay_css: "background-size&#58; contain; background-repeat&#58; no-repeat;"
 excerpt: "A research group focusing on developing techniques for analyzing complex data from online societies, with applications to enhance the health and safety of online spaces."
 
 row_research:
diff --git a/_pages/news.md b/_pages/news.md
@@ -3,7 +3,8 @@ permalink: /news/
 title: News
 layout: splash_v2
 header:
-    overlay_image: /assets/images/trottier.webp
+    overlay_image: /assets/images/logo/logo.png
+    overlay_css: "background-size&#58; contain; background-repeat&#58; no-repeat;"
 excerpt: Latest news and annoucements
 classes:
     - no-sidebar
diff --git a/_pages/people.md b/_pages/people.md
@@ -3,7 +3,8 @@ permalink: /people/
 title: "People"
 layout: splash_v2
 header:
-    overlay_image: /assets/images/trottier.webp
+    overlay_image: /assets/images/logo/logo.png
+    overlay_css: "background-size&#58; contain; background-repeat&#58; no-repeat;"
 ---
 
 ## Faculty & Staff & Postdoc
diff --git a/_pages/publications.md b/_pages/publications.md
@@ -2,7 +2,8 @@
 title: Publications
 layout: splash_v2
 header:
-    overlay_image: /assets/images/trottier.webp
+    overlay_image: /assets/images/logo/logo.png
+    overlay_css: "background-size&#58; contain; background-repeat&#58; no-repeat;"
 excerpt: ""
 classes:
     - no-sidebar
diff --git a/_pages/teaching.md b/_pages/teaching.md
@@ -3,7 +3,8 @@ permalink: /teaching/
 title: Teaching
 layout: splash_v2
 header:
-    overlay_image: /assets/images/trottier.webp
+    overlay_image: /assets/images/logo/logo.png
+    overlay_css: "background-size&#58; contain; background-repeat&#58; no-repeat;"
 classes:
     - wide
     - no-sidebar
diff --git a/_pages/tools-and-resources.md b/_pages/tools-and-resources.md
@@ -3,7 +3,8 @@ permalink: /tools-and-resources/
 title: "Tools and Resources"
 layout: splash_v2
 header:
-    overlay_image: /assets/images/trottier.webp
+    overlay_image: /assets/images/logo/logo.png
+    overlay_css: "background-size&#58; contain; background-repeat&#58; no-repeat;"
 
 excerpt: "Showcasing our tools and resources that bridge research innovations with real-world applications"
 
diff --git a/_research_directions/online-crime.md b/_research_directions/online-crime.md
@@ -5,7 +5,7 @@ category: research-directions
 order: 2
 header:
     overlay_image: /assets/images/research_directions/online_crime.png
-    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; 40% 100%"
+    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; contain"
 excerpt: "Our team combines AI and criminology expertise to develop ethical, human-centered tools that detect and counteract sex trafficking. Driven by a commitment to responsible research, we aim to bridge technology gaps and support victims in Canada and beyond."
 one-liner: "How to analyze large online markets and build victim-centered tools for countering sex-trafficking?" 
 
diff --git a/_research_directions/online-toxicity.md b/_research_directions/online-toxicity.md
@@ -5,7 +5,7 @@ category: research-directions
 order: 4
 header:
     overlay_image: /assets/images/research_directions/online_toxicity.png
-    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; 40% 100%"
+    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; contain"
 excerpt: "Our team collaborates with game companies like Ubisoft to develop responsible, real-time, human-in-the-loop AI systems for chat toxicity detection, creating safer online gaming communities."
 one-liner: How can we build systems to foster healthier gaming communities?
 
diff --git a/_research_directions/poli-sci.md b/_research_directions/poli-sci.md
@@ -5,7 +5,7 @@ category: research-directions
 order: 3
 header:
     overlay_image: /assets/images/research_directions/poli-sci.png
-    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; 40% 100%"
+    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; contain"
 excerpt: Our team creates tools and datasets to foster a safe, open space for online public discourse. We hope to empower researchers and the public to understand and navigate today’s digital landscape.
 one-liner: How can we use AI to understand the exchange of information and ideas, and to create positive, societally beneficial information ecosystems?
 
diff --git a/_research_directions/temporal-graph-learning.md b/_research_directions/temporal-graph-learning.md
@@ -5,7 +5,7 @@ category: research-directions
 order: 1
 header:
     overlay_image: /assets/images/research_directions/temporal-graph-learning.png
-    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; 40% 100%"
+    overlay_css: "background-position&#58; center; background-repeat&#58; no-repeat; background-size&#58; contain"
 one-liner: "How can we advance machine learning methods to more effectively model and predict dynamic real-world networks and relationships within these time-evolving graphs?"
 excerpt: "Our team specializes in developing innovative models and creating realistic, robust benchmarks for temporal graphs driven by applications in recommendation systems, fraud detection, disease modeling, and more."
 
diff --git a/_sass/custom/particles.scss b/_sass/custom/particles.scss
@@ -1,11 +1,23 @@
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 .page__hero--overlay {
     position: relative;
-    height: 300px; // 
+    height: 300px;
     overflow: hidden;
     padding: 0 1em;
-    display: flex; // 
-    align-items: center; // 
-    justify-content: center; // 
+    display: flex;
+    align-items: center;
+    justify-content: center;
     animation: intro 0.3s both;
     animation-delay: 0.25s;
 
@@ -24,7 +36,7 @@
         top: 0;
         left: 0;
         width: 100%;
-        height: 100%; // ✅ fill entire container
+        height: 100%;
         z-index: 0;
         background-color: #FAF9F6 !important;
     }
@@ -34,7 +46,6 @@
         z-index: 2;
         display: grid;
         grid-template-columns: 0.25fr 0.75fr;
-        ;
         gap: 2em;
         align-items: center;
         width: 100%;
@@ -52,6 +63,11 @@
         }
     }
 
+    .page_overlay_image {
+        height: 100%;
+        min-height: 300px;
+    }
+
     .page__title-container {
         animation: fadeInUp 0.6s ease forwards;
         grid-column: 2;
diff --git a/assets/images/logo/favicon.ico b/assets/images/logo/favicon.ico
diff --git a/assets/images/logo/logo.svg b/assets/images/logo/logo.svg
