DOC/website: Redesign landing page of PyGMT website

[yvonnefroehlich]

Description of proposed changes

Currently trying out different ideas and approaches regarding improving the PyGMT website, especially the landing page. Seeing / experimenting how different layouts would look like, using grids, cards, buttons, and icons (xref: https://sphinx-design.readthedocs.io/en/rtd-theme/index.htm).

Fixes #4746

Disscussion (see also issue #4746)

• How many cards do we want?
• Use same structur as side bar? One card per main sections or cards only for specific topics?
• Coloring of cards? Globally or different for the landing page and External Resources?
• Add a new main section Project Overview (or similar)? Reorder sidebar partly?

Preview

• Landing page: https://pygmt-dev--4762.org.readthedocs.build/en/4762/
• Project Overview/Why PyGMT?: https://pygmt-dev--4762.org.readthedocs.build/en/4762/overview.html
• Project Overview/Citing: https://pygmt-dev--4762.org.readthedocs.build/en/4762/citing.html
• Project Overview/Conference Presentations: https://pygmt-dev--4762.org.readthedocs.build/en/4762/conferences.html
• External Resources: https://pygmt-dev--4762.org.readthedocs.build/en/4762/external_resources.html

(I)	(II) a	(II) b

Major changes

• Use cards on landing page
  • (I) Cards similar to the main sections: 6 cards as 3 columns and 2 rows (laptop) or vertical (smartphone), buttons for subsections
  • (II) a / b Card for specific topics: 9 cards as 3 columns and 3 rows (laptop) or vertical (smartphone)
• Add new section Project Overview
  • Why PyGMT
    • Project Goals <- from README
    • Background <- from Getting Started/Overview
    • Support <- from README (maybe rename to Funding)
    • Related Projects <- from README
  • PyGMT Ecosystem <- from Reference Documentation
  • Citing PyGMT with G^3 paper and Zenodo BibTex <- from README
  • Conference Presentations <- from Getting Started/Overview
• Reorder sidebar
  • Overview to Project Overview/Background, Conference Presentations (before Getting Started)
  • Minimum Supported Version to Getting Started (before Reference Documentation)
  • PyGMT Ecosystem to Project Overview (before Reference Documentation)
  • Changelog to Development (before Reference Documentation)

Make things look nice

• Centering text on landing page
• Vertical spaces between PyGMT logo and text on lading page
• Add icons to the headings of the cards
• Use buttons instead of bullet point lists

General things

• Add PyGMT logo on landing page via Sphinx markdown instead of html
• Links / URLs: In the README we use latest. This is fine for GitHub, but not optimal for the website as dev links to latest of the linked doc page not dev -> Rewrite text for docs, do not reuse from README
• Rename section Getting Help and Contributing to Getting Help -> Where?
• Sort tutorials on the External Resoures page by year (or date)
• Add possiblity to link to main sections -> Needed?

Resources

• https://sphinx-design.readthedocs.io/en/rtd-theme/index.html
• https://sphinx-design.readthedocs.io/en/rtd-theme/grids.html
• https://sphinx-design.readthedocs.io/en/rtd-theme/cards.html
• https://sphinx-design.readthedocs.io/en/rtd-theme/badges_buttons.html#octicon-icons
• https://sphinx-design.readthedocs.io/en/rtd-theme/badges_buttons.html#buttons
• https://sphinx-design.readthedocs.io/en/rtd-theme/css_variables.html
• https://sphinx-design.readthedocs.io/en/rtd-theme/css_classes.html

[seisman]

Move "team" after "maintenance".

Suggested change

	:::{button-ref} team
	:color: secondary
	:outline:
	:shadow:
	:::
	:::{button-ref} contributing
	:color: secondary
	:outline:
	:shadow:
	:::
	:::{button-ref} maintenance
	:color: secondary
	:outline:
	:shadow:
	:::
	:::{button-ref} contributing
	:color: secondary
	:outline:
	:shadow:
	:::
	:::{button-ref} maintenance
	:color: secondary
	:outline:
	:shadow:
	:::
	:::{button-ref} team
	:color: secondary
	:outline:
	:shadow:
	:::

[seisman]

Suggested change

	contributing.md
	maintenance.md
	team.md