From 9a4bb347625c31492384e467fcbcb7289f8b41b7 Mon Sep 17 00:00:00 2001
From: Dan Birman <danbirman@gmail.com>
Date: Tue, 12 Sep 2023 16:16:46 -0700
Subject: [PATCH] testing adding a grid of collaborators instead of individual
 images

---
 source/about/overview.md | 51 ++++++++++++++++++++++++++--------------
 source/conf.py           |  3 +++
 source/custom.css        | 24 +++++++++++++++++++
 3 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 source/custom.css

diff --git a/source/about/overview.md b/source/about/overview.md
index d4d1118..229c4d6 100644
--- a/source/about/overview.md
+++ b/source/about/overview.md
@@ -47,23 +47,40 @@ Selina is piloting new 2-photon integrations in Urchin.
 
 ### Collaborators
 
-<image src="../_static/people/mayo.jpg" alt="Mayo Faulkner" position="left" style="border-radius: 8px;width:20vh">
-
-**[Mayo Faulkner, PhD](https://uk.linkedin.com/in/mayo-faulkner-592a8387)**
-
-User Experience Engineer - International Brain Laboratory
-
-<image src="../_static/people/cyrille.jpg" alt="Cyrille Rossant" position="left" style="border-radius: 8px;width:20vh">
-
-**[Cyrille Rossant, PhD](https://cyrille.rossant.net/about/)**
-
-Scientific Programmer - International Brain Laboratory
-
-<image src="../_static/people/yoni.jpg" alt="Yoni Browning" position="left" style="border-radius: 8px;width:20vh">
-
-**[Yoni Browning, PhD](https://www.representations.space/)**
-
-Scientist - Allen Institute
+<div class="collaborator-grid">
+    <!-- first row-->
+    <div class="collaborator">
+        <img src="../_static/people/mayo.jpg" alt="Mayo Faulkner">
+        <p class="collaborator-name">Mayo Faulkner, PhD</p>
+        <p class="collaborator-position">UX Engineer - IBL</p>
+    </div>
+    <div class="collaborator">
+        <img src="../_static/people/cyrille.jpg" alt="Cyrille Rossant">
+        <p class="collaborator-name">Cyrille Rossant, PhD</p>
+        <p class="collaborator-position">Scientific Programmer - IBL</p>
+    </div>
+    <div class="collaborator">
+        <img src="../_static/people/yoni.jpg" alt="Yoni Browning">
+        <p class="collaborator-name">Yoni Browning, PhD</p>
+        <p class="collaborator-position">Scientist - Allen Institute</p>
+    </div>
+    <!-- second row-->
+    <!-- <div class="collaborator">
+        <img src="../_static/people/mayo.jpg" alt="Mayo Faulkner">
+        <p class="collaborator-name">Mayo Faulkner, PhD</p>
+        <p class="collaborator-position">UX Engineer - IBL</p>
+    </div>
+    <div class="collaborator">
+        <img src="../_static/people/cyrille.jpg" alt="Cyrille Rossant">
+        <p class="collaborator-name">Cyrille Rossant, PhD</p>
+        <p class="collaborator-position">Scientific Programmer - IBL</p>
+    </div>
+    <div class="collaborator">
+        <img src="../_static/people/yoni.jpg" alt="Collaborator 3">
+        <p class="collaborator-name">Alice Johnson</p>
+        <p class="collaborator-position">Position: Engineer</p>
+    </div> -->
+</div>
 
 *** 
 
diff --git a/source/conf.py b/source/conf.py
index 4ead4d5..4099da7 100644
--- a/source/conf.py
+++ b/source/conf.py
@@ -53,6 +53,9 @@
 #
 html_theme = 'sphinx_rtd_theme'
 
+# Include your custom CSS file
+html_css_files = ['custom.css']
+
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
diff --git a/source/custom.css b/source/custom.css
new file mode 100644
index 0000000..871abf0
--- /dev/null
+++ b/source/custom.css
@@ -0,0 +1,24 @@
+/* Center-align text */
+.collaborator {
+    text-align: center;
+}
+
+/* Style the collaborator images */
+.collaborator img {
+    max-width: 148px; /* Adjust the image width as needed */
+}
+
+/* Add some spacing between collaborators */
+.collaborator + .collaborator {
+    margin-top: 20px; /* Adjust the spacing as needed */
+}
+
+/* Style collaborator names */
+.collaborator-name {
+    font-weight: bold;
+}
+
+/* Style collaborator positions */
+.collaborator-position {
+    font-style: italic;
+}