Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io). It's built using Tailwind CSS with a clean and minimalist design that prioritises to your content.
This is a simplified set of instructions and assumes a basic understanding of building Hugo sites and installing themes. For detailed instructions, refer to the full [theme documentation](https://jpanther.github.io/congo/docs/).
There are a couple of ways to install the Congo theme into your Hugo website. The git method is the easiest to keep the theme up-to-date, but you can also download and install manually if you don't have git available.
In the root folder of your website, delete the `config.toml` file that was generated by Hugo. Copy the entire `config` folder from `themes/congo/config/` into the root of your website. This will ensure you have all the correct theme settings and will enable you to easily customise the theme.
There are a couple of ways you can make style changes to Congo.
If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
Alternatively, if you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
> **Note:** Building the theme manually is intended for advanced users.
Change into the `themes/congo/` folder and install the project dependencies.
```bash
npm install
```
Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
For example, to change to a green colour scheme, you could apply these changes:
```js
// themes/congo/tailwind.config.js
theme: {
colors: {
transparent: "transparent",
white: colors.white,
gray: colors.gray,
primary: colors.lime,
secondary: colors.teal,
},
...
}
```
For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
After editing the configuration, you need to rebuild the theme's stylesheets.
```bash
npm run build
```
This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`.
To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.
```bash
npm run dev
```
Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website.
If you're able to fix a bug or implement a new feature, I welcome PRs for this purpose. Learn more in the [contributing guidelines](https://github.com/jpanther/congo/CONTRIBUTING.md).
