An experiment on the relationship between Sphinx and custom CSS.
This project had originally been documented using Sphinx, and hosted through Read the Docs. The first phase of documentation included general page creating, with a focus on installation, examples, and functionality. As the tool’s popularity grew it was important to update the web design. Below is a documentation process for adding CSS styling to Sphinx documentation:
docs
folder, go to the _static
folder.css
.css
folder, create a file called custom.css
.Once finished:
docs
folder select the file called conf.py
.html_static_path = ['static']
.html_css_files = ['css/custom.css']
.conf.py
.Sphinx documentation allows you to add additional CSS snippets which replace the built-in design. For example, if you choose to adjust the background-color
of a particular section, the small code snippet will then override the original background style. This allows you to personalize the pages without requiring a complete code or stylistic overhaul.
Reference
Colours: The library provides additional features for Matplotlib plots. To honour their connection, the colour palette begins with #11557C, the Matplotlib cover art tone. The navigation font—which appears both on the side bar and the bottom of the landing page—is a deep grey for soft contrast with the text body.
Background: Sphinx has inherent blank-space background colour. To soften the drastic colour differences, the new background (#FAFAFA 250) is a tone of the margin grey (#EFEFEF RBG 239).
Fonts: The sans-serif font was changed to the serif font Georgia. This font is intended to be legible even on small or low resolution screens, perfect for the wide variety of computer screens the intended audience might use.