add css

Docs/_static/css/how_to_use_interface.css

@@ -0,0 +1,11 @@
+.screenshot-div {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.screenshot {
+    max-width: 75%;
+    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+}

Docs/_templates/layout.html

@@ -0,0 +1,2 @@
+{% extends "!layout.html" %}
+{% set css_files = css_files + [ "_static/css/how_to_use_interface.css" ] %}

Docs/conf.py

@@ -36,7 +36,7 @@
 autodoc_warningiserror = False  # suppress warnings during autodoc
 
 # Add any paths that contain templates here, relative to this directory.
-# templates_path = ["_templates"]
+templates_path = ["_templates"]
 
 # List of patterns, relative to source directory, that match files and
 # directories to ignore when looking for source files.
@@ -54,7 +54,7 @@
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
-html_css_files = ["custom.css"]
+html_css_files = ["_static/css/how_to_use_interface.css"]
 
 # The name of an image file (relative to this directory) to place at the top
 # of the sidebar.
@@ -77,3 +77,6 @@
 .. |Binder launch button| image:: https://mybinder.org/badge_logo.svg
    :target: https://mybinder.org/v2/gh/watertap-org/watertap/main?labpath=tutorials%2F00-index.ipynb
 """
+
+def setup(app):
+  app.add_css_file("css/how_to_use_interface.css" )

Docs/how_to_guides/how_to_use_interface.rst

@@ -9,7 +9,7 @@ Step-by-step guide
 
 .. container::
 
-   .. container:: how-to-use-ui-content
+   .. container::
 
       .. rubric:: PARETO User Interface
          :name: pareto-user-interface
@@ -19,7 +19,7 @@ Step-by-step guide
          :name: step-by-step-guide-to-using-paretos-user-interface.
          :class: text-header
 
-      .. container:: step-by-step-content
+      .. container::
 
          **Step 1:** Download the latest version of PARETO for your
          operating system at *https://www.project-pareto.org/software/*.
@@ -39,7 +39,7 @@ Step-by-step guide
          before being redirected to the scenarios page:
 
          .. container:: screenshot-div
-
+            
             |scenarios-page|
 
          **Step 4:** Click on "Create new scenario". Download from one