KnackSteem new UI implementation

Repository

https://github.com/knacksteem/knacksteem.org

Pull request for this feature: https://github.com/knacksteem/knacksteem.org/pull/31

New Features

This change implements the first phase of a redesign of the front-end of the KnackSteem.org web client, as requested by this task. The KnackSteem team had previously gotten a proposal designed by @outwork of a new UI for the site. The output of that designer's work was a Photoshop (PSD) rendering of the new design. This work implements that design into the HTML, CSS, and Javascript of the site, for the existing pages.

• Overall site structure change from being a two-column layout with the left sidebar flush to the left edge of the browser and collapsing down on mobile to being a two-column layout floating in the middle (left/right) of the browser window, plus a footer band along the bottom. This was a large change, touching many different parts of the React templates and CSS governing the site's overall structure. Additionally, required creating a new version of the KnackSteem logo to work well on the new header/footer background colors.
• Addition of Font Awesome icon font into the site, and utilized it in the left sidebar as icons for the main navigation links.
• Added user information box to the left sidebar, showing information about the logged-in user, pulling in display name and cover image, which had not been utilized previously.
• Added navigation routes and placeholder pages for static content pages to be filled in by the KnackSteem team, including "How it works", "About us", "Contribute", "Contact", "Guidelines", "FAQ", and "Terms of Service".

Home page

Home page before UI update:

Home page after:

Home page, with a narrow width, showing how the elements compress down for narrower screens:

Article view

Example individual article view before UI update:

Individual article view after:

Development progress

Some in-progress views of this development:

GitHub Account

https://github.com/MidnightLightning