Improve portal landing page and About content

[brian-rose]

Addresses #116

Also addresses #214 by explicitly mentioning Pangeo in the the landing section.

[github-actions]

This pull request is being automatically built with GitHub Actions and Netlify. To see the status of your deployment, click below.

🔍 Git commit SHA: 95e760d
✅ Deployment Preview URL: https://622119edcc331c472431a4a3--projectpythia-org.netlify.app

[brian-rose]

To do:

• Make link text readable
• Improve the visuals with some graphics. It would be nice to have the Pythia and Pangeo logos both prominent within the landing section
• Finish updating the About page
• Increase font sizes in the landing section?

[brian-rose]

Pinging @kmpaul, I have some questions about the Pythia Sphinx theme.

If you take a look at the preview for this PR, you'll see that I have some new text for what I'm calling the "Landing" section, i.e. the topmost section of the main page that uses the "Temple" background image. The text is shorter and snappier! And also includes some links.

This raises two related issues:

1. Can we increase font size just for this section? That would both make the snappier text more prominent, and also fill up a little more space so less of the Temple background is cut off
2. Can we change the link text color for this section so that it's visible over top of the blue background?

I'm not sure if these require changes to the theme, or if I can customize in this repo. Any guidance?

[kmpaul]

All of these can be changed with custom CSS (see the portal/_static/custom.css file).

[brian-rose]

Ok, that's encouraging!

I'll need a bit more guidance since I know nothing about CSS. Is there a simple way to specify formatting so that is applies just to that landing section of the page?

[kmpaul]

@brian-rose: So, here's what you probably want to add to the portal/_static/custom.css file:

main.banner-main #project-pythia {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

main.banner-main #project-pythia p {
  font-size: 1.6rem;  /* default: 1.25rem */
  /* font-weight: 700; default: 300 */
}

Both of these specifications will apply to only the div element with the id="project-pythia" attribute, and it will further limit this to only the main page that has the banner-main class on the main element (which is the landing page only). The first block above you can use to add padding to the top and bottom of the banner section, so that it displays more of the background image. The second block can be used to increase the font-size and font-weight to make it bigger and bolder, if you want. Personally, I recommend deleting the font-weight line, just because I think that a font weight of 300 is fine.

Feel free to tweak the font-size, font-weight, and padding to make it look nice. The values I gave above are just suggestions, but they may work.

[kmpaul]

@brian-rose: Here are some suggestions. They aren't necessary, but I think it is a little cleaner. Your choice. I'm rather opinionated, so take this with a grain of salt.

[kmpaul]

@brian-rose: I love the section about "Why the name Pythia?"

[brian-rose]

@brian-rose: Here are some suggestions. They aren't necessary, but I think it is a little cleaner. Your choice. I'm rather opinionated, so take this with a grain of salt.

Great! Thanks, I was out of my element with the CSS and I appreciate the suggestions. I think your version will get us closer to what I had in mind originally.

[kmpaul]

There was an error in my previous suggestions. This fixes it.

[kmpaul]

This link needs fixing. The trailing slash breaks the link.

[kmpaul]

Trying to fix headerlink hover color.

[kmpaul]

Whoops! Fixed!

[kmpaul]

@brian-rose: Okay. I'm done futzing. I tweaked it and I think I fixed everything I messed up. 😄

[kmpaul]

What if we changed the subheading to read:

"A community education and training hub for Pangeo"

And then at the bottom of the section, instead of just a button taking you to the About section, also add a button taking you to Pangeo.io?

[brian-rose]

What if we changed the subheading to read:

"A community education and training hub for Pangeo"

And then at the bottom of the section, instead of just a button taking you to the About section, also add a button taking you to Pangeo.io?

I like that. I can mock that up right now so we can possibly discuss at the IWG meeting today. (although it's more "content" than "infrastructure")

[brian-rose]

As mentioned at today's IWG meeting, please leave comments here about both the text and the styling!

One issue with the current wording, "An education and training hub for the Pangeo community", is that it may seem too exclusive for visitors that aren't already familiar with Pangeo.

[kmpaul]

One issue with the current wording, "An education and training hub for the Pangeo community", is that it may seem too exclusive for visitors that aren't already familiar with Pangeo.

@brian-rose: Yes. You're right about the specificity. Maybe that subheading should change, again. What about:

"An education and training hub for the geoscientific Python & Pangeo community"

Or maybe just:

"An education and training hub for the geoscientific Python community"

and then a subsubheading saying "A subsidiary of Pangeo" 😄

[kmpaul]

Now that I've thought of it a bit more, I actually wonder if the subheading should not change from what it currently is (i.e., "An education and training hub for the Pangeo community") and then just add a single, short sentence about Pangeo in the paragraph below. Something like "Pangeo is a community of practice to support geoscientists in open source and open science, notably around Python."

[dcamron]

@kmpaul I appreciate your thoughts here! I initially brought up concern about the wording at the meeting, and my preference is to combine both of your comments:

Project Pythia
An education and training hub for the geoscientific Python community

Project Pythia exists to help geoscientists make sense of huge volumes of numerical scientific data using tools that facilitate open, reproducible science. ...working alongside communities like Pangeo...

I'm struggling with specific wording at this very moment, but wanted to get my thoughts out here sooner rather than later.

[jukent]

Looks great!

[kmpaul]

@brian-rose: There are 2 options for fixing the alignment in the buttons.

The easiest option is to set style="display: flex; align-items: center;" in the a tags used for the buttons. That will vertically align the contents of each button. But this might also require changing the "gaps" between the images and the text inside the button. For example, you might want to set style="margin-left: 0.5rem;" on the images in the buttons, too, so there is a good gap between the images.

The second option is more of an opinionated stylistic choice. Why have the About text in the buttons at all? Why not just have the images? Personally, I think that looks better, but maybe it doesn't convey what you want. Second, without the text, you can set the height of all of the img tags to the same value (e.g., height="35px") and that will guarantee that they look centered in the buttons. You may want to change the "PANGEO" image to height="25px" for balance, but that's your choice.

If you have a preference of which one of these options you prefer, I can make a review with these suggestions, and then you can implement them with a click. But I feel like suggesting 2 different options in a single review is confusing.

[brian-rose]

Thanks @kmpaul. I tried out both, and decided I prefer the words "About" to appear in the buttons. We can debate that at today's EWG meeting.

[kmpaul]

@brian-rose: Sounds good. If you want to keep the "About" text in the button, then I think it looks a little better to match the font-weight to the apparent font weight in the logo/image text, so it looks like it matches. I also think that you should turn off text decoration in the buttons, so the two kinds of text don't appear different from each other. I'll add some suggestions for how to do this in a review.

[kmpaul]

Here are some suggestions for how to match the "About" text to the appearance of the image text, as well as possible.

[kmpaul]

This change adds the Pangeo "about" link.

[brian-rose]

Ok I think I'm done tinkering! Personally I really like the look of the button now. Thanks again @kmpaul for all the formatting help.

I have added a table of links to Pythia presentations at the bottom of the About page to this PR.

Ready (again) for reviews now.

[kmpaul]

@brian-rose: This is awesome! Thanks for doing this!

[jukent]

Beautiful!

[brian-rose]

Thanks all! With two approvals, I'm going to merge now. Maybe we can revisit the debates about wording and branding the next time we refresh the main page.