From 0a9d983650bf042a5bd2c277711b637979e566f1 Mon Sep 17 00:00:00 2001
From: "John M. Horan" <johnmhoran@gmail.com>
Date: Mon, 20 Nov 2023 16:46:54 -0800
Subject: [PATCH] Update CSS to widen page and handle mobile #84

Reference: https://github.com/nexB/skeleton/issues/84

Signed-off-by: John M. Horan <johnmhoran@gmail.com>
---
 docs/source/_static/theme_overrides.css       | 363 +-----------------
 .../_static/theme_overrides_SUPERSEDED.css    | 353 +++++++++++++++++
 docs/source/conf.py                           |  15 +-
 3 files changed, 380 insertions(+), 351 deletions(-)
 create mode 100644 docs/source/_static/theme_overrides_SUPERSEDED.css

diff --git a/docs/source/_static/theme_overrides.css b/docs/source/_static/theme_overrides.css
index 9662d63a..de5ae433 100644
--- a/docs/source/_static/theme_overrides.css
+++ b/docs/source/_static/theme_overrides.css
@@ -1,353 +1,26 @@
-body {
-    color: #000000;
-}
-
-p {
-    margin-bottom: 10px;
-}
-
-.wy-plain-list-disc, .rst-content .section ul, .rst-content .toctree-wrapper ul, article ul {
-    margin-bottom: 10px;
-}
-
-.custom_header_01 {
-    color: #cc0000;
-    font-size: 22px;
-    font-weight: bold;
-    line-height: 50px;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-bottom: 20px;
-    margin-top: 20px;
-}
-
-h5 {
-    font-size: 18px;
-    color: #000000;
-    font-style: italic;
-    margin-bottom: 10px;
-}
-
-h6 {
-    font-size: 15px;
-    color: #000000;
-    font-style: italic;
-    margin-bottom: 10px;
-}
-
-/* custom admonitions */
-/* success */
-.custom-admonition-success  .admonition-title {
-    color: #000000;
-    background: #ccffcc;
-    border-radius: 5px 5px 0px 0px;
-}
-div.custom-admonition-success.admonition {
-    color: #000000;
-    background: #ffffff;
-    border: solid 1px #cccccc;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px 3px #d8d8d8;
-    margin: 20px 0px 30px 0px;
-}
-
-/* important */
-.custom-admonition-important  .admonition-title {
-    color: #000000;
-    background: #ccffcc;
-    border-radius: 5px 5px 0px 0px;
-    border-bottom: solid 1px #000000;
-}
-div.custom-admonition-important.admonition {
-    color: #000000;
-    background: #ffffff;
-    border: solid 1px #cccccc;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px 3px #d8d8d8;
-    margin: 20px 0px 30px 0px;
-}
-
-/* caution */
-.custom-admonition-caution  .admonition-title {
-    color: #000000;
-    background: #ffff99;
-    border-radius: 5px 5px 0px 0px;
-    border-bottom: solid 1px #e8e8e8;
-}
-div.custom-admonition-caution.admonition {
-    color: #000000;
-    background: #ffffff;
-    border: solid 1px #cccccc;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px 3px #d8d8d8;
-    margin: 20px 0px 30px 0px;
-}
-
-/* note */
-.custom-admonition-note  .admonition-title {
-    color: #ffffff;
-    background: #006bb3;
-    border-radius: 5px 5px 0px 0px;
-}
-div.custom-admonition-note.admonition {
-    color: #000000;
-    background: #ffffff;
-    border: solid 1px #cccccc;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px 3px #d8d8d8;
-    margin: 20px 0px 30px 0px;
-}
-
-/* todo */
-.custom-admonition-todo  .admonition-title {
-    color: #000000;
-    background: #cce6ff;
-    border-radius: 5px 5px 0px 0px;
-    border-bottom: solid 1px #99ccff;
-}
-div.custom-admonition-todo.admonition {
-    color: #000000;
-    background: #ffffff;
-    border: solid 1px #99ccff;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px 3px #d8d8d8;
-    margin: 20px 0px 30px 0px;
-}
-
-/* examples */
-.custom-admonition-examples  .admonition-title {
-    color: #000000;
-    background: #ffe6cc;
-    border-radius: 5px 5px 0px 0px;
-    border-bottom: solid 1px #d8d8d8;
-}
-div.custom-admonition-examples.admonition {
-    color: #000000;
-    background: #ffffff;
-    border: solid 1px #cccccc;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px 3px #d8d8d8;
-    margin: 20px 0px 30px 0px;
-}
-
+/* this is the container for the pages */
 .wy-nav-content {
     max-width: 100%;
-    padding-right: 100px;
-    padding-left: 100px;
-    background-color: #f2f2f2;
-}
-
-div.rst-content {
-    background-color: #ffffff;
-    border: solid 1px #e5e5e5;
-    padding: 20px 40px 20px 40px;
-}
-
-.rst-content .guilabel {
-    border: 1px solid #ffff99;
-    background: #ffff99;
-    font-size: 100%;
-    font-weight: normal;
-    border-radius: 4px;
-    padding: 2px 0px;
-    margin: auto 2px;
-    vertical-align: middle;
-}
-
-.rst-content kbd {
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
-    border: solid 1px #d8d8d8;
-    background-color: #f5f5f5;
-    padding: 0px 3px;
-    border-radius: 3px;
-}
-
-.wy-nav-content-wrap a {
-    color: #0066cc;
-    text-decoration: none;
-}
-.wy-nav-content-wrap a:hover {
-    color: #0099cc;
-    text-decoration: underline;
-}
-
-.wy-nav-top a {
-    color: #ffffff;
-}
-
-/* Based on numerous similar approaches e.g., https://github.com/readthedocs/sphinx_rtd_theme/issues/117 and https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html -- but remove form-factor limits to enable table wrap on full-size and smallest-size form factors */
-.wy-table-responsive table td {
-    white-space: normal !important;
-}
-
-.rst-content table.docutils td,
-.rst-content table.docutils th {
-    padding: 5px 10px 5px 10px;
-}
-.rst-content table.docutils td p,
-.rst-content table.docutils th p {
-    font-size: 14px;
-    margin-bottom: 0px;
-}
-.rst-content table.docutils td p cite,
-.rst-content table.docutils th p cite {
-    font-size: 14px;
-    background-color: transparent;
-}
-
-.colwidths-given th {
-    border: solid 1px #d8d8d8 !important;
-}
-.colwidths-given td {
-    border: solid 1px #d8d8d8 !important;
-}
-
-/*handles single-tick inline code*/
-.wy-body-for-nav cite {
-    color: #000000;
-    background-color: transparent;
-    font-style: normal;
-    font-family: "Courier New";
-    font-size: 13px;
-    padding: 3px 3px 3px 3px;
-}
-
-.rst-content pre.literal-block, .rst-content div[class^="highlight"] pre, .rst-content .linenodiv pre {
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
-    font-size: 13px;
-    overflow: visible;
-    white-space: pre-wrap;
-    color: #000000;
-}
-
-.rst-content pre.literal-block, .rst-content div[class^='highlight'] {
-    background-color: #f8f8f8;
-    border: solid 1px #e8e8e8;
-}
-
-/* This enables inline code to wrap. */
-code, .rst-content tt, .rst-content code {
-    white-space: pre-wrap;
-    padding: 2px 3px 1px;
-    border-radius: 3px;
-    font-size: 13px;
-    background-color: #ffffff;
-}
-
-/* use this added class for code blocks attached to bulleted list items */
-.highlight-top-margin {
-    margin-top: 20px !important;
-}
-
-/* change color of inline code block */
-span.pre {
-    color: #e01e5a;
-}
-
-.wy-body-for-nav blockquote {
-    margin: 1em 0;
-    padding-left: 1em;
-    border-left: 4px solid #ddd;
-    color: #000000;
-}
-
-/* Fix the unwanted top and bottom padding inside a nested bulleted/numbered list */
-.rst-content .section ol p, .rst-content .section ul p {
-    margin-bottom: 0px;
-}
-
-/* add spacing between bullets for legibility */
-.rst-content .section ol li, .rst-content .section ul li {
-    margin-bottom: 5px;
-}
-
-.rst-content .section ol li:first-child, .rst-content .section ul li:first-child {
-    margin-top: 5px;
-}
-
-/* but exclude the toctree bullets */
-.rst-content .toctree-wrapper ul li, .rst-content .toctree-wrapper ul li:first-child {
+    padding: 0px 40px 0px 0px;
     margin-top: 0px;
-    margin-bottom: 0px;
 }
 
-/* remove extra space at bottom of multine list-table cell */
-.rst-content .line-block {
-    margin-left: 0px;
-    margin-bottom: 0px;
-    line-height: 24px;
+.wy-nav-content-wrap {
+    border-right: solid 1px;
 }
 
-/* fix extra vertical spacing in page toctree */
-.rst-content .toctree-wrapper ul li ul, article ul li ul {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-/* this is used by the genindex added via layout.html (see source/_templates/) to sidebar toc */
-.reference.internal.toc-index {
-    color: #d9d9d9;
-}
-
-.reference.internal.toc-index.current {
-    background-color: #ffffff;
-    color: #000000;
-    font-weight: bold;
-}
-
-.toc-index-div {
-    border-top: solid 1px #000000;
-    margin-top: 10px;
-    padding-top: 5px;
-}
-
-.indextable ul li {
-    font-size: 14px;
-    margin-bottom: 5px;
-}
-
-/* The next 2 fix the poor vertical spacing in genindex.html (the alphabetized index) */
-.indextable.genindextable {
-    margin-bottom: 20px;
-}
-
-div.genindex-jumpbox {
-    margin-bottom: 10px;
-}
-
-/* rst image classes */
-
-.clear-both {
-    clear: both;
-  }
-
-.float-left {
-    float: left;
-    margin-right: 20px;
-}
-
-img {
-    border: solid 1px #e8e8e8;
-}
-
-/* These are custom and need to be defined in conf.py to access in all pages, e.g., '.. role:: red' */
-.img-title {
-    color: #000000;
-    /* neither padding nor margin works for vertical spacing bc it's a span -- line-height does, sort of */
-    line-height: 3.0;
-    font-style: italic;
-    font-weight: 600;
-}
-
-.img-title-para {
-    color: #000000;
-    margin-top: 20px;
-    margin-bottom: 0px;
-    font-style: italic;
-    font-weight: 500;
-}
-
-.red {
-    color: red;
+div.rst-content {
+    max-width: 1300px;
+    border: 0;
+    padding: 0px 80px 10px 80px;
+    margin-left: 50px;
+}
+
+@media (max-width: 768px) {
+    div.rst-content {
+        max-width: 1300px;
+        border: 0;
+        padding: 0px 10px 10px 10px;
+        margin-left: 0px;
+    }
 }
diff --git a/docs/source/_static/theme_overrides_SUPERSEDED.css b/docs/source/_static/theme_overrides_SUPERSEDED.css
new file mode 100644
index 00000000..9662d63a
--- /dev/null
+++ b/docs/source/_static/theme_overrides_SUPERSEDED.css
@@ -0,0 +1,353 @@
+body {
+    color: #000000;
+}
+
+p {
+    margin-bottom: 10px;
+}
+
+.wy-plain-list-disc, .rst-content .section ul, .rst-content .toctree-wrapper ul, article ul {
+    margin-bottom: 10px;
+}
+
+.custom_header_01 {
+    color: #cc0000;
+    font-size: 22px;
+    font-weight: bold;
+    line-height: 50px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+
+h5 {
+    font-size: 18px;
+    color: #000000;
+    font-style: italic;
+    margin-bottom: 10px;
+}
+
+h6 {
+    font-size: 15px;
+    color: #000000;
+    font-style: italic;
+    margin-bottom: 10px;
+}
+
+/* custom admonitions */
+/* success */
+.custom-admonition-success  .admonition-title {
+    color: #000000;
+    background: #ccffcc;
+    border-radius: 5px 5px 0px 0px;
+}
+div.custom-admonition-success.admonition {
+    color: #000000;
+    background: #ffffff;
+    border: solid 1px #cccccc;
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px 3px #d8d8d8;
+    margin: 20px 0px 30px 0px;
+}
+
+/* important */
+.custom-admonition-important  .admonition-title {
+    color: #000000;
+    background: #ccffcc;
+    border-radius: 5px 5px 0px 0px;
+    border-bottom: solid 1px #000000;
+}
+div.custom-admonition-important.admonition {
+    color: #000000;
+    background: #ffffff;
+    border: solid 1px #cccccc;
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px 3px #d8d8d8;
+    margin: 20px 0px 30px 0px;
+}
+
+/* caution */
+.custom-admonition-caution  .admonition-title {
+    color: #000000;
+    background: #ffff99;
+    border-radius: 5px 5px 0px 0px;
+    border-bottom: solid 1px #e8e8e8;
+}
+div.custom-admonition-caution.admonition {
+    color: #000000;
+    background: #ffffff;
+    border: solid 1px #cccccc;
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px 3px #d8d8d8;
+    margin: 20px 0px 30px 0px;
+}
+
+/* note */
+.custom-admonition-note  .admonition-title {
+    color: #ffffff;
+    background: #006bb3;
+    border-radius: 5px 5px 0px 0px;
+}
+div.custom-admonition-note.admonition {
+    color: #000000;
+    background: #ffffff;
+    border: solid 1px #cccccc;
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px 3px #d8d8d8;
+    margin: 20px 0px 30px 0px;
+}
+
+/* todo */
+.custom-admonition-todo  .admonition-title {
+    color: #000000;
+    background: #cce6ff;
+    border-radius: 5px 5px 0px 0px;
+    border-bottom: solid 1px #99ccff;
+}
+div.custom-admonition-todo.admonition {
+    color: #000000;
+    background: #ffffff;
+    border: solid 1px #99ccff;
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px 3px #d8d8d8;
+    margin: 20px 0px 30px 0px;
+}
+
+/* examples */
+.custom-admonition-examples  .admonition-title {
+    color: #000000;
+    background: #ffe6cc;
+    border-radius: 5px 5px 0px 0px;
+    border-bottom: solid 1px #d8d8d8;
+}
+div.custom-admonition-examples.admonition {
+    color: #000000;
+    background: #ffffff;
+    border: solid 1px #cccccc;
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px 3px #d8d8d8;
+    margin: 20px 0px 30px 0px;
+}
+
+.wy-nav-content {
+    max-width: 100%;
+    padding-right: 100px;
+    padding-left: 100px;
+    background-color: #f2f2f2;
+}
+
+div.rst-content {
+    background-color: #ffffff;
+    border: solid 1px #e5e5e5;
+    padding: 20px 40px 20px 40px;
+}
+
+.rst-content .guilabel {
+    border: 1px solid #ffff99;
+    background: #ffff99;
+    font-size: 100%;
+    font-weight: normal;
+    border-radius: 4px;
+    padding: 2px 0px;
+    margin: auto 2px;
+    vertical-align: middle;
+}
+
+.rst-content kbd {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
+    border: solid 1px #d8d8d8;
+    background-color: #f5f5f5;
+    padding: 0px 3px;
+    border-radius: 3px;
+}
+
+.wy-nav-content-wrap a {
+    color: #0066cc;
+    text-decoration: none;
+}
+.wy-nav-content-wrap a:hover {
+    color: #0099cc;
+    text-decoration: underline;
+}
+
+.wy-nav-top a {
+    color: #ffffff;
+}
+
+/* Based on numerous similar approaches e.g., https://github.com/readthedocs/sphinx_rtd_theme/issues/117 and https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html -- but remove form-factor limits to enable table wrap on full-size and smallest-size form factors */
+.wy-table-responsive table td {
+    white-space: normal !important;
+}
+
+.rst-content table.docutils td,
+.rst-content table.docutils th {
+    padding: 5px 10px 5px 10px;
+}
+.rst-content table.docutils td p,
+.rst-content table.docutils th p {
+    font-size: 14px;
+    margin-bottom: 0px;
+}
+.rst-content table.docutils td p cite,
+.rst-content table.docutils th p cite {
+    font-size: 14px;
+    background-color: transparent;
+}
+
+.colwidths-given th {
+    border: solid 1px #d8d8d8 !important;
+}
+.colwidths-given td {
+    border: solid 1px #d8d8d8 !important;
+}
+
+/*handles single-tick inline code*/
+.wy-body-for-nav cite {
+    color: #000000;
+    background-color: transparent;
+    font-style: normal;
+    font-family: "Courier New";
+    font-size: 13px;
+    padding: 3px 3px 3px 3px;
+}
+
+.rst-content pre.literal-block, .rst-content div[class^="highlight"] pre, .rst-content .linenodiv pre {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
+    font-size: 13px;
+    overflow: visible;
+    white-space: pre-wrap;
+    color: #000000;
+}
+
+.rst-content pre.literal-block, .rst-content div[class^='highlight'] {
+    background-color: #f8f8f8;
+    border: solid 1px #e8e8e8;
+}
+
+/* This enables inline code to wrap. */
+code, .rst-content tt, .rst-content code {
+    white-space: pre-wrap;
+    padding: 2px 3px 1px;
+    border-radius: 3px;
+    font-size: 13px;
+    background-color: #ffffff;
+}
+
+/* use this added class for code blocks attached to bulleted list items */
+.highlight-top-margin {
+    margin-top: 20px !important;
+}
+
+/* change color of inline code block */
+span.pre {
+    color: #e01e5a;
+}
+
+.wy-body-for-nav blockquote {
+    margin: 1em 0;
+    padding-left: 1em;
+    border-left: 4px solid #ddd;
+    color: #000000;
+}
+
+/* Fix the unwanted top and bottom padding inside a nested bulleted/numbered list */
+.rst-content .section ol p, .rst-content .section ul p {
+    margin-bottom: 0px;
+}
+
+/* add spacing between bullets for legibility */
+.rst-content .section ol li, .rst-content .section ul li {
+    margin-bottom: 5px;
+}
+
+.rst-content .section ol li:first-child, .rst-content .section ul li:first-child {
+    margin-top: 5px;
+}
+
+/* but exclude the toctree bullets */
+.rst-content .toctree-wrapper ul li, .rst-content .toctree-wrapper ul li:first-child {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+/* remove extra space at bottom of multine list-table cell */
+.rst-content .line-block {
+    margin-left: 0px;
+    margin-bottom: 0px;
+    line-height: 24px;
+}
+
+/* fix extra vertical spacing in page toctree */
+.rst-content .toctree-wrapper ul li ul, article ul li ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* this is used by the genindex added via layout.html (see source/_templates/) to sidebar toc */
+.reference.internal.toc-index {
+    color: #d9d9d9;
+}
+
+.reference.internal.toc-index.current {
+    background-color: #ffffff;
+    color: #000000;
+    font-weight: bold;
+}
+
+.toc-index-div {
+    border-top: solid 1px #000000;
+    margin-top: 10px;
+    padding-top: 5px;
+}
+
+.indextable ul li {
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+/* The next 2 fix the poor vertical spacing in genindex.html (the alphabetized index) */
+.indextable.genindextable {
+    margin-bottom: 20px;
+}
+
+div.genindex-jumpbox {
+    margin-bottom: 10px;
+}
+
+/* rst image classes */
+
+.clear-both {
+    clear: both;
+  }
+
+.float-left {
+    float: left;
+    margin-right: 20px;
+}
+
+img {
+    border: solid 1px #e8e8e8;
+}
+
+/* These are custom and need to be defined in conf.py to access in all pages, e.g., '.. role:: red' */
+.img-title {
+    color: #000000;
+    /* neither padding nor margin works for vertical spacing bc it's a span -- line-height does, sort of */
+    line-height: 3.0;
+    font-style: italic;
+    font-weight: 600;
+}
+
+.img-title-para {
+    color: #000000;
+    margin-top: 20px;
+    margin-bottom: 0px;
+    font-style: italic;
+    font-weight: 500;
+}
+
+.red {
+    color: red;
+}
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 54e5e665..7771ff09 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -30,7 +30,7 @@
 extensions = [
     "sphinx.ext.intersphinx",
     "sphinx_reredirects",
-    'sphinx_rtd_theme',
+    "sphinx_rtd_theme",
     "sphinx_rtd_dark_mode",
     "sphinx.ext.extlinks",
     "sphinx_copybutton",
@@ -47,7 +47,10 @@
 
 intersphinx_mapping = {
     "aboutcode": ("https://aboutcode.readthedocs.io/en/latest/", None),
-    "scancode-workbench": ("https://scancode-workbench.readthedocs.io/en/develop/", None),
+    "scancode-workbench": (
+        "https://scancode-workbench.readthedocs.io/en/develop/",
+        None,
+    ),
 }
 
 
@@ -82,7 +85,9 @@
     "conf_py_path": "/docs/source/",  # path in the checkout to the docs root
 }
 
-html_css_files = ["_static/theme_overrides.css"]
+html_css_files = [
+    "theme_overrides.css",
+]
 
 
 # If true, "Created using Sphinx" is shown in the HTML footer. Default is True.
@@ -108,6 +113,4 @@
 
 # -- Options for LaTeX output -------------------------------------------------
 
-latex_elements = {
-    'classoptions': ',openany,oneside'
-}
\ No newline at end of file
+latex_elements = {"classoptions": ",openany,oneside"}