add: download button - wip

BeaMarton13 · Jul 29, 2025 · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025 · Jul 31, 2025
commit 612d756b8d9afb90b950cc079d8e054d74f775c4
diff --git a/doc/source/_static/custom.css b/doc/source/_static/custom.css
@@ -10,94 +10,85 @@
 }
 
 /* Custom CSS for colored cards */
-
-/* Base card styling (adjust padding, font sizes if needed) */
+/* Base card styling for better visual appearance */
 .sd-card {
-    border: none !important; /* Remove default border */
-    border-radius: 8px !important; /* Slightly rounded corners */
-    text-align: center; /* Center content within the card */
-    display: flex;
-    flex-direction: column;
-    justify-content: center; /* Vertically center content */
-    align-items: center; /* Horizontally center content */
-    padding: 1.5em; /* Padding inside the card */
-    min-height: 140px; /* Ensure a consistent minimum height for cards */
-    color: white; /* Default text color for all custom cards */
-    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effect */
+    border: none !important;
+    border-radius: 8px !important;
     position: relative;
+    padding: 1em; /* Adjust padding as needed */
+    color: white;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 /* Hover effect */
 .sd-card:hover {
-    transform: translateY(-5px); /* Lift card slightly */
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
-    cursor: pointer;
-    position: relative;
+    transform: translateY(-3px); /* Slightly lift card */
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
 }
 
-/* Card titles */
-.sd-card-title {
-    font-size: 1.2em; /* Larger title */
+/* Card titles inside the body */
+.sd-card-body h3, .sd-card-body strong {
+    font-size: 1.2em;
     font-weight: bold;
-    margin-bottom: 0.5em; /* Space between title and icon */
-    color: white !important; /* Ensure title color is white */
+    margin-bottom: 0.5em;
+    color: white !important;
+}
+
+/* Ensure the main content block has flexible spacing */
+.sd-card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+/* Download button container inside the card */
+.sd-card-body .download-container {
+    position: relative;
+    z-index: 10; /* A high number to make sure it's on top */
+    margin-top: auto; /* Push to the bottom */
+    text-align: right;
+}
+
+/* The actual button inside the container */
+.sd-card-body .download-button {
+    background-color: #f8f9fa;
+    color: #212529;
+    border: 1px solid #ced4da;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.download-link {
+    text-decoration: none !important;
 }
 
-/* Icon styling (for Font Awesome icons within cards) */
-.sd-card .fa-solid,
-.sd-card .fa-regular,
-.sd-card .fa-brands {
-    font-size: 3.5em; /* Large icon size */
-    margin-bottom: 0.3em; /* Space between icon and text */
-    opacity: 0.8; /* Slightly less opaque than text */
-    color: white !important; /* Ensure icon color is white */
+.download-button {
+    padding: 8px 16px;
+    background-color: #2980b9;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.3s;
+}
+
+.download-button:hover {
+    background-color: #3498db;
 }
 
+/* Colored cards (your colors are good) */
 .card-red-orange { background-color: #FF6633; }
 .card-deep-orange { background-color: #FF8C40; }
 .card-yellow-orange { background-color: #FFA500; }
-
 .card-light-green { background-color: #7ED957; }
 .card-medium-green { background-color: #70B341; }
 .card-dark-green { background-color: #4CAF50; }
-
 .card-light-blue { background-color: #409ED8; }
 .card-medium-blue { background-color: #007BFF; }
 .card-deep-blue { background-color: #0056b3; }
-
 .card-light-purple { background-color: #BF40BF; } 
 .card-medium-purple { background-color: #800080; } 
-.card-deep-purple { background-color: #4B0082; } 
-
-/* Optional: Make links within cards cover the whole card */
-.sd-card a {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-decoration: none; /* Remove underline */
-    z-index: 1; /* Ensure link is clickable */
-}
-
-.sd-card a:hover {
-    text-decoration: none; /* No underline on hover */
-}
-
-/* Ensure text is on top of the link layer */
-.sd-card .sd-card-body, .sd-card .sd-card-header, .sd-card .sd-card-footer {
-    position: relative;
-    z-index: 2;
-}
-
-/* Hide default card header/footer if not used */
-.sd-card-header, .sd-card-footer {
-    display: none;
-}
-
-/* Ensure content doesn't block clickable area */
-.sd-card-body {
-    position: relative;
-    z-index: 1;
-    pointer-events: none;
-}
+.card-deep-purple { background-color: #4B0082; } 
diff --git a/doc/source/community_detection_guide.rst b/doc/source/community_detection_guide.rst
@@ -27,8 +27,18 @@ This documentation provides an overview of the notebooks available in the commun
       :link-type: doc
       :class-card: sd-card-hover card-red-orange
       :shadow: sm
-
+      
       **Overview:** This notebook is a quick start guide to community detection in igraph. It covers the initial workflow for detecting communities in networks. (If you look for a more practical learning experience, we recommend starting with this notebook.)
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/initial_workflow.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Community Detection Algorithms
       :link: community_detection_guide/notebooks/community_detection_algorithms
@@ -38,13 +48,33 @@ This documentation provides an overview of the notebooks available in the commun
 
       **Overview:** This notebook covers various community detection algorithms available in igraph. It provides a detailed explanation of these algorithms and when to use them.
 
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/community_detection_algorithms.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
+
    .. grid-item-card::  Test Significance of Community
       :link: community_detection_guide/notebooks/test_significance_of_community
       :link-type: doc
       :class-card: sd-card-hover card-yellow-orange
       :shadow: sm   
 
       **Overview:** This notebook provides methods to test the significance of detected communities. 
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/test_significance_of_community.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Generating and Visualizing Clusters
       :link: community_detection_guide/notebooks/generating_and_visualizing_clusters
@@ -53,6 +83,16 @@ This documentation provides an overview of the notebooks available in the commun
       :shadow: sm
 
       **Overview:** This notebook provides various methods for generating and visualizing clusters in networks. It includes techniques for visualizing community structures.
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/generating_and_visualizing_clusters.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Hierarchical Clustering
       :link: community_detection_guide/notebooks/hierarchical_clustering
@@ -62,13 +102,33 @@ This documentation provides an overview of the notebooks available in the commun
 
       **Overview:** This notebook describes hierarchical clustering. It explains how to perform hierarchical clustering on networks and visualize the results.
 
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/hierarchical_clustering.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
+
    .. grid-item-card::  Modularity
       :link: community_detection_guide/notebooks/modularity
       :link-type: doc
       :class-card: sd-card-hover card-light-green
       :shadow: sm
 
       **Overview:** This notebook introduces the concept of modularity in community detection.
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/modularity.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Interactive Resolution on Sierpinski
       :link: community_detection_guide/notebooks/interactive_resolution_on_sierpinski
@@ -77,6 +137,16 @@ This documentation provides an overview of the notebooks available in the commun
       :shadow: sm
 
       **Overview:** This notebook introduces the concept of resolution parameter on the Sierpinski triangle.
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/interactive_resolution_on_sierpinski.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Consensus Clustering
       :link: community_detection_guide/notebooks/consensus_clustering
@@ -85,6 +155,16 @@ This documentation provides an overview of the notebooks available in the commun
       :shadow: sm
 
       **Overview:** This notebook introduces the method of consensus clustering by combining multiple clustering results.
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/consensus_clustering.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Membership Vector
       :link: community_detection_guide/notebooks/membership_vector
@@ -93,6 +173,16 @@ This documentation provides an overview of the notebooks available in the commun
       :shadow: sm
 
       **Overview:** This notebook introduces membership vectors in igraph.
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/membership_vector.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Vertex Clustering Object
       :link: community_detection_guide/notebooks/working_with_clusterings
@@ -101,6 +191,16 @@ This documentation provides an overview of the notebooks available in the commun
       :shadow: sm
 
       **Overview:** This notebook describes how to work with clusterings in igraph.
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/working_with_clusterings.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
    .. grid-item-card::  Helper Functions
       :link: community_detection_guide/notebooks/functions
@@ -109,6 +209,16 @@ This documentation provides an overview of the notebooks available in the commun
       :shadow: sm
 
       **Overview:** This notebook introduces all the helper functions used in the community detection guide. It provides a collection of utility functions for community detection tasks.
+
+      .. raw:: html
+
+          <div class="download-container">
+              <a href="community_detection_guide/notebooks/functions.ipynb" download>
+                  <button type="button" class="download-button">
+                      <i class="fa-solid fa-download"></i> Download Notebook
+                  </button>
+              </a>
+          </div>
 
 Indices and tables
 ==================

diff --git a/doc/source/conf.py b/doc/source/conf.py
@@ -142,7 +142,10 @@ def get_igraph_version():
 # https://github.com/twisted/pydoctor/blob/master/docs/source/conf.py
 html_theme = "sphinx_rtd_theme"
 html_static_path = ["_static"]
-html_css_files = ["custom.css"]
+html_css_files = [
+    "custom.css",
+    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"   
+]
 
 nbsphinx_execute = 'never'
 nbsphinx_allow_errors = True