Improves UI for the category filters and makes the page responsive

[Murdock9803]

Fixes

• Fixes [Feature] UI refinement of the website #72 by @tusharbansal22
• Fixes [Feature] change the user interface of the home-page #61 by @RishabhRajJoshi
• Fixes [Feature] Adding a trailing icon on filter text (topic name) and removing existing bracket and text  #119 by @sj-jain
• Fixes [Bug] html markup contains inline styles #311 by @possumbilities
• Fixes [Bug] Remove Extra White Space Between Main Content and Footer #314 by @nandu-99
• Fixes [Bug] Improve Mobile View Layout for Topic and Medium Columns #313 by @nandu-99
• Fixes [Bug] Use checkbox for the resourcenavtopicknown #52 by @tinniaru3005

Description

The Pull Request mainly aims at improving the user interface for the category filters situated at the index.html and the all.html pages. The PR makes them as a sidebar, also works on the responsiveness of the whole pages.
The PR solves many issues as most of them are co-related.

Technical details

The pull request:

• adds semantic html to index.html and all.html
• removes the filters from index.html
• removes inline styles from html pages.
• adds a new context to listing.html
• works on the see-all-resources link
• adds checkbox in place of [x] in category filters.
• makes the filters as a sidebar
• makes the whole category filters responsive
• Re-works on the media-query breakpoints
• formats the code with prettier code formatter
• adds documentation for the index.html, all.html and style.css files.

Screenshots

The new look is like following in different widths:

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main or master).
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no
  visible errors.

Developer Certificate of Origin

For the purposes of this DCO, "license" is equivalent to "license or public domain dedication," and "open source license" is equivalent to "open content license or public domain dedication."

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[Murdock9803]

@possumbilities Please have a look at the Pull Request 🙌
I'll update the Documentation in index.html and all.html pages in some time.

[possumbilities]

This shouldn't be an h3, and should appear below the thumbnail listing; since it would act as a "see more" link to load more items in the listing.

[Murdock9803]

I have updated the code, and made this to be an <a> tag, located below Thumbnaillist.

[possumbilities]

@Murdock9803 After seeing this in action I believe a better route of UX improvement would be not including the filters at all on the index. There are only a handful of items and filtering them seems useless.

However, once we dive down into the all page then it becomes relevant and useful to provide filtering routes to narrow the plethora of results.

[Murdock9803]

@possumbilities This makes perfect sense 🙌
So for this we should also change the text which appears just below the heading on homepage. I have looked upon the review above, and also the comment. I'll push the needful changes in some time 🙌

@Murdock9803 After seeing this in action I believe a better route of UX improvement would be not including the filters at all on the index. There are only a handful of items and filtering them seems useless.

However, once we dive down into the all page then it becomes relevant and useful to provide filtering routes to narrow the plethora of results.

[possumbilities]

Looks and works great! Approved.