PR: Prep for V2 release with over a year of improvements and additional features for Spyder site

[CAM-Gerlach]

There has been well over a year of downstream enhancements and features on the theme after using it on a variety of sites, including a school club, a rocket launch tour organization, and even an interactive scientific data dashboard. This PR pulls those back in to the upstream theme, along with a number of further improvements and changes needed to finally port Spyder's own website from Lektor-Icon V0 to this beta of V2 as part of spyder-ide/website-spyder#177 . It should be fully backwards-compatible with only minor styling changes (mostly straight improvements); the example site built with no errors and a similar or improved appearance with no changes after V2.

This also adds Netlify support, so that the theme's changes can be previewed on the example site.

A followup PR will do the final tasks necessary for he the formal V2 release (not included here to avoid blocking spyder-ide/website-spyder#177 ): updating the test site to take full advantage of the new lektorproject and theme options, updating the readme with the new theme parameters and other changes, doing final conformance/style checks, and updating the changelog, readme, contributing guide, roadmap, and version file for the release.

[ccordoba12]

This looks great! Thanks a lot @CAM-Gerlach for your work!

I have two minor comments about it:

• Section headers are now underlined in red

  

  whereas in the current version we use a light gray color for that

  

  I'd prefer to leave the current style for now (we can discuss to change it in another PR).

• The red of "Open chat" is not the same as the one used in the rest of the page. It's a lighter shade, as can be seen here:

[CAM-Gerlach]

Sorry for the confusion, this PR is just the V2 changes to the underlying theme, rather than those to the Spyder site itself, which uses different flowblocks, theme settings and custom styles along with incorporating the improvements here (and in V1, merged long ago). So its likely easiest for you to just review it there so you can see how it looks on the actual Spyder site, and if I do have to fix something on the theme level (like the chat icon position, in the future) I'll make it here, like we did reviewing @dalthviz 's sphinx theme.

Section headers are now underlined in red

Ah yes, this was done years ago in v1.0 and is used by the many other sites that now use Lektor-Icon, so the simplest way to change it without breaking backward compat is just do it in one line in the custom stylesheet on the website repo. If you guys agree on that I'll go ahead with it, it will only take a few seconds; just let me know.

The red of "Open chat" is not the same as the one used in the rest of the page. It's a lighter shade, as can be seen here:

Actually, this is the current intended behavior (though in V1 I believe it was reversed); the buttons all use theme_pipe_color (a lighter variation of the accent color, so named because it was originally used just for the pipes in the header and footer, so they'd have higher contrast from the background, and the name was kept for backward compatibility) as their color when not hovered, and the darker theme_accent_color (the red color used most other when the user hovers over or presses them (as is typical for buttons).

We could add a new theme option, theme_dark_accent_color or similar, to use for this purpose (which we'd set to the darker red Isabella came up with, at least for our site) and shift the normal button color down to theme_accent_color. Whatever you all like best.

[ccordoba12]

Section headers are now underlined in red

We discussed this with Isabella and agreed they look nice. So there's no problem with that at the end.

We could add a new theme option, theme_dark_accent_color or similar, to use for this purpose

Ok, sounds good to me.

[ccordoba12]

I think this is almost ready! Thanks @CAM-Gerlach!

My last comments:

• The logo font size is a bit bigger here (2.2em) than in our current website (2em):

  

• The footer background color is slightly different (#333333) than in our current website (#414042):

  

• We agreed on having four lines in the footer:

  • Social media
  • Copyright and licenses
  • Where template and icons were taken from.
  • Contributors.

  Since there are five lines now, you could remove Maintained by Spyder IDE in the last one and add Rewirte by C. A. M Gerlach to the fourth one (after Lektor port by Dalthviz).

[CAM-Gerlach]

@ccordoba12 I apologize for any confusion; as I mentioned previously, this PR is just the underlying theme improvements that will affect all sites using the theme (quite a few now, at least one with >500 Github stars), while how the changes actually look on Spyder's own site is the subject of spyder-ide/website-spyder#177 . I have addressed each of these issues there; your first and second items are already resolved.

As for the third, as I discuss there the theme-side credit block cannot be changed site-side (for both technical and legal reasons) and will affect all our users. The above proposal (left) presents several problems: even with cut-down text and hand-tuned line breaks, its still two lines on smaller screens/mobile (where space matters the most), has a less clean and balanced layout vs. the current (right) and doesn't include the link to the Spyder site, which gives us credit, increases our visibility and boosts our search rank, making it easier for users to find our site and docs.

However, after trying various techniques, the one workable approach I found to get the theme credit block down to 3 lines was reverting to a cut-down version of the Lektor-Icon v1 text:

So, while I prefer the current implementation, if 6 vs. 5 total lines in Spyder site footer (7 vs. 6 on mobile) is a deal-breaker for you, I can go ahead and implement this instead. Just lmk.

[ccordoba12]

I have addressed each of these issues there; your first and second items are already resolved.

Ok, thanks for that! And sorry for the confusion about where changes need to go.

The above proposal (left) presents several problems: even with cut-down text and hand-tuned line breaks, its still two lines on smaller screens/mobile (where space matters the most), has a less clean and balanced layout

Ok, I haven't considered issues in mobile screens. That's a very good point, thanks for bringing it up!

the current (right) and doesn't include the link to the Spyder site, which gives us credit, increases our visibility and boosts our search rank, making it easier for users to find our site and docs.

Good points too.

So, while I prefer the current implementation, if 6 vs. 5 total lines in Spyder site footer (7 vs. 6 on mobile) is a deal-breaker for you, I can go ahead and implement this instead. Just lmk.

Given your rationale, I think we could go with 5 lines. But let's see what @dalthviz thinks about this.

[dalthviz]

Sure go ahead with 5 lines 👍

[CAM-Gerlach]

So @ccordoba12 are you saying I should go ahead with this one

or keep the new one

Not sure which 5 lines you're referring to jeje. Whatever you want I'll go ahead with but I want to make sure I know which that is :).

[ccordoba12]

or keep the new one

Sorry for the confusion. I think we should keep the new footer.

@dalthviz?

[ccordoba12]

Thanks @CAM-Gerlach for your hard work on this one! The enhancements you added to the theme look great!

[CAM-Gerlach]

@ccordoba12 Thanks, Merging this does commit us to merging spyder-ide/website-spyder#177 without further theme changes (unless we want to open another PR and relink it to that) but at least from my side, it should be ready; I addressed all the deltas except the one that wasn't technically practical (at least without major work by someone smarter than me, like @dalthviz ).

In any case, as soon as that gets merged, I can proceed immediately with the followup PR, which will remove Spyder Reports, make it use the same logo and style as the docs navbar, reduce the size of the screenshot to prevent overflow, link the panes to their docs and the sponsors to their sites, and fix some textual issues and out of date content on the main page.