Implement new design

[avive]

Overview

We'd like to implement the new design template for mobile and desktop screens as defined here https://www.figma.com/file/6N662YTOAemCKYAIXzGD63/Karma-Coin-Web-Design-Specs?type=design&node-id=0%3A1&t=yZod89i2HFAlmHax-1 on the existing current content of the Karma Coin Website (main branch).

What you bring

• Experience and skills in building modern professional web sites using modern CSS, React and HTML.
• Familiarity with the Docusaurus framework from past work.

The task

1. Clone this repo and setup a local build env. Run the site locally using yarn start.
2. Create custom css for the layout defined in the reference mocks.
3. Update all html pages found in /src/pages to look according to the reference template on both mobile and desktop using the modified css.
4. Verify that markdown files rendered in the docs section use the new template. e.g. colors, font, etc.
5. Implement dark-mode background and test via the dark-mode button in the main interface.
6. Submit your work as a PR in this repo.

Technical Info

• Font: Lato
• The Karma Coin web site available at https://karmaco.in is built from the repository.
• We use docusaurus framework.
• Docusaurus itself uses react and supports standard html rendering and css (via Infima).
• We use the classic theme and its support for dark and light modes.
• The site contains html pages rendered as react components found at /src/pages as well as markdown files for documentation found in /versioned_docs/version-0.1.0/

Design Templates