MAINT: Add sphinx card configuration according to screen size

doc/source/conf.py

@@ -2,11 +2,7 @@
 
 from datetime import datetime
 import os
-from pathlib import Path
-from typing import List
 
-from bs4 import BeautifulSoup
-import requests
 from sphinx.builders.latex import LaTeXBuilder
 
 LaTeXBuilder.supported_image_types = ["image/png", "image/pdf", "image/svg+xml"]
@@ -23,10 +19,6 @@
     watermark,
 )
 
-THIS_PATH = Path(__file__).parent.resolve()
-
-EXAMPLE_PATH = (THIS_PATH / "examples" / "sphinx_examples").resolve()
-
 # Project information
 project = "ansys_sphinx_theme"
 copyright = f"(c) {datetime.now().year} ANSYS, Inc. All rights reserved"
@@ -146,10 +138,24 @@
 notfound_context = {
     "body": generate_404(),
 }
+
 notfound_no_urls_prefix = True
 
+# ONLY FOR ANSYS-SPHINX-THEME
+
+from pathlib import Path
+from typing import List
+
+import requests
+
+THIS_PATH = Path(__file__).parent.resolve()
+
+EXAMPLE_PATH = (THIS_PATH / "examples" / "sphinx_examples").resolve()
 
-def extract_example_links(archive_url: str, exclude_files: List[str]) -> List[str]:
+
+def extract_example_links(
+    archive_url: str, archive_base_url: str, exclude_files: List[str]
+) -> List[str]:
     """
     Extract example links from a specific URL.
 
@@ -166,13 +172,16 @@ def extract_example_links(archive_url: str, exclude_files: List[str]) -> List[st
         List of example links.
     """
     response = requests.get(archive_url)
-    soup = BeautifulSoup(response.content, "html5lib")
-    links = soup.find_all("a")
-    example_links = [
-        f"https://raw.githubusercontent.com{link['href'].replace('/blob/', '/')}"
-        for link in links
-        if link["href"].endswith(".txt") and all(file not in link["href"] for file in exclude_files)
+    json_data = response.json()
+    items = json_data.get("payload", {}).get("tree", {}).get("items", [])
+
+    txt_file_paths = [
+        item["path"]
+        for item in items
+        if item["name"].endswith(".txt") and all(file not in item["path"] for file in exclude_files)
     ]
+    example_links = [f"{archive_base_url}{path.replace('/blob/', '/')}" for path in txt_file_paths]
+
     return example_links
 
 
@@ -207,14 +216,18 @@ def download_and_process_files(example_links: List[str]) -> List[str]:
                 if not line.startswith("Cards Clickable") and not line.startswith("...............")
             ]
             f.write(
-                b"\n".join([line.replace("target", file_name).encode() for line in filtered_lines])
+                "\n".join([line.replace("target", file_name) for line in filtered_lines]).encode()
             )
         file_names.append(file_name)
+
     return file_names
 
 
 URL_ARCHIVE = "https://github.com/executablebooks/sphinx-design/tree/main/docs/snippets/rst"
-example_links = extract_example_links(URL_ARCHIVE, exclude_files=["article-info.txt"])
+ARCHIVE_BASE_URL = f"https://raw.githubusercontent.com/executablebooks/sphinx-design/main/"
+example_links = extract_example_links(
+    URL_ARCHIVE, ARCHIVE_BASE_URL, exclude_files=["article-info.txt"]
+)
 file_names = download_and_process_files(example_links)
 
 jinja_contexts = {"examples": {"inputs_examples": file_names}}

doc/source/examples/sphinx-design.rst

@@ -17,7 +17,7 @@ please refer `sphinx design <https://sphinx-design.readthedocs.io/en/latest/inde
         .. literalinclude:: sphinx_examples/{{ filename }}
            :language: rst
 
-    This directive renders the as follow:
+    This directive renders as follows:
 
         .. include:: sphinx_examples/{{ filename }}
 

doc/source/getting_started/index.rst

@@ -28,6 +28,7 @@ Consider using the ``conf.py`` for this repository:
 
 .. literalinclude:: ../conf.py
    :language: python
+   :end-before: # ONLY FOR ANSYS-SPHINX-THEME
 
 .. toctree::
    :hidden:

pyproject.toml

@@ -37,8 +37,6 @@ doc = [
     "sphinx-copybutton==0.5.2",
     "sphinx-notfound-page==0.8.3",
     "sphinx-design==0.4.1",
-    "bs4==0.0.1",
-    "html5lib==1.1",
     "requests==2.31.0",
     "sphinx-jinja==2.0.2",
 ]

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys_sphinx_theme.css

@@ -769,6 +769,11 @@ i.fa-square-github:before {
   color: white;
 }
 
+.navbar-icon-links {
+  font-size: 1.5rem;
+  color: white;
+}
+
 /*
 ##############################
 image padding before and after 
@@ -838,10 +843,9 @@ Sphinx design
   font-size: medium;
   flex: auto;
 }
-/*
-Sphinx-design tab
-*/
+/* Sphinx-design tab */
 
+/* Common styles for all screen sizes */
 .sd-tab-set > input:not(.focus-visible) + label {
   outline: none;
   font-size: large;
@@ -869,10 +873,23 @@ Sphinx-design tab
   border-color: var(--pst-color-text-base);
 }
 
-/*
-Sphinx-design card
-*/
+/* Media query for medium-sized screens */
+@media screen and (max-width: 768px) {
+  .sd-tab-set > input:not(.focus-visible) + label {
+    font-size: medium;
+  }
+}
 
+/* Media query for small-sized screens */
+@media screen and (max-width: 576px) {
+  .sd-tab-set > input:not(.focus-visible) + label {
+    font-size: small;
+  }
+}
+
+/* Sphinx-design card */
+
+/* Common styles for all screen sizes */
 .sd-card .sd-card-text {
   font-family: var(--pst-font-family-base) !important;
 }
@@ -902,12 +919,34 @@ html[data-theme="dark"] .sd-card-img-top[src*=".png"] {
   filter: invert(0.82) brightness(0.8) contrast(1.2);
 }
 
+/* Common styles for all screen sizes */
 .sd-card {
   border-radius: 0;
   padding: 10px 10px 10px 10px;
   font-family: var(--pst-font-family-base) !important;
 }
 
+/* Media query for medium-sized screens */
+@media screen and (max-width: 768px) {
+  .sd-card .sd-card-header {
+    font-size: var(--pst-font-size-h6);
+  }
+}
+
+/* Media query for small-sized screens */
+@media screen and (max-width: 576px) {
+  .sd-card .sd-card-header {
+    font-size: var(--pst-font-size-h5);
+  }
+  .sd-card {
+    padding: 5px 5px 5px 5px;
+  }
+  .sd-sphinx-override,
+  .sd-sphinx-override * {
+    box-sizing: content-box !important;
+  }
+}
+
 /*
 Sphinx-design dropdown
 */