[Feature] Add Explore CC button and expanding menu on the Navigation Bar

[adidevs]

Description

Adds a button to allow the visitor to navigate to other CC websites

Alternatives

An alternative could be implementing a suitable footer to the website but adding the Explore CC button will improve the UX of the website.

Additional context

It should work in a similar manner as on the CC opensource site.

Implementation

• I would be interested in implementing this feature.

[possumbilities]

@adidevs Hi! and thanks for submitting this! ❤️

Are you meaning to add the button and the entire expanding menu with this, or just the button?

[adidevs]

Hey @possumbilities ! I intend to add the entire expanding menu with the button.

[adidevs]

At it!

[adidevs]

Hey @possumbilities , while working on this issue, I went through the Vocabulary documentation and have deduced two implementation methods.

1. Creating new code for implementing the expanding menu local to this project.

2. Using Vocabulary and simply importing the required CDN and script tag that will implement the Explore-CC menu. But this modifies the CSS that needs to be refactored.

Which approach should I follow? I'd love to have and need your insights on this and if you have any other solution for the same.

[adidevs]

@possumbilities Hi! I went ahead and implemented the 2nd option as it seemed as the most efficient and viable.

Using the CDN does change the CSS but it is limited to the font, size and colour of the text.
After adding the required CSS to style.css, the size and colours are adjusted.

Vocabulary alters the font and it can be modified to stay the same Arial but overall looks better in my opinion.
This solves the issue #49 [Feature] changing font to CC's universal fonts in which you wanted the font to be applied by the Vocabulary migration.

I am attaching the final result below for your reference and please tell me if I should go ahead and submit the PR to apply these changes. Please tell me if you desire any other implementation and I shall work on it!

[justaskulkarni]

That's great work @adidevs.

[tripathics]

@justaskulkarni I was thinking of upgrading the layout of the whole website.
Starting with the navigation bar:

• Update the CC logo to includde archive just like the logo in CC global summit and CC open source page
• For this issue (#68), the second solution already exist on some of the CC websites like CC Search Portal and CC Global Summit

In addition to navigation bar, adding footer to the page would also be nice.

[tripathics]

@possumbilities Hi! I went ahead and implemented the 2nd option as it seemed as the most efficient and viable.

Using the CDN does change the CSS but it is limited to the font, size and colour of the text. After adding the required CSS to style.css, the size and colours are adjusted.

Vocabulary alters the font and it can be modified to stay the same Arial but overall looks better in my opinion. This solves the issue #49 [Feature] changing font to CC's universal fonts in which you wanted the font to be applied by the Vocabulary migration.

I am attaching the final result below for your reference and please tell me if I should go ahead and submit the PR to apply these changes. Please tell me if you desire any other implementation and I shall work on it!

Have you submitted the PR yet?

[adidevs]

Hey @possumbilities ! I went through the conversations and suggestions where you mentioned to use Vocabulary as a visual reference which is similar to the first approach mentioned above. Therefore, I have done the same and created the PR #122

Awaiting your review and that the PR be merged 😁

[adidevs]

@justaskulkarni I was thinking of upgrading the layout of the whole website. Starting with the navigation bar:

• Update the CC logo to includde archive just like the logo in CC global summit and CC open source page
• For this issue (#68), the second solution already exist on some of the CC websites like CC Search Portal and CC Global Summit

In addition to navigation bar, adding footer to the page would also be nice.

Timing! Hey @tripathics , while you were adding to this conversation, I was actually creating the PR for this issue. You can go through the same.

To add to your suggestions regarding this issue, the Explore Menu and could not be added as an import and had to be coded from scratch.

Also, creating a logo for the CC Resource Archive is an approach that resonates with me. I agree to that. You could create a new issue for the same and await feedback from the project maintainers. Cheers!

[Pursottam6003]

Hey everyone I would like to show my design for the home page of resource archive which looks similar to the main page of Creative Commons

Here is the just overview and if I would be assigned to improve the layout i would be very grateful to you @possumbilities