New color scheme

[jsiegle]

Summary of aesthetic changes:

• implement new color scheme by overriding the CSS in the original PyData template
• new fonts (Bitter for headers, Source Sans for body text)
• new logo
• add favicon

Changes to fix compilation warnings (check that these are ok):

• Add two underscores to external Google sheets links
• Add character before start of commented out tables in libonix-ref.rst
• Add missing files to table of contents
• Fix broken internal links

Changes to dependencies:

• Remove Python 3.8 requirement (I don't think it's necessary to pin a specific Python version, although if someone is using 2.X it will probably break)

[jonnew]

In the logo, there is some weird thing happening where the vertices seem to be very dark making them look like black points

It looks more intense than the logo I've been using and I dont like it.

Also, it might be an optical illusion, but it kinda looks like there is a shadow, and I think flat is better

[jonnew]

Not sure if this is something the custom CSS did, but the space between bullet points is too large IMO:

I seem to recall having this issue without the customs CSS seemly randomly in the past, so it might not be these changes doing it.

[jonnew]

Twitter logo should be black, I think

this is probably another override.

[jonnew]

I have a feeling that less may be more with the banner color. e.g., I dont know if I like the block highlight of the reference section with the color background.

However with a white background, I think it would work really well. This would also solve the twitter link color issue above.

[jsiegle]

In the logo, there is some weird thing happening where the vertices seem to be very dark making them look like black points

This is part of the logo as @jvoigts originally designed it. The colors multiply, rather than being opaque. I would prefer to keep it this way to match what's on the OE homepage.

it might be an optical illusion, but it kinda looks like there is a shadow, and I think flat is better

There is actually a shadow (which I like) but I can easily switch it to flat

Not sure if this is something the custom CSS did, but the space between bullet points is too large IMO

This is an easy fix

Twitter logo should be black, I think

Totally agree, but I'm not sure how to change this

I have a feeling that less may be more with the banner color. e.g., I dont know if I like the block highlight of the reference section with the color background.

Should the active page just change font color, then? Or appear in bold? EDIT: Underline looks pretty good, that would be my suggestion.

[jonnew]

OK. The only thing I think we should try is just not having a block color banner at the top. I think just white like the original pydata theme, while keeping the block highlight, might be best

[jvoigts]

Yea the multiplication effect seems to have gone a bit haywire, I could have a look at the image, this happens sometimes if the multiplication starts with a transparent rather than white background.

I think I'd kill the shadow and I'd be curious to see it with only the selected block having color as Jon suggests, could be good and clean?

[jsiegle]

This is how it looks with the latest updates:

[jonnew]

@jvoigts opinions?

[jvoigts]

Looks good to me! We can always tweak the logo later of we get annoyed by it.

[jonnew]

Cool, Josh can you commit that and I will merge it in?

[jsiegle]

Changes are in there now.

[jonnew]

Im in the process of merging. There seems to be an issue with image scaling though

Any idea how to fix that before i push?

[jsiegle]

Adding:

img {
  max-width: 100% !important;
}

to theme_overrides.css seems to fix it.

You can also add a :width: 700 line in the .rst files to specify the width of each image individually.

[jonnew]

Another issue. When lists are not preceded by text, they appear correctly:

However, when indented, they still have double spacing:

[jonnew]

With respect to hardcoding widths, I think this is a bad idea. A lot of people are starting to e.g. look at things like this on ipads when doing their debugging

[jvoigts]

With respect to hardcoding widths, I think this is a bad idea. A lot of people are starting to e.g. look at things like this on ipads when doing their debugging

Agreed - almost all templates should now have dynamic layouts where things re-arrange nicely down to phone widths sometimes thats done with simple unit choices like % widths but often they switch styles depending on page width cutoffs. I dont have time to look into it in detail today but my first guess is that the base template used to do this correctly?

[jsiegle]

It doesn't seem like there's a way for Sphinx to specify relative image size, but adding max-width: 100%; to the CSS makes all of the images scale nicely with the window.

Re: lists, all cases looks good to me with the latest changes. I made the CSS selectors more general, and also added coverage for ordered + unordered lists.

[jonnew]

Thanks Josh, merged.