Polishing the sidebar menu #88

New Issue

pat-s · 2020-12-03T10:09:38Z

pat-s commented

2020-12-03 10:09:38 +00:00

I've made some opinionated changes to the sidebar CSS.

These changes are in themes/gitea/static/styles/main.css. This file again is auto-generated by hugo and I think builds upon main.css.map from this repo.

So I think the changes need to go in there and would then populate throught to themes/gitea when building the site. I am note fully sure about this though.

Essentially I made some small changes to the line height, coloring, font-size and padding. The final diff would be visible in a PR then.

Here is a screenshot:

And for local testing, here is the CSS block for main.css.

.menu {
  font-size: 1rem;
}
.menu.is-small {
  font-size: 0.85em;
}
.menu.is-medium {
  font-size: 1.25rem;
}
.menu.is-large {
  font-size: 1.5rem;
}

.menu-list {
  line-height: 1;
  font-size: 0.9em;
}
.menu-list a {
  border-radius: 3px;
  color: #34495e;
  display: block;
  padding: 0.5em 0.75em;
}
.menu-list a:hover {
  background-color: #ecf0f1;
  color: #2b3c4e;
}
.menu-list a.is-active {
  background-color: #1abc9c;
  color: #fff;
}
.menu-list li ul {
  border-left: 1px solid #dee2e5;
  margin: 0.75em;
  padding-left: 0.75em;
}

.menu-label {
  color: #1abc9c;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.menu-label:not(:first-child) {
  margin-top: 1em;
}
.menu-label:not(:last-child) {
  margin-bottom: 0.5em;
}

I've made some opinionated changes to the sidebar CSS. These changes are in `themes/gitea/static/styles/main.css`. This file again is auto-generated by hugo and I think builds upon `main.css.map` from this repo. So I think the changes need to go in there and would then populate throught to `themes/gitea` when building the site. I am note fully sure about this though. Essentially I made some small changes to the line height, coloring, font-size and padding. The final diff would be visible in a PR then. Here is a screenshot: [![Screen-Shot-2020-12-03-at-10-51-16-AM.png](https://i.postimg.cc/3J00m9Jj/Screen-Shot-2020-12-03-at-10-51-16-AM.png)](https://postimg.cc/qz07dsKg) And for local testing, here is the CSS block for `main.css`. ```css .menu { font-size: 1rem; } .menu.is-small { font-size: 0.85em; } .menu.is-medium { font-size: 1.25rem; } .menu.is-large { font-size: 1.5rem; } .menu-list { line-height: 1; font-size: 0.9em; } .menu-list a { border-radius: 3px; color: #34495e; display: block; padding: 0.5em 0.75em; } .menu-list a:hover { background-color: #ecf0f1; color: #2b3c4e; } .menu-list a.is-active { background-color: #1abc9c; color: #fff; } .menu-list li ul { border-left: 1px solid #dee2e5; margin: 0.75em; padding-left: 0.75em; } .menu-label { color: #1abc9c; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; } .menu-label:not(:first-child) { margin-top: 1em; } .menu-label:not(:last-child) { margin-bottom: 0.5em; } ```

lunny commented

2020-12-03 10:23:40 +00:00

Could you give an old photo also, so that we can compare them.

lunny added the

kind/proposal

label 2020-12-03 10:24:33 +00:00

pat-s commented

2020-12-03 10:28:47 +00:00

Not sure if this way of comparing screenshots gives the full picture - having them side-by-side in two browsers locally might be better. But you see the reduced line-height and fonts, leading to a shorter sidebar compared to the content.

Current

Not sure if this way of comparing screenshots gives the full picture - having them side-by-side in two browsers locally might be better. But you see the reduced line-height and fonts, leading to a shorter sidebar compared to the content. ## Current [![Screen-Shot-2020-12-03-at-11-26-32-AM.png](https://i.postimg.cc/gjjmGs4B/Screen-Shot-2020-12-03-at-11-26-32-AM.png)](https://postimg.cc/2bsPw4s4)

👍 2

pat-s referenced this issue

2020-12-07 06:49:55 +00:00

Optimize sidebar appearance #91

pat-s commented

2020-12-08 07:13:56 +00:00

Fixed in #91.

pat-s closed this issue

2020-12-08 07:13:56 +00:00

This repo is archived. You cannot comment on issues.