Start using the updated theme

CODEOFCONDUCT.md

@@ -47,7 +47,8 @@ Instances of unacceptable behavior can be brought to the attention of the projec
 
 ## Consequences
 
-Upon receipt of a complaint, the project administrator(s) may take any action deemed necessary and appropriate under the circumstances. Such action can include things such as: removing, editing, or rejecting comments, commits, code, wiki edits, email, issues, and other contributions that are not aligned to this Code of Conduct, or banning temporarily or permanently any contributor for other behaviors that are deemed inappropriate, threatening, offensive, or harmful. Project administrators also have the right to report violations to UCAR HR and/or UCAR’s Office of Diversity, Equity and Inclusion (ODEI), as well as a participant’s home institution and/or law enforcement. In the event an incident is reported to UCAR, UCAR will follow its Harassment Reporting and Complaint Procedure.
+Upon receipt of a complaint, the project administrator(s) may take any action deemed necessary and appropriate under the circumstances. Such action can include things such as: removing, editing, or rejecting comments, commits, code, wiki edits, email, issues, and other contributions that are not
+aligned to this Code of Conduct, or banning temporarily or permanently any contributor for other behaviors that are deemed inappropriate, threatening, offensive, or harmful. Project administrators also have the right to report violations to UCAR HR and/or UCAR’s Office of Diversity, Equity and Inclusion (ODEI), as well as a participant’s home institution and/or law enforcement. In the event an incident is reported to UCAR, UCAR will follow its Harassment Reporting and Complaint Procedure.
 
 ## Attribution
 

environment.yml

@@ -3,13 +3,10 @@ channels:
 - conda-forge
 - nodefaults
 dependencies:
+- ablog
 - matplotlib
 - myst-nb
 - pandas
-- pip
-- pyyaml
 - pre-commit
-- sphinx-panels
-- ablog
-- pip:
-  - sphinx-pythia-theme
+- pyyaml
+- sphinx-pythia-theme

portal/_extensions/gallery_generator.py

@@ -1,6 +1,5 @@
 import itertools
 import pathlib
-from textwrap import dedent
 
 from truncatehtml import truncate
 
@@ -32,16 +31,16 @@ def _generate_tag_menu(all_items, tag_key):
     )
 
     return f"""
-<div class="dropdown">
+        <div class="dropdown">
 
-<button class="btn btn-sm btn-outline-primary mx-1 dropdown-toggle" type="button" id="{tag_key}Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-{tag_key.title()}
-</button>
-<ul class="dropdown-menu" aria-labelledby="{tag_key}Dropdown">
-{options}
-</ul>
-</div>
-"""
+        <button class="btn btn-sm btn-outline-primary mx-1 dropdown-toggle" type="button" id="{tag_key}Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {tag_key.title()}
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="{tag_key}Dropdown">
+        {options}
+        </ul>
+        </div>
+        """
 
 
 def generate_menu(all_items, submit_btn_txt=None, submit_btn_link=None):
@@ -64,18 +63,18 @@ def generate_menu(all_items, submit_btn_txt=None, submit_btn_link=None):
 
 def build_from_items(items, filename, title='Gallery', subtitle=None, subtext=None, menu_html='', max_descr_len=300):
     # Build the gallery file
-    panels_body = []
+    grid_body = []
     for item in items:
         if not item.get('thumbnail'):
-            item['thumbnail'] = '/_static/images/ebp-logo.png'
-        thumbnail = item['thumbnail']
+            item['thumbnail'] = '_static/images/ebp-logo.png'
+        thumbnail = item['thumbnail'][1:] if item['thumbnail'].startswith('/') else item['thumbnail']
         tag_list = sorted((itertools.chain(*item['tags'].values())))
         tag_list_f = [tag.replace(' ', '-') for tag in tag_list]
 
         tags = [f'<span class="badge bg-primary">{tag}</span>' for tag in tag_list_f]
         tags = '\n'.join(tags)
 
-        tag_class_str = ' '.join(tag_list_f)
+        # tag_class_str = ' '.join(tag_list_f)
 
         author_strs = set()
         affiliation_strs = set()
@@ -108,69 +107,69 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, subtext=No
 
         if ellipsis_str in short_description:
             modal_str = f"""
-<div class="modal">
-<div class="content">
-<img src="{thumbnail}" class="modal-img" />
-<h3 class="display-3">{item["title"]}</h3>
-{authors_str}
-<br/>
-{affiliations_str}
-<p class="my-2">{item['description']}</p>
-<p class="my-2">{tags}</p>
-<p class="mt-3 mb-0"><a href="{item["url"]}" class="btn btn-outline-primary btn-block">Visit Website</a></p>
-</div>
-</div>
-"""
+            <div class="modal">
+            <div class="content">
+            <img src="{thumbnail}" class="modal-img" />
+            <h3 class="display-3">{item["title"]}</h3>
+            {authors_str}
+            <br/>
+            {affiliations_str}
+            <p class="my-2">{item['description']}</p>
+            <p class="my-2">{tags}</p>
+            <p class="mt-3 mb-0"><a href="{item["url"]}" class="btn btn-outline-primary btn-block">Visit Website</a></p>
+            </div>
+            </div>
+            """
+            modal_str = '\n'.join([m.lstrip() for m in modal_str.split('\n')])
         else:
             modal_str = ''
+            new_card = f"""\
+            :::{{grid-item-card}}
+            :shadow: md
+            :class-footer: card-footer
+            <div class="d-flex gallery-card">
+            <img src="{thumbnail}" class="gallery-thumbnail" />
+            <div class="container">
+            <a href="{item["url"]}" class="text-decoration-none"><h4 class="display-4 p-0">{item["title"]}</h4></a>
+            <p class="card-subtitle">{authors_str}<br/>{affiliations_str}</p>
+            <p class="my-2">{short_description} </p>
+            </div>
+            </div>
+            {modal_str}
 
-        panels_body.append(
-            f"""\
----
-:column: + tagged-card {tag_class_str}
+            +++
 
-<div class="d-flex gallery-card">
-<img src="{thumbnail}" class="gallery-thumbnail" />
-<div class="container">
-<a href="{item["url"]}" class="text-decoration-none"><h4 class="display-4 p-0">{item["title"]}</h4></a>
-<p class="card-subtitle">{authors_str}<br/>{affiliations_str}</p>
-<p class="my-2">{short_description}</p>
-</div>
-</div>
-{modal_str}
+            {tags}
 
-+++
+            :::
 
-{tags}
+            """
 
-"""
-        )
+        grid_body.append('\n'.join([m.lstrip() for m in new_card.split('\n')]))
 
-    panels_body = '\n'.join(panels_body)
+    grid_body = '\n'.join(grid_body)
 
     stitle = f'#### {subtitle}' if subtitle else ''
     stext = subtext if subtext else ''
 
-    panels = f"""
-# {title}
+    grid = f"""\
+        {title}
+        {'=' * len(title)}
 
-{stitle}
-{stext}
+        {stitle}
+        {stext}
 
-{menu_html}
+        {menu_html}
 
-````{{panels}}
-:column: col-12
-:card: +mb-4 w-100
-:header: d-none
-:body: p-3 m-0
-:footer: p-1
+        ::::{{grid}} 1
+        :gutter: 4
 
-{dedent(panels_body)}
-````
+        {grid_body}
 
-<div class="modal-backdrop"></div>
-<script src="/_static/custom.js"></script>
-"""
+        <div class="modal-backdrop"></div>
+        <script src="/_static/custom.js"></script>
+    """
 
-    pathlib.Path(f'{filename}.md').write_text(panels)
+    grid = '\n'.join([m.lstrip() for m in grid.split('\n')])
+
+    pathlib.Path(f'{filename}.md').write_text(grid)

portal/_static/custom.css

@@ -1,10 +1,26 @@
+:root {
+  --pst-color-border: rgba(0, 0, 0, 0.125) !important;
+}
+
+.bd-main .bd-content .bd-article-container {
+  max-width: 100%;  /* default is 60em */
+}
+.bd-page-width {
+  max-width: 100%;  /* default is 88rem */
+}
+
+.sd-card-footer {
+  background: rgba(var(--spt-color-gray-100), 1) !important;
+  padding: 4px;
+}
+
 main.banner-main #project-pythia {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
 main.banner-main #project-pythia p {
-  font-size: 1.4rem;  /* default: 1.25rem */
+  font-size: 1.4rem;  /* default: 1.25rem * /
   /* font-weight: 700; default: 300 */
 }
 
@@ -74,12 +90,22 @@ main.banner-main #project-pythia a.btn-light {
   margin: auto 0;
   padding: 0;
   max-width: 160px;
+  background: transparent !important;
 }
 
 .card-subtitle {
   font-size: 0.8rem;
 }
 
+.my-2 {
+  color: inherit;
+}
+
+.text-decoration-none {
+  text-decoration: none;
+  color: inherit;
+}
+
 @media (max-width: 576px) {
   .modal {
     padding: 2rem;