[css] split index file into separate files

[sneakers-the-rat]

I think a decent amount of the css in the top-level index .scss file was put in that file out of necessity in the python-package-guide bc it was pure css and we didn't want to inject a million separate css files into the page? But if we're gonna be building our own theme we can split them back out into navigable chunks again :)

I try to mimic the directory structure of pydata-sphinx-theme here. They're all sorta by-preference, but roughly -

• components: reusable page features that are somewhat "special" to the theme
• content: styles for basic html elements like lists and footnotes and whatnot
• fonts: fonts
• pages: styles used only on some specific pages
• sections: layout stuff, the sections of a page, where things go
• vendor: other people's styles

Aside from that, none of the styles are changed except:

• replacing hardcoded px values with breakpoints in some places
• thats all i remember?

I'm not sure how the build works with that import from pydata_sphinx_theme at the top of the index, but if it does, then all these should override it since they come later and we can start taking out !important directives too.

[lwasser]

@sneakers-the-rat i LOVE scss for the organization it provides. Thank you for this.

Can you help me understand one thing?

How does the theme know to build the scss and then call the final css file into our html pages?

[lwasser]

This looks great locally, but the header seems to be un-goofy-fied. I'll go ahead and approve and merge, but I'm still curious about how Sphinx knows how to build the CSS in our theme. It seems like it already was setup to do so. I just find that compile step to be mysterious.

[lwasser]

@all-contributors please add @sneakers-the-rat for code,review, ideas

[allcontributors]

@lwasser

I've put up a pull request to add @sneakers-the-rat! 🎉

[sneakers-the-rat]

How does the theme know to build the scss and then call the final css file into our html pages?

haha i thought you set this up!

So it looks like that is configured here:

pyos-sphinx-theme/src/pyos_sphinx_theme/theme/pyos_sphinx_theme/theme.conf

Line 3 in 803ee73

stylesheet = styles/pyos-sphinx-theme.css

and the sass gets built with a node script:

pyos-sphinx-theme/package.json

Line 3 in 803ee73

"build": "sass src/pyos_sphinx_theme/assets/styles/pyos-sphinx-theme.scss src/pyos_sphinx_theme/theme/pyos_sphinx_theme/static/styles/pyos-sphinx-theme.css"

and the magic seems to be here:

pyos-sphinx-theme/pyproject.toml

Line 3 in 803ee73

build-backend = "sphinx_theme_builder"

which generates the assets when building a wheel: https://github.com/pradyunsg/sphinx-theme-builder/blob/45d3f2f53f190864f91f8aa98f52ad8bab178f4e/src/sphinx_theme_builder/_internal/distributions.py#L162

and specifically calls node here: https://github.com/pradyunsg/sphinx-theme-builder/blob/main/src/sphinx_theme_builder/_internal/nodejs.py#L254

[sneakers-the-rat]

The part I don't really understand is where the imported pydata-sphinx-theme css comes from. but maybe we just inherit that automatically by inheriting the theme

[Revathyvenugopal162]

The part I don't really understand is where the imported pydata-sphinx-theme css comes from. but maybe we just inherit that automatically by inheriting the theme

it is in the init file i am adding this as the theme css file. So the step is Scss - > css in package.json
css -> then imported to the packages by init file. BTW thank you for splitting the files.