Font in top menu not elegant

[martinheidegger]

Currently the font in the top menu looks like this:

However, in previous designs that did not have a brutal font, no uppercase letters, a smaller size and better spacing: https://github.com/consento-org/consento-website/issues/11#issuecomment-581209409

[Torgian]

My mistake, I overlooked this even though it's in the new design. Note: WorkSans-Medium, 21px, 27px line height, rgba(70,70,70,0.87)

[Torgian]

@martinheidegger for these, do you want them to turn red on hover, or change opacity? For now I will switch to changing opacity, but it can be reversed to turning red if you want.

[Torgian]

Screenshots below, please close / comment as necessary. Commit Link

I had to add media queries for the nav bar so that nothing went off screen or overlapped. First screen is from tablet mode.

[martinheidegger]

The spacing looked weird to me so I measured it in the browser and compared it to the design:

---

---

→ Then I looked in the css spec and found a specified letter-spacing:

---

---

→ Changing it to 0 was much closer to the actual design:

---

---

→ I also noticed some vertical alignment differences:

---

---

→ Which is probably a little harder to get right, but somehow the balance seems off. Maybe adjust the padding a little?

---

Furthermore I wondered if the colors are off. The screenshot was a bit blurry and the background darker, but after investigation...

---

---

→ ... it turns out the colors are off indeed. The design had #000 while the web color is #3D444A. So I looked into the CSS again and it turns out that you did set the color correctly:

https://github.com/consento-org/consento-website/blob/19622aec98b8eb69d1eb00bb16e22bd2676e8500/partials/navigation.hbs#L11

but the menu.sass file defines in a stronger selector (.menu-item a is weaker than #menu ul a) the color as inherit:

https://github.com/consento-org/consento-website/blob/19622aec98b8eb69d1eb00bb16e22bd2676e8500/assets/main/sass/layout/_menu.scss#L23

....which means that the color of the menu list is used instead of the color of the list item:

https://github.com/consento-org/consento-website/blob/19622aec98b8eb69d1eb00bb16e22bd2676e8500/assets/main/sass/layout/_menu.scss#L12

... it looks like #42 is the issue that should be solved first: Move all the design back into the sass file and generate one common CSS file that is used. It might even be helping with #43.

---

Also in regards to the colors: The button color is blue (#008BDC) in @marcchataigner's design and not consento-blue. Which is probably on purpose :wink:.

---

One last thing to mention about the button, in the design's vertical/horizontal ratio is closer to rectangular and vertically centered:

This is a common webdesign problem that can be solved either the hard way, by adjusting every vertical layout by hand - which can be impossible for some devices as the font-rendering is different, or it can be solved using flexbox

[Torgian]

I am going to review this right now. Since we made some changes yesterday with the css migration, it may have affected this issue.

[Torgian]

It appears the design problems are still there, so I will start working on this.

[Torgian]

Please refer to PR 61

I made a couple of minor changes. This seems to have fixed some spacing issues.

[Torgian]

[Torgian]

[martinheidegger]

This seems to have fixed some spacing issues.

Looking forward to all issues fixed.

[Torgian]

@consento-org/design I need confirmation on the button colors. In Zeplin, the border colors are #2989d6, and the text is rgba(9, 120, 208, 0.87) ( or hex #0978D0 ) Is this correct, or do the colors need to be one or the other?

[marcchataigner-zz]

@Torgian on the zeplin file, I see that the blue is the consent-blue : #37afc9 for buttons (the test your privacy level, be the first to use it, etc. Is it the color you are looking for?

[Torgian]

Oh, my mistake. I meant the Download button in the navigation menu.

[marcchataigner-zz]

Ah, I see. The way it runs now in the write.georepublic.net, it looks good to me. The blue edge is slightly darker than the filled in blue shade when the mouse over comes, and it is the correct dynamic for me. :-)

[marcchataigner-zz]

Only maybe that I look at it, the download label could be aligned in height with the button center, like you have in other buttons. Thee text can be 1 or 2 px down. But this is not a key requirement, just optical illusion fun :-D

[Torgian]

Yes, I'm working on this right now actually. I started by removing the download_btn class and adding things one by one. When I remove it, everything is centered:

I narrowed it down to the culprit: It's the font. If I remove all the styling, and change the font to Catamaran-SemiBold, it looks off-center ( by exactly one pixel. ) It's annoying.

I've tried a few simple fixes, but it ends up changing the overall look of the button.

No styling ( other than default styling from ghost / bootstrap ): 20 px top and bottom.

Change the font :

Keep in mind that bootstrap automatically aligns text in buttons to the middle ( it's part of the .btn class )

[Torgian]

Fixed. Refer to this commit While the font family changes how the text is spaced, the font size also plays a part. I found that it was being over-ridden by ghost's base styling, so I added the !important tag and reduced the font size by one. This gives it a centered appearance.