Pull request for this feature: https://github.com/knacksteem/knacksteem.org/pull/31
- 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 before UI update:
Home page after:
Home page, with a narrow width, showing how the elements compress down for narrower screens:
Example individual article view before UI update:
Individual article view after:
Some in-progress views of this development: