Add a pretty JupyterLite button to docs (geojupyter#361)

Author: mfisher87

.pre-commit-config.yaml

@@ -37,4 +37,4 @@ repos:
     rev: v6.2.4
     hooks:
       - id: rstcheck
-        args: ['--ignore-directives=tabs,toctree,autoclass', '--report-level=warning']
+        args: ['--ignore-directives=tabs,toctree,autoclass,cssclass', '--report-level=warning']

docs/assets/css/custom.css

@@ -0,0 +1,17 @@
+.try-in-jupyterlite-button a {
+  background-color: #f7dc1e;
+  color: black;
+  text-decoration: none;
+
+  border: none;
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-family: vibur;
+  font-size: larger;
+  box-shadow: 0 2px 5px rgba(108, 108, 108, 0.2);
+}
+
+.try-in-jupyterlite-button a:hover {
+  color: white;
+  box-shadow: 0 2px 5px #f7dc1e;
+}

docs/conf.py

@@ -5,6 +5,11 @@
 html_theme = "pydata_sphinx_theme"
 html_theme_options = {"github_url": "https://github.com/geojupyter/jupytergis"}
 
+html_static_path = ["assets"]
+html_css_files = [
+    "css/custom.css",
+]
+
 extensions = [
     "jupyterlite_sphinx",
     "sphinx.ext.autodoc",

docs/index.rst

@@ -2,9 +2,9 @@
 JupyterGIS
 ==========
 
-.. image:: https://jupyterlite.rtfd.io/en/latest/_static/badge.svg
-   :alt: Try JupyterGIS now in JupyterLite!
-   :target: lite/
+.. cssclass:: try-in-jupyterlite-button
+
+  `Try it with JupyterLite! <lite/>`_
 
 JupyterGIS is a JupyterLab extension for collaborative GIS (Geographical Information System). It is designed to
 allow multiple people to work on the same geospatial project simultaneously, facilitating discussion and collaboration