From c68a97dbc20b7fa81f7be1c33f3713bb8e3f0be5 Mon Sep 17 00:00:00 2001
From: adigitoleo <adigitoleo@posteo.net>
Date: Fri, 23 Aug 2024 17:08:49 +1000
Subject: [PATCH] docs: Add PyPI and GitHub buttons to docs homepage and
 comment CSS file

---
 docs/template/index.html.jinja2 | 38 +++++++++++++++++++++++++++------
 docs/template/theme.css         | 14 ++++++++++--
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/docs/template/index.html.jinja2 b/docs/template/index.html.jinja2
index c1ab9959..131e0d7b 100644
--- a/docs/template/index.html.jinja2
+++ b/docs/template/index.html.jinja2
@@ -4,9 +4,11 @@
 
 {% block nav %}
     <img src="https://raw.githubusercontent.com/seismic-anisotropy/PyDRex/main/docs/assets/logo160.png" class="logo" alt="project logo"/>
-    <h4>{{ footer_text }}</h4>
-    <br>
+    <div>
     <input type="search" placeholder="Search..." role="searchbox" aria-label="search" pattern=".+" required>
+    <br>
+    <h6>{{ footer_text }}</h6>
+    </div>
 {% endblock %}
 
 {% block content %}
@@ -15,13 +17,37 @@
     {% filter to_html %}
 # Welcome to PyDRex!
 
-> This is the documentation website for [PyDRex](https://github.com/seismic-anisotropy/PyDRex),
+> This is the documentation website for [PyDRex](https://pypi.org/project/pydrex/),
 a Python implementation of the D-Rex model for kinematic texture simulations.
-Use the links below to browse the API documentation or the tests and examples:
+Click the buttons below to browse the documentation or read about the tests and examples.
+    {% endfilter %}
+
+    <br>
+
+    <blockquote>
+    <a href="pydrex.html"><button class="button">Documentation</button></a>
+    <a href="tests.html"><button class="button">Tests & Examples</button></a>
+    </blockquote>
+
+    <br>
+
+    {% filter to_html %}
+> The `pydrex` package is published on PyPI (the Python Package Index).
+The source code is hosted on GitHub, with an issue tracker and discussion page.
     {% endfilter %}
 
-    <blockquote><a href="pydrex.html"><button class="button">API Documentation</button></a>
-    <a href="tests.html"><button class="button">Tests & Examples</button></a></blockquote>
+    <br>
+
+    <blockquote>
+    <a href="https://pypi.org/project/pydrex/"><button class="button">
+    Package&nbsp;
+    <img height="33px" src="https://pypi.org/static/images/logo-small.8998e9d1.svg" alt="PyPI logo"/>
+    </button></a>
+    <a href="https://github.com/seismic-anisotropy/PyDRex"><button class="button">
+    Source code&nbsp;
+    <img height="33px" src="https://github.githubassets.com/favicons/favicon.svg" alt="GitHub logo"/>
+    </button></a>
+    </blockquote>
 
     </main>
     {% include "search.html.jinja2" %}
diff --git a/docs/template/theme.css b/docs/template/theme.css
index 03b59811..702307a4 100644
--- a/docs/template/theme.css
+++ b/docs/template/theme.css
@@ -38,8 +38,17 @@
   }
 }
 
-.homediv { padding-top: 56px; max-width: 1080px; }
+/* Center search box and version number in nav bars. */
+/* Then fix up internal div display with some margins. */
+input { display: block; margin: auto; }
+nav h6 { text-align: center; }
+nav div { padding-right: 8%; }
+
+/* Add padding for nav bar footer in case of long version numbers (dev docs). */
+nav footer { padding-right: 5px; }
 
+/* Styles for greeting page and buttons. */
+.homediv { padding-top: 56px; max-width: 1080px; }
 .button {
     background-color: var(--muted);
     color: var(--pdoc-background);
@@ -55,10 +64,11 @@
     cursor: pointer;
     width: 48%;
 }
-
 .button:hover {
     background-color: var(--text);
     color: var(--active);
 }
 
+/* Render display equations in horizontally scrollable box. */
+/* Also tries to hide the scroll bar (sometimes it doesn't work). */
 .katex-display { overflow: auto hidden }