Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widen the RTD page with responsive CSS #84

Closed
johnmhoran opened this issue Nov 20, 2023 · 6 comments
Closed

Widen the RTD page with responsive CSS #84

johnmhoran opened this issue Nov 20, 2023 · 6 comments
Assignees
Labels
enhancement New feature or request

Comments

@johnmhoran
Copy link
Contributor

We want to widen the RTD page as we recently did in aboutcode-org/vulnerablecode#1339.

@johnmhoran johnmhoran added the enhancement New feature or request label Nov 20, 2023
@johnmhoran johnmhoran self-assigned this Nov 20, 2023
@johnmhoran
Copy link
Contributor Author

@AyanSinhaMahapatra Following up on your request, I just cloned this repo, examined conf.py and several other relevant files, cd'd to docs and ran make clean html to get an initial build against which I can compare my modifications when I make them. However, I got this error:

Mon Nov 20, 2023 10:01 AM  /home/jmh/dev/nexb/skeleton jmh (main)
$ cd docs

Mon Nov 20, 2023 10:01 AM  /home/jmh/dev/nexb/skeleton/docs jmh (main)
$ make clean html
Running Sphinx v4.4.0

Extension error:
Could not import extension sphinx_reredirects (exception: No module named 'sphinx_reredirects')
make: *** [Makefile:28: html] Error 2

Mon Nov 20, 2023 10:01 AM  /home/jmh/dev/nexb/skeleton/docs jmh (main)
$

I expect this is related to this section of conf.py but have no idea how to avoid the error -- aside from just commenting out "sphinx_reredirects", which would not be a true resolution of whatever the problem is -- and do an initial build. Can you please assist me with this when you have time?

extensions = [
    "sphinx.ext.intersphinx",
    "sphinx_reredirects",
    'sphinx_rtd_theme',
    "sphinx_rtd_dark_mode",
    "sphinx.ext.extlinks",
    "sphinx_copybutton",
]


# Redirects for olds pages
# See https://documatt.gitlab.io/sphinx-reredirects/usage.html
redirects = {}

@johnmhoran
Copy link
Contributor Author

@AyanSinhaMahapatra Here's a summary of what I've done and the current state of affairs.

  • I added my wide-page/responsive CSS to theme_overrides.css.
  • After rebuilding and seeing no effect, I checked conf.py, noticed that the path was wrong (_static is already set with html_static_path = ["_static"]) and fixed it.
# html_css_files = ["_static/theme_overrides.css"]
html_css_files = [
    "theme_overrides.css",
]
  • The wide-page and responsive CSS now works, but there's a color/UI conflict between the dark theme and the other CSS in theme_overrides.css.
  • I did a little research and see that the dark theme comes from the sphinx_rtd_dark_mode recently added to the skeleton's conf.py. There's an icon on the lower-right corner of the RTD/HTML page that you can click to toggle the dark theme on and off. Didn't know we had or wanted this, but it is kinda cool.
  • Given the conflicts that resulted from my correcting the conf.py path and activating theme_overrides.css, and since we apparently were not using it anyway, for the time being I'm going to change the name of that file to theme_overrides_SUPERSEDED.css, create a new theme_overrides.css that contains only the layout code you asked me to add, and see if that resolves the color/UI conflict. I'll commit and push so you and others can assess what we have and what we'd like.

@johnmhoran
Copy link
Contributor Author

The default landing page now looks like this:

image

and when toggled to non-dark:

image

@johnmhoran
Copy link
Contributor Author

I need to figure out how to shut off my background and border colors when dark mode is invoked, since we see some of that in the default dark mode and definitely don't want it there. That's next.

@johnmhoran
Copy link
Contributor Author

I removed the colors I'd included in my CSS and both dark and light now look good.

There's a file at /nexb/skeleton/venv/lib/python3.8/site-packages/sphinx_rtd_dark_mode/dark_mode_loader.py that perhaps could be modified to allow use of more custom CSS, but unless there's a call for that I'm not planning on touching that file.

image

image

johnmhoran added a commit that referenced this issue Nov 21, 2023
Reference: #84

Signed-off-by: John M. Horan <johnmhoran@gmail.com>
johnmhoran added a commit that referenced this issue Jan 16, 2024
Reference: #84

Signed-off-by: John M. Horan <johnmhoran@gmail.com>
AyanSinhaMahapatra added a commit that referenced this issue Jan 18, 2024
Update CSS to widen page and handle mobile #84
@AyanSinhaMahapatra
Copy link
Contributor

This was completed, thanks @johnmhoran , closing this!

TG1999 pushed a commit to aboutcode-org/python-inspector that referenced this issue Aug 15, 2024
Reference: aboutcode-org/skeleton#84

Signed-off-by: John M. Horan <johnmhoran@gmail.com>
TG1999 pushed a commit to aboutcode-org/python-inspector that referenced this issue Aug 15, 2024
Reference: aboutcode-org/skeleton#84

Signed-off-by: John M. Horan <johnmhoran@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants