Added CTA slim banner for updates page above navigation header

[pandafy]

Description

While browsing the website, I was not able to find how to get to the updates page. I remembered visiting the page from a post on Twitter. It does not feel right in my opinion to have a page as important as updates hidden from the users. I had to find the post on Twitter just to share this page with others, Let's save other users from such hassle.

Test process

• I have tested the changes visually

I was not able to find tests for elements on static website. I would like to add them if you can point me where they are. Thanks!

Requirements to merge

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[MattIPv4]

👋 Thanks for the change -- our plan was actually to add a slim CTA banner above the navigation that was dedicated to informing users about the changes, including a link to the updates post (I realise there isn't an issue for this yet, hadn't made it from our internal planning doc during the chaos over the last few days).

If you want to update this PR to implement that instead of adding it to the nav, that'd be great! If not, our team can jump on it this coming week.

[pandafy]

Thanks for you input Matt!

a slim CTA banner above the navigation

I would like to complete this PR but I don't have the exact idea from UI perspective, how it should look. It will be helpful it you can share any design document you folk have created for that. Otherwise, I would have to take a jab at it and create something which makes sense. Any references to implementation on other websites will also work,

[MattIPv4]

I'm absolutely not a designer and I don't see anything in our Figma file at present, so I think you can just take a stab at it -- here's a quick idea I mocked:

(The Hacktoberfest is now officially opt-in only for projects and maintainers copy is what has been requested from our team -- the banner should show on all pages and link to the update post page)

Thanks again! :)

[pandafy]

How does it look @MattIPv4?

Also these lines does makes sense to me
https://github.com/digitalocean/hacktoberfest/blob/deb1961a50db165a54342dad506d24caa264f3d3/app/assets/stylesheets/header.scss#L17-L20

I referenced MDN and it does not seems the right way to define values to padding-inline-start property. Can you help me with this, I think this line could be removed.

[MattIPv4]

Thanks!

[pandafy]

Thanks for the detailed review @MattIPv4. Do you think we can keep "Updates" tab on navigation header? I know it seems redundant, but on updates page, user seems unaware of where there at from navigation header. We can either selectively show that Updates tab in header only on updates page. What do you think?

[MattIPv4]

@pandafy sorry for the delayed response -- yes, welcome to also add a nav item, and yes, might as well remove that bad css in this PR!

[pandafy]

No hurries @MattIPv4 😉
I have added nav item for Updates page and removed bad CSS in new commit. 😄

[MattIPv4]

There is a gap that appears between the banner and the header on the homepage:

Updating the offsets in .home-hero to 160px seems to fix this.

---

We should use a smaller font size for the banner, 0.875rem seems to be good:

---

For the hover state on dark/light, can we add underline to the main text:

---

For light mode hover, can we use #542247 for the text?

---

For dark mode hover, can we use #2E4C5E for the text?

[pandafy]

I don't know how that gap sneaked passed my self-review. I have fixed that. 😅

I really like the idea of having text underlined on hover of link, it really fills up the lack of colour contrast between normal and hover colours. Did you aim for subtle colour shifts for hover event?

[MattIPv4]

Yeah, those colors were supplied by our design team -- this all looks good to me, just waiting for internal approval before we merge :)

[MattIPv4]

Lgtm, thank you very much! 💙