Modernize CSS and port to Bootstrap 5

_static/custom.css

@@ -1,26 +1,75 @@
+/* Team member cards - modernized with Flexbox and accessibility */
 .team-member {
-    display: inline-block;
-    padding: 1rem;
-    margin: 0.25rem;
-    width: 7rem;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--space-md, 1rem);
+    margin: var(--space-xs, 0.25rem);
+    width: 8rem;
     text-align: center;
     vertical-align: top;
+    transition: transform var(--transition-fast, 150ms ease-in-out),
+                background-color var(--transition-fast, 150ms ease-in-out);
+    border-radius: var(--radius-md, 0.375rem);
+}
+
+.team-member:hover,
+.team-member:focus-within {
+    transform: translateY(-4px);
+    background-color: var(--bg-secondary, #f8f9fa);
 }
 
 .team-member-photo {
     display: block;
+    margin-bottom: var(--space-sm, 0.5rem);
 }
 
 .team-member-photo img {
-    width: 60px;
-    border-radius: 50%;
-    margin-bottom: 0.5rem;
+    width: 64px;
+    height: 64px;
+    border-radius: var(--radius-full, 50%);
+    object-fit: cover;
+    box-shadow: var(--shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
+    transition: box-shadow var(--transition-fast, 150ms ease-in-out);
+}
+
+.team-member:hover .team-member-photo img,
+.team-member:focus-within .team-member-photo img {
+    box-shadow: var(--shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
 }
 
 .team-member-name {
-    font-weight: bold;
+    font-weight: 600;
+    font-size: 0.9rem;
+    line-height: 1.3;
+    color: var(--text-primary, #212529);
+    word-break: break-word;
 }
 
 .team-member-handle {
     display: none;
 }
+
+/* Responsive adjustments for team members */
+@media (max-width: 575.98px) {
+    .team-member {
+        width: 7rem;
+    }
+
+    .team-member-photo img {
+        width: 56px;
+        height: 56px;
+    }
+
+    .team-member-name {
+        font-size: 0.85rem;
+    }
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+    .team-member:hover,
+    .team-member:focus-within {
+        background-color: var(--bg-secondary, #2d2d2d);
+    }
+}

_templates/navbar.html

@@ -1,12 +1,11 @@
-<li><a href="/docs/stable/user_guide/install.html">Installation</a></li>
-<li><a href="/docs/stable/auto_examples">Gallery</a></li>
-
-<li><a href="/docs/stable">Documentation</a></li>
-<li><a href="{{ pathto('community_guidelines') }}">Community</a></li>
-<li><a href="https://github.com/scikit-image/scikit-image">
-    <img src="_static/GitHub-Mark-32px.png" style="height: 15px; width: 15px;
-                                                   display: inline; float: none;
-                                                   padding-bottom: 3px;"/>
-    Source</a>
+<li class="nav-item"><a class="nav-link" href="/docs/stable/user_guide/install.html">Installation</a></li>
+<li class="nav-item"><a class="nav-link" href="/docs/stable/auto_examples">Gallery</a></li>
+<li class="nav-item"><a class="nav-link" href="/docs/stable">Documentation</a></li>
+<li class="nav-item"><a class="nav-link" href="{{ pathto('community_guidelines') }}">Community</a></li>
+<li class="nav-item">
+    <a class="nav-link" href="https://github.com/scikit-image/scikit-image">
+        <img src="_static/GitHub-Mark-32px.png" alt="GitHub" class="github-icon" loading="lazy">
+        Source
+    </a>
 </li>
 

_templates/sidebar_links.html

@@ -1,45 +1,68 @@
-<div class="well sidebar-box">
-    <ul class="nav nav-list">
-      <li>
-        <a class="reference external"
-           href="https://github.com/scikit-image/scikit-image">GitHub
+<div class="card sidebar-box">
+    <ul class="nav flex-column">
+      <li class="nav-item">
+        <a class="nav-link"
+           href="https://github.com/scikit-image/scikit-image"
+           aria-label="GitHub repository">
+          <strong>GitHub</strong>
           <span class="sidebar-subtitle">source &amp; bug reports</span>
         </a>
       </li>
-      <li>
-        <a class="reference external"
-           href="https://scikit-image.org/docs/stable/development/contribute.html">Contribute
-          <span class="sidebar-subtitle">get involved</span></a></li>
+      <li class="nav-item">
+        <a class="nav-link"
+           href="https://scikit-image.org/docs/stable/development/contribute.html"
+           aria-label="Contribution guide">
+          <strong>Contribute</strong>
+          <span class="sidebar-subtitle">get involved</span>
         </a>
       </li>
-      <li>
-        <a class="reference external"
-           href="https://forum.image.sc/tags/scikit-image">Get Help
+      <li class="nav-item">
+        <a class="nav-link"
+           href="https://forum.image.sc/tags/scikit-image"
+           aria-label="Community forum">
+          <strong>Get Help</strong>
           <span class="sidebar-subtitle">advice &amp; community</span>
         </a>
       </li>
-      <li>
-        <a class="reference external"
-           href="https://discuss.scientific-python.org/c/contributor/skimage">Discuss
+      <li class="nav-item">
+        <a class="nav-link"
+           href="https://discuss.scientific-python.org/c/contributor/skimage"
+           aria-label="Contributor discussions">
+          <strong>Discuss</strong>
           <span class="sidebar-subtitle">contributor talk</span>
         </a>
       </li>
-      <li>
-        <a class="reference external"
-           href="https://stackoverflow.com/questions/tagged/scikit-image">StackOverflow
+      <li class="nav-item">
+        <a class="nav-link"
+           href="https://stackoverflow.com/questions/tagged/scikit-image"
+           aria-label="Stack Overflow questions">
+          <strong>StackOverflow</strong>
           <span class="sidebar-subtitle">coding help</span>
         </a>
       </li>
     </ul>
 </div>
 
-<div style="padding-top: 0.5rem; padding-bottom: 2rem;">
-  <a href="https://opencollective.com/scikit-image" target="_blank">
-    <img src="https://opencollective.com/scikit-image/donate/button@2x.png?color=white" width=300 />
+<div class="text-center py-3">
+  <a href="https://opencollective.com/scikit-image"
+     target="_blank"
+     rel="noopener noreferrer"
+     aria-label="Donate via Open Collective">
+    <img src="https://opencollective.com/scikit-image/donate/button@2x.png?color=white"
+         alt="Donate button"
+         width="300"
+         loading="lazy">
   </a>
 </div>
 
-<div style="text-align: center;" width="100%">
-  <iframe src="https://ghbtns.com/github-btn.html?user=scikit-image&repo=scikit-image&type=star&count=true"
-    frameborder="0" scrolling="0" width="110" display="inline-block" height="20"></iframe>
+<div class="text-center py-2">
+  <a href="https://github.com/scikit-image/scikit-image"
+     target="_blank"
+     rel="noopener noreferrer"
+     aria-label="Star scikit-image on GitHub">
+    <img src="https://img.shields.io/github/stars/scikit-image/scikit-image?style=for-the-badge&logo=github&color=CE5C00&labelColor=CE5C00&logoColor=white"
+         alt="GitHub stars"
+         height="35"
+         loading="lazy">
+  </a>
 </div>

_templates/sidebar_versions.html

@@ -1,56 +1,75 @@
-<script src="https://unpkg.com/github-api/dist/GitHub.bundle.min.js"></script>
 <script type="module">
  import { Octokit } from "https://esm.sh/octokit";
 
  const octokit = new Octokit();
+ const month_names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
  function notRc(release) {
    return !release.tag_name.includes('rc');
  }
 
- const releases = await octokit.rest.repos.listReleases({
-   owner: 'scikit-image',
-   repo: 'scikit-image',
-   per_page: 5,
-   page: 1
- });
+ try {
+   const releases = await octokit.rest.repos.listReleases({
+     owner: 'scikit-image',
+     repo: 'scikit-image',
+     per_page: 5,
+     page: 1
+   });
 
- const month_names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+   const release = releases.data.filter(notRc)[0];
+   if (release) {
+     const tag = release.tag_name;
+     const stable_version = tag.slice(1);
 
- let release = releases.data.filter(notRc)[0];
- let tag = release.tag_name;
- let stable_version = tag.slice(1);
+     const date = release.published_at;
+     const year = date.substring(0, 4);
+     const month = date.substring(5, 7);
 
- let date = release.published_at;
- let year = date.substring(0, 4);
- let month = date.substring(5, 7);
- let day = date.substring(8, 10);
+     document.getElementById('stable-version').textContent =
+       stable_version + " - " + month_names[parseInt(month)-1] + " " + year;
 
- $('#stable-version').html(
-   stable_version + " - " + month_names[parseInt(month)-1] + " " + year
- );
- var stable_version_majmin = stable_version.split(".").slice(0,2).join(".");
- var release_notes_url = $('#release-notes').attr('href') + "/release_" + stable_version_majmin + ".rst";
- $('#release-notes').attr('href', release_notes_url);
+     const stable_version_majmin = stable_version.split(".").slice(0,2).join(".");
+     const releaseNotesLink = document.getElementById('release-notes');
+     const release_notes_url = releaseNotesLink.getAttribute('href') + "/release_" + stable_version_majmin + ".rst";
+     releaseNotesLink.setAttribute('href', release_notes_url);
 
- var dev_version = stable_version.split(".").map(Number);
- dev_version[1] += 1;
- dev_version = dev_version.slice(0, 2).join(".");
+     let dev_version = stable_version.split(".").map(Number);
+     dev_version[1] += 1;
+     dev_version = dev_version.slice(0, 2).join(".");
 
- $('#dev-version').html("pre-" + dev_version);
+     document.getElementById('dev-version').textContent = "pre-" + dev_version;
+   } else {
+     console.warn('No non-RC releases found');
+   }
+ } catch (error) {
+   console.error('Failed to fetch release information:', error);
+ }
 </script>
 
 
-<div class="well">
-    <strong>Stable</strong>
-    (<a href="https://github.com/scikit-image/scikit-image/tree/main/doc/source/release_notes" id="release-notes">release notes</a>)
-    <p id="stable-version"/>x.y.z</p>
+<div class="card sidebar-box">
+    <div class="card-body">
+        <strong>Stable</strong>
+        (<a href="https://github.com/scikit-image/scikit-image/tree/main/doc/source/release_notes" id="release-notes">release notes</a>)
+        <p id="stable-version">x.y.z</p>
 
-    <a class="btn btn-small" href="https://scikit-image.org/docs/stable/user_guide/install.html#installation-via-pip-and-conda"><i class="icon-download"></i> Download</a>
-    <strong><br></strong>
+        <a class="btn btn-sm btn-primary" href="https://scikit-image.org/docs/stable/user_guide/install.html#installation-via-pip-and-conda">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+            </svg>
+            Download
+        </a>
 
-    <br/>
-    <strong>Development</strong>
-    <p id="dev-version">pre-x.y.z</p>
-    <a class="btn btn-small" href="https://scikit-image.org/docs/stable/user_guide/install.html#installing-scikit-image-for-contributors"><i class="icon-download"></i> Download</a>
+        <br/><br/>
+        <strong>Development</strong>
+        <p id="dev-version">pre-x.y.z</p>
+        <a class="btn btn-sm btn-outline-primary" href="https://scikit-image.org/docs/stable/user_guide/install.html#installing-scikit-image-for-contributors">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+            </svg>
+            Download
+        </a>
+    </div>
 </div>