Repo homepage styling tweaks

[silverwind]

Reduce it to a value that results in .repo-home-sidebar-top and .repo-home-sidebar-bottom having 240px content width, the same as GitHub.

Before:

After:

[silverwind]

Adding backport as I would like to have this in 1.23, and it's a stylistic change only.

[yp05327]

having 240px content width, the same as GitHub.

For my case, it is around 300px in GitHub.

[lunny]

having 240px content width, the same as GitHub.

For my case, it is around 300px in GitHub.

Same for me.

[wxiaoguang]

For my case, it is around 300px in GitHub.

Same for me.

Same for me.

[silverwind]

Huh, mine is definitely 240px, even if I zoom out. Same for issue sidebar btw (I will tackle that in Gitea in another PR).

[silverwind]

Ah, I see the 240px comes from a userstyle of mine that sets --Layout-sidebar-width: 240px. Still I think 300px is too much and slightly smaller look better.

[yp05327]

It seems that it is related to the screen size:

I prefer this.

[silverwind]

Yes, that makes sense. On a small screen like mine, 300px is too much. On big screen, it's ok. I will add a CSS variable, WIP until then.

[silverwind]

I ended up just matching GitHub's 296px now, e.g. 4px smaller sidebar now.

Also I changed padding to gap, using the CSS variable, so spacing is now 2px larger.

Minor, but still worth a backport imho 😉

[silverwind]

Added a CSS variable for it and used it on issue sidebar as well which was also 300px.

[yp05327]

The width in GitHub does not include the padding space, but Gitea side does.
Actually, for my case, the current width is 286px, which is 10px smaller than GitHub.

So it is not reduce but increase (in title) for my case. 😂

[silverwind]

How come it's 286px for you? The CSS variable is 296px for me and that matches the rendering:

The width in GitHub does not include the padding space, but Gitea side does.

No, the width you see in the devtools is always without padding, so content width was 300 before, is now 296. In any case, this PR removes the padding in favor of gap.

[yp05327]

How come it's 286px for you?

It is the width in main branch, not from this PR.
In this PR, I also get 296px 😃

So it is not reduce but increase (in title) for my case. 😂

[silverwind]

You're right. Main branch content width is 300px - 1rem, which is 286px.

[yp05327]

Maybe this screenshot can simply explain it.
The upper is this PR and the lower is Gitea.com

[silverwind]

Let's just call the PR an adjustment then:

• Sidebar content width in repo goes from 286px to 296px
• Sidebar width in issue goes from 300px to 296px (still has padding)

Would have liked to go a bit lower, but the issue sidebar does not work well with lower values, so I guess best is to keep the width and keep them the same.

[silverwind]

Added one more tiny change: Remove margin on top of these elements. Other tab contents also did not have this margin, so tab switching to issue list looks better now.

[silverwind]

Ah I think it's actually not a good idea to couple these sidebars just yet because one has padding and the other not. So I ended up reverting and reducing the sidebar width very slightly from 286px to 280px.

[hiifong]

When the window's width is less than 1000px or so, the width of GitHub's sidebar will be 240px.

I think we can add a media query to keep the same width as GitHub.

[silverwind]

When the window's width is less than 1000px or so, the width of GitHub's sidebar will be 240px.

No, as you showed in #33289 (comment), they only downsize it starting at 768px width, but at that breakpoint, gitea switches to single-column layout, so there is no point at altering the size at 768px.