modernizing the ui

[Paulie-Aditya]

Changes

Working on Modernizing the visuals of the website.

Context

#2060

[Paulie-Aditya]

Some improvements I can think of, @To1ne if you could approve of these I can get started on them :

• Adding a copy button to each of the code blocks for better ux
• Small base font size (14px instead of modern 16px standard)
• Inconsistent line heights
• Mixed unit usage
• No clear type scale system
• Code blocks have relatively small text (line-height: 18px)

Current performance (Used Lighthouse):

[To1ne]

Current performance (Used Lighthouse):

@Paulie-Aditya That's not that bad actually.

---

• Adding a copy button to each of the code blocks for better ux

Yes, sounds like a good one. Although I'm not sure where we have code blocks? On the Downloads page? Keep in mind it's probably harder on the book pages, because those are imported from another project.

• Small base font size (14px instead of modern 16px standard)

So you want to increase size? I'm supportive of that.

• Inconsistent line heights
• Mixed unit usage
• No clear type scale system
• Code blocks have relatively small text (line-height: 18px)

Typography in general can use some love. I'm supportive of all these efforts. Although I'm not an expert on the topic.

[dscho]

@Paulie-Aditya I see that the README got deployed to https://paulie-aditya.github.io/git-scm.com/. Could you please switch from "Deploy from a branch" to "GitHub Actions" in your fork's Pages configuration so that the Hugo site from your gh-pages branch gets deployed instead (you will want to push the feature/modernize branch to gh-pages from then on, too)?

[Paulie-Aditya]

@Paulie-Aditya I see that the README got deployed to https://paulie-aditya.github.io/git-scm.com/. Could you please switch from "Deploy from a branch" to "GitHub Actions" in your fork's Pages configuration so that the Hugo site from your gh-pages branch gets deployed instead (you will want to push the feature/modernize branch to gh-pages from then on, too)?

fixed, thanks!

Yes, sounds like a good one. Although I'm not sure where we have code blocks? On the Downloads page? Keep in mind it's probably harder on the book pages, because those are imported from another project.

I'll try and implement on the docs pages, and also on the books pages if I am able to. Other than that there's just one code block in downloads page, which I will implement

Typography in general can use some love. I'm supportive of all these efforts. Although I'm not an expert on the topic.

will be working on the changes listed above asap!

[To1ne]

@Paulie-Aditya The workflow to deploy to GitHub Pages on your fork is quite awkward.

Locally you can keep using branches like normal, and also to create a PR you'll use those branches. Only to deploy things you need to push to gh-pages on your fork. I usually do this with:

git push origin --force HEAD:gh-pages

This pushes HEAD (the current local branch) to gh-pages on your GitHub fork (assuming you have origin as your remote for your fork).

[Paulie-Aditya]

Yeah currently I run the workflow via hugo and node and test out my changes there itself.
I'll have to go at understanding how to properly deploy it via pages

[Paulie-Aditya]

deployment is now working as expected,
made a new fork: https://github.com/Paulie-Aditya/git-scm.com

I'll push some changes today..

[To1ne]

Awesome! I see it working: https://paulie-aditya.github.io/git-scm.com/

Looking forward to that new PR.