DOC: Add PyGMT logo to README & docs

[michaelgrund]

Description of proposed changes

Since we now have a logo (#1404) we should think about in which format we want to place it in our README/docs. I would suggest to use the horizontal one. Would also suggest to add the subtitle A Python interface for the Generic Mapping Tools. Maybe @sfrooti may add that to the prepared logos. Also need to increase the resolution. Finally, the yellow lines do not really stand out from the background.

• Landing page
• Sidebar
• Favicon
• GitHub README

Previews:

• https://pygmt-dev--3845.org.readthedocs.build/en/3845/
• https://github.com/GenericMappingTools/pygmt/tree/add-pygmt-logo

favicon

[seisman]

Thanks for opening the PR so that we can better preview what the logo looks like on the web or PDF. Just want to note that the logo is not finalized yet, and we may tweak the logo based on the community responses.

[seisman]

@michaelgrund Please help replace the favicon doc/_static/favicon.png, and also maybe add a logo to the title at the sidebar by setting html_logo to an image path in doc/conf.py.

[michaelgrund]

@michaelgrund Please help replace the favicon doc/_static/favicon.png, and also maybe add a logo to the title at the sidebar by setting html_logo to an image path in doc/conf.py.

Not sure if it works with direct URL references like I did.

[seisman]

@michaelgrund Please help replace the favicon doc/_static/favicon.png, and also maybe add a logo to the title at the sidebar by setting html_logo to an image path in doc/conf.py.

Not sure if it works with direct URL references like I did.

It seems not working. Could you please add the static images to the repository instead? The PyGMT banner on the landing page also needs to be updated

pygmt/doc/index.md

Lines 4 to 10 in eb0ebe7

	<divclass="banner">
	<h1>PyGMT<h1>
	<h2>
	A Python interface for the
	<a href="https://www.generic-mapping-tools.org/">Generic Mapping Tools</a>
	</h2>
	</div>

[michaelgrund]

FYI, currently the original images stored in @sfrooti's repo are saved in our doc/_static/. When the logo refinements are done I suggest to generate the needed versions as static pngs and store them instead of the currently used ones.

[yvonnefroehlich]

I am a bit debating on using the dark theme logo for the side bar, because of blue (dark) background there.
This improves the readbility of the wordmark.

sidebar with light logo	sidebar with dark logo

[michaelgrund]

I am a bit debating on using the dark theme logo for the side bar, because of blue (dark) background there. This improves the readbility of the wordmark.

sidebar with light logo sidebar with dark logo

Agree, with the light version, at least the "Py" part is hard to read on the blue background of the sidebar.

[seisman]

I agree. what if we change the sidebar color？

[yvonnefroehlich]

I agree. what if we change the sidebar color？

Just looked, and it seems possible to change the fill color of the box at the top of the sidebar via adding

/* Change background color of sidebar top box with logo, version and search bar */
.wy-side-nav-search {
background:#b4c7e7;
}

to the doc\_static\style.css file (xref: https://stackoverflow.com/a/54304990/20936303).

Changing the color of this box would help to also improve the contract between the blue circle of the logo and the background. Any preferences on the color? Maybe just keep blue, but a ligther hue:

[seisman]

The new color looks good

[yvonnefroehlich]

The new color looks good

Fine. Include this color change in this PR or have a separat one?
@michaelgrund any comments on the color?

[michaelgrund]

The new color looks good

Fine. Include this color change in this PR or have a separat one? @michaelgrund any comments on the color?

Looks good!