Prepare for better PST alignment by jarrodmillman · Pull Request #329 · scientific-python/scientific-python-hugo-theme

jarrodmillman · 2023-10-26T06:09:45Z

No description provided.

netlify · 2023-10-26T06:09:49Z

✅ Deploy Preview for scientific-python-hugo-theme ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`b347218`
🔍 Latest deploy log	https://app.netlify.com/sites/scientific-python-hugo-theme/deploys/65401a825ca2cb0008c4a374
😎 Deploy Preview	https://deploy-preview-329--scientific-python-hugo-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 80 Accessibility: 100 Best Practices: 100 SEO: 89 PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

stefanv · 2023-10-27T19:38:28Z

Menu font size should be smaller than text font.

PDST:

Ours:

stefanv · 2023-10-27T19:40:19Z

Not sure what (if anything) to do about it, but headers with pre look strange with the boxes around them. Maybe for headers turn off boxes? I don't think there are any examples of this in PDST:

stefanv · 2023-10-27T19:42:15Z

When reloading this page, the page flashes light mode and then goes dark:

https://deploy-preview-329--scientific-python-hugo-theme.netlify.app/examples/kitchen-sink/

(I have dark mode enabled by default.)

I suspect this can be fixed by ensuring that dark.js runs first of all JS.

Alternative solution: set root element display to none and change that in the same JS that handles theming. This will definitely mess up the page for people without JS.

stefanv · 2023-10-27T19:49:43Z

Could we render kitchen sink straight into /examples? Otherwise, it takes two clicks to get there: https://deploy-preview-329--scientific-python-hugo-theme.netlify.app/examples/

stefanv · 2023-10-27T19:51:33Z

Here we're still using the old typography for the heading:

stefanv · 2023-10-28T00:12:12Z

I aligned the title rendering with PDST, but now there is a gap between the title and text to take care of. Classes .title and .section-title may also need to be removed from our CSS.

jarrodmillman · 2023-10-28T07:40:03Z

Following on @stefanv comment on the font for the shortcuts, I would like them to follow the pydata-sphinx-theme (pst). In addition to the size being smaller, there are likely other issues.

For example, code literals aren't rendered correctly. Here is what the look like with this PR:

Here is how they look on the pydata site:

This is a separate issue, but I would also like to have the breadcrumbs like pst. And we should consider whether we want to have a section navigation and move on-this-page navigation to the right when we do. If the homepages don't have a lot of text it makes sense to just have an on-this-page navigation. But, for the development guide (https://learn.scientific-python.org/development/) it will need a site navigation menu. That site doesn't currently have on-this-page navigation, but I think it should. Anyway, we can deal with that when we port the development guide over.

We should probably move the on-this-page navigation to the left side, since users will be using this site with pydata-sphinx-theme and having to switch which side you are looking on is annoying. At any rate, we can fix the size for now and then come back in a separate PR or two and fix the navigation in general.

jarrodmillman · 2023-10-28T07:51:27Z

Could we render kitchen sink straight into /examples? Otherwise, it takes two clicks to get there: https://deploy-preview-329--scientific-python-hugo-theme.netlify.app/examples/

The initial purpose of this PR was to put the scaffolding in place for future PRs. I should have mentioned, but I didn't initially expect the scope to get as big as it did. I called this PR "kitchen sink admonitions" because I was wanted get this content/examples/kitchen-sink directory structure in place for future PRs. Some PRs will add to the kitchen sink and some will add to the same level as kitchen sink under examples.

jarrodmillman · 2023-10-28T08:06:06Z

Not sure what (if anything) to do about it, but headers with pre look strange with the boxes around them. Maybe for headers turn off boxes? I don't think there are any examples of this in PDST:

This is what pydata-sphinx-theme does (see above).

stefanv · 2023-10-28T19:40:13Z

I think I addressed most of the remaining concerns:

d1de9a9 Align title rendering with PDST
f8044fb Move shortcuts to right side, as in PDST
80338e5 Move kitchen sink directly into examples
0d63ee2 Render literals in shortcuts
86291c0 Reduce shortcuts text size
9fec120 Add breadcrumbs

stefanv · 2023-10-28T19:43:33Z

The fix that I had for spacing out two headers in a row (document that starts with h1 h2 headers didn't quite pan out. Leaving that for another PR.

stefanv · 2023-10-28T21:03:10Z

Reminder to self: update docs that explain how to generate code highlight themes.

jarrodmillman · 2023-10-30T20:14:09Z

git switch kitchen-sink-admonitions
git reset --hard 5b4e60c

git reset --hard 2087d46
git reset 21973c1
git add -u
git add doc/content/examples/_index.md doc/content/examples/kitchen-sink/_index.md
git commit --amend

git cherry-pick 690dbbb
git cherry-pick 5870fec
git cherry-pick f49cad7
git cherry-pick 27a9612
git cherry-pick ab13d16
git cherry-pick 22ed707
git cherry-pick 79fb314
git cherry-pick de8b24c
git cherry-pick 221d7d7

git cherry-pick be725e2
git cherry-pick e2930b2

git reset --soft HEAD~2
git commit -m "Improve title rendering"

git cherry-pick a447aae
git cherry-pick d089b5f
git cherry-pick 4393f5f
git cherry-pick 29c54da
git cherry-pick db87e11
git cherry-pick 891c892
git cherry-pick 5b4e60c

git push -f jarrod kitchen-sink-admonitions

perl -pi -e 's:var\(\-\-colorText\):var(\-\-pst\-color\-text\-base\):g' assets/theme-css/content.css perl -pi -e 's:var\(\-\-colorText\):var(\-\-pst\-color\-text\-base\):g' assets/theme-css/posts.css perl -pi -e 's:var\(\-\-colorText\):var(\-\-pst\-color\-text\-base\):g' assets/theme-css/panel.css perl -pi -e 's:var\(\-\-colorText\):var(\-\-pst\-color\-text\-base\):g' assets/theme-css/shortcuts.css sed -i '/\-\-colorText\: /d' assets/theme-css/light-mode.css sed -i '/\-\-colorText\: /d' assets/theme-css/dark-mode.css

perl -pi -e 's:var\(\-\-colorBackground\):var(\-\-pst\-color\-background\):g' assets/theme-css/styles.css sed -i '/\-\-colorBackground\: /d' assets/theme-css/light-mode.css sed -i '/\-\-colorBackground\: /d' assets/theme-css/dark-mode.css

This is from https://github.com/Quansight-Labs/accessible-pygments and is used by the PyData Sphinx Theme.

- Remove divider - Remove `title` and `section-title` classes

jarrodmillman added the type: Enhancement New feature or request label Oct 26, 2023

jarrodmillman marked this pull request as draft October 26, 2023 06:09

jarrodmillman marked this pull request as ready for review October 26, 2023 08:38

jarrodmillman marked this pull request as draft October 26, 2023 08:38

jarrodmillman force-pushed the kitchen-sink-admonitions branch 4 times, most recently from 3ee970c to 168e0fa Compare October 27, 2023 19:26

jarrodmillman force-pushed the kitchen-sink-admonitions branch 3 times, most recently from 6ac334c to dd0b841 Compare October 27, 2023 20:53

stefanv force-pushed the kitchen-sink-admonitions branch 2 times, most recently from b46aba8 to 554e902 Compare October 28, 2023 19:14

jarrodmillman force-pushed the kitchen-sink-admonitions branch 3 times, most recently from cb7ed3f to e09d941 Compare October 30, 2023 20:08

jarrodmillman changed the title ~~Kitchen sink admonitions~~ Add PST kitchen-sink scaffolding Oct 30, 2023

jarrodmillman marked this pull request as ready for review October 30, 2023 20:31

jarrodmillman force-pushed the kitchen-sink-admonitions branch from e09d941 to 5efe4aa Compare October 30, 2023 20:47

jarrodmillman and others added 11 commits October 30, 2023 13:52

Add kitchen-sink admonitions and typography

3542e09

Fix text on dark blue backgrounds

0e8fe7f

Add overflow for pre

1909bc4

Render header anchors

febf704

Render code markup more similarly to PDST

6f65f6f

Add a11y_light code highlighting theme for light mode

d3f0aff

This is from https://github.com/Quansight-Labs/accessible-pygments and is used by the PyData Sphinx Theme.

Align title rendering with PDST

e79a747

- Remove divider - Remove `title` and `section-title` classes

Move shortcuts to right side, as in PDST

2bdf2ce

Improve title rendering

6d0a3ea

jarrodmillman force-pushed the kitchen-sink-admonitions branch from 5efe4aa to f16f9ce Compare October 30, 2023 20:52

jarrodmillman changed the title ~~Add PST kitchen-sink scaffolding~~ Prepare for better PST alignment Oct 30, 2023

stefanv added 7 commits October 30, 2023 14:04

Render literals in shortcuts

27e3f9e

Reduce shortcuts text size

255e3a3

Add breadcrumbs

f217444

Add toctree rendering

6d75ecf

Factor out breadcrumbs into separate partial

59c3932

Simplify/make consistent rendering of title/subtitle

630dfbb

Allow footer to cover entire page

b347218

jarrodmillman force-pushed the kitchen-sink-admonitions branch from f16f9ce to b347218 Compare October 30, 2023 21:05

stefanv approved these changes Oct 30, 2023

View reviewed changes

jarrodmillman merged commit 84b02ce into scientific-python:main Oct 30, 2023

jarrodmillman deleted the kitchen-sink-admonitions branch October 30, 2023 21:14

jarrodmillman added this to the 0.3 milestone Oct 30, 2023

jarrodmillman mentioned this pull request Oct 31, 2023

Importing styles from pydata-sphinx-theme #302

Open

8 tasks

stefanv mentioned this pull request Oct 31, 2023

Wip/225 unify pydata sphinx theme #296

Closed

Conversation

jarrodmillman commented Oct 26, 2023

Uh oh!

netlify bot commented Oct 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for scientific-python-hugo-theme ready!

Uh oh!

stefanv commented Oct 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stefanv commented Oct 27, 2023

Uh oh!

stefanv commented Oct 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stefanv commented Oct 27, 2023

Uh oh!

stefanv commented Oct 27, 2023

Uh oh!

stefanv commented Oct 28, 2023

Uh oh!

jarrodmillman commented Oct 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jarrodmillman commented Oct 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jarrodmillman commented Oct 28, 2023

Uh oh!

stefanv commented Oct 28, 2023

Uh oh!

stefanv commented Oct 28, 2023

Uh oh!

stefanv commented Oct 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jarrodmillman commented Oct 30, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Oct 26, 2023 •

edited

Loading

stefanv commented Oct 27, 2023 •

edited

Loading

stefanv commented Oct 27, 2023 •

edited

Loading

jarrodmillman commented Oct 28, 2023 •

edited

Loading

jarrodmillman commented Oct 28, 2023 •

edited

Loading

stefanv commented Oct 28, 2023 •

edited

Loading