The gallery thumbnails are too small

[seisman]

Description of the problem

Here is a comparison between the PyGMT gallery and the matplotlib gallery

PyGMT	Matplotlib

You may notice that the PyGMT gallery thumbnails are always smaller than the ones in matplotlib and sphinx-gallery. The reason is that we limit the max width of images to 80% in the CSS:

https://github.com/GenericMappingTools/pygmt/blob/aff5db7f0f3d13e75313648528a50edcd2500b80/doc/_static/style.css#L41-L43

We made the change in #420 to avoid too large badges in the changelog file (https://github.com/GenericMappingTools/pygmt/pull/420#issuecomment-622162738). Apparently, the 80% CSS style is not ideal, and it affects all images.

The simplest solution is changing max-width to 100%. Here is a comparison if we change the max-width to 100%. The gallery thumbnails look larger and better.

max-width=80%	max-width=100%

However, it also increases the size of other images to 100%. For example,

max-width=80%	max-width=100%

To me, 80% max-width looks better for these individual large images, but 100% max-width looks better for gallery thumbnails.

We should find a way to control the different settings of the two groups of images.

BTW, looking at the matplotlib gallery, I think we can also:

• add a box to each thumbnail
• centering the titles of the gallery examples

[maxrjones]

I agree that 100% max-width looks better for the thumbnails. For the ROSES tutorial (and generally files in the .rst files), we can just set the width to 80% in the figure directive rather than relying on max-width. For any fig.show() output, I think it could be better to not scale the images at all given that it obscures the purpose of the width or height in -J.

[willschlitzer]

I agree that bigger thumbnails look better.