Add a "Learn" page

[jvns]

We talked about making a "Learn" page in #2046 and folks seemed enthusiastic, so I took a stab at making a basic page. You can see it here: https://jvns.github.io/git-scm.com/learn. The idea is now that "Reference" links directly to the reference documentation, and that the old /doc/ page will redirect to the reference documentation.

I used Font Awesome icons (GPL compatible) because there was no "Learn" or "Videos" icon, and I wanted the icons to match. I also moved a couple of things to use flexbox/grid honestly because I have never learned how float: left works and so it was much easier for me to make the changes I needed to make by using flexbox or grid. Happy to come up with a different approach if folks are concerned about grid availability in browsers.

I removed links to a couple of cheat sheets on the "Docs" page. Potentially worth adding those back later if/when "External Links" gets revisited. (I'm collecting some resources here)

Problems I still need to resolve:

• Fix dark mode on both homepage and learn page
• Need to rebuild book so that it appears in the "Learn" section instead of "Documentation", as well as the docs to set up the redirect. And test that the /doc => /docs/ redirect actually works.
• I haven't thought too hard about the page's copy yet. I think it would be nice to describe the videos and the book a tiny bit more. (I think I'm out of ideas here right now)
• The cheat sheet isn't actually there yet, need to rebase once Add a Git cheat sheet #2049 is merged

This closes #2055

[To1ne]

Amazing!

[To1ne]

@jvns The big orange button to "Read the book" is a bit distracting. It pulls in too much attention making you think you need to click it before you can continue to the next step (next box) in the "Learn" process.

[To1ne]

I wonder if GUIs also belong under Learn? I think they are too far hidden under Download.

[To1ne]

I like you've put "Learn" front and center as well:

Before	After

I'm not fully sold on the Font Awesome icons, they don't really fit the style I think. But since we don't have access to a graphic designer at the moment, I think that's the best we've got.

I love the squircles though!

[jvns]

Can you say what it is about the Font Awesome icons? I'm wondering if there are some easy tweaks to make it feel better. For me I think "book" icon and the "download" icons are my least favourites, I liked how the original book icon had pages.

The squircles were actually an accident -- what happened was that the circles were cutting off part of the image, so I made it a squircle instead to fix that. I'm glad you think it works!

[jvns]

Removed the "Read the book!" button, I don't think it's necessary since that div is already highlighted.

I tried adding "GUI Clients" under "Learn" but it didn't feel right to me. Maybe a separate Tools section, kind of like https://www.rust-lang.org/tools? There are other great Git tools out there other than GUI clients that could be featured, like https://pre-commit.com/ or git-absorb

[To1ne]

Can you say what it is about the Font Awesome icons?

@jvns I'm purely talking from a personal taste. But I think they are too roundish. As far as I know they are designed to work at smaller size, and upsizing them makes them also a little too bold for my taste (compare the speech bubbles for example, line width is too thick now). And the corners are too round for my liking.

Removed the "Read the book!" button, I don't think it's necessary since that div is already highlighted.

💜

I tried adding "GUI Clients" under "Learn" but it didn't feel right to me. Maybe a separate Tools section, kind of like https://www.rust-lang.org/tools?

Sounds good. But can happen separately. Shall I file and issue?

There are other great Git tools out there other than GUI clients that could be featured, like https://pre-commit.com/ or git-absorb

And I think TUI tools (like lazygit) and editor extensions are better separated too.

[To1ne]

Sounds good. But can happen separately. Shall I file and issue?

#2070 done!

[jvns]

I've rebased this and fixed the issues I saw. I tried to look for icon packs briefly but didn't find anything, but hopefully it's easy to change the icons later if we find something better. Need to wait for CI to make sure that no links are broken.

[To1ne]

I tried to look for icon packs briefly but didn't find anything, but hopefully it's easy to change the icons later if we find something better.

Yeah, don't worry about them right now. I've opened #2077

[dscho]

I like the new structure!