Task request for Utopian.rocks - Responsiveness and improved filtering

^{Credit to @podanrj}
https://utopian.rocks/

Repository

https://github.com/amosbastian/utopian.rocks

Skills needed

To complete this task you will probably need some knowledge of:

• SCSS
• JavaScript
• HTML
• Python and Flask (maybe)

The task

About a week ago I updated Utopian.rocks' style and tried making it responsive. I failed a bit. When using it on mobile you have to zoom out to see everything, which isn't ideal. After spending a lot of time on trying to improve it I finally gave up and decided it would be better to ask for help instead.

Another thing problem was that I added a category filter a couple of days ago as well, which made it even less responsive.

In the meantime I also got a request to add the ability to filter based on the user that published the post or by keywords in the title. This means that this task covers the following two things:

• Add an input field that allows users to search by author, repository and title. It would be great if the user could do this by typing something like "author:amosbastian".
• Make everything responsive. Since part of this task is implementing the filter, which should obviously also be responsive, I'll leave it up to you to decide where exactly the input field should be. The only thing you should keep in mind is that the general style is inspired by GitHub's so you can make it look similar to theirs.

Components

For making everything responsive you will more than likely have to edit the following files:

• base.scss
• contributions.scss
• header.scss
• footer.scss
• 404.scss
• category.scss

and maybe the associated HTML files. For adding the input field and filtering you will more than likely need to edit the following files:

• index.html
• queue.html
• comments.html
• utils.js
• app.py (maybe)

If it's possible I would like the filtering to be done with JavaScript. However, if this isn't possible, then I don't mind if it is implemented using Python and Flask, but that will probably require a bit more work.

Deadline

I would like to see the task fulfilled within two weeks of the creation of this post.

Communication

I've updated the the README, which should include enough information to get everything up and running locally. Once you have done that, or are having trouble with the instructions, then you can contact me on Discord at Amos#4622.

---

I hope everything is clear, but if something isn't then please ask for clarification in the comments or on Discord!