Skip to content
/ risotto Public

A minimalist, responsive hugo theme inspired by terminal ricing aesthetics.

License

Notifications You must be signed in to change notification settings

joeroe/risotto

Repository files navigation

🍚 risotto

risotto is a minimalist, responsive hugo theme inspired by terminal ricing aesthetics.

Hugo Themes Version hugo build status W3C Validation Code size

Screenshot of the risotto theme

Features

  • Plain, semantic HTML with no Javascript
  • Plain CSS – no frameworks, no preprocessors, just simple and easy-to-customise stylesheets
  • Uses CSS Grid for native responsive behaviour without arbitrary breakpoints
  • Comes with 16 built-in colour schemes based on popular terminal themes plus the ability to use custom themes using the base16 system

Install

The easiest way to install the theme is to download the latest release and extract it to your project's themes/ directory. You can also clone this repository into your site's themes directory and checkout the latest release:

git clone https://github.com/joeroe/risotto themes/risotto && cd themes/risotto
git checkout $(git tag -l | grep '^v[0-9.]*$' | sort -V | tail -n 1)

Note that this will not work if your site is itself a git repository. In that case, you can add the theme as a git submodule, but this is not recommended due to the difficulty of tracking a specific release.

Update

If you installed the theme using git clone, pull the repository to get the latest version:

cd themes/risotto
git pull

Otherwise, simply download the latest release and extract it to your project's themes/ directory, replacing the old version.

Configure

To use the theme, add theme = 'risotto' to your site's hugo.toml, or theme: risotto to your hugo.yaml.

See exampleSite/config.toml for the theme-specific parameters you need to add to your site's hugo.toml or hugo.yaml to configure the theme.

Colour schemes

risotto uses the base16 framework to define colour schemes that can be used with the theme.palette parameter. A selection of 16 palettes (10 dark, 6 light) are bundled with the theme: apprentice, base16-dark, base16-light, dracula, gruvbox-dark, gruvbox-light, material, papercolor-dark, papercolor-light, solarized-dark, solarized-light, tender, tokyo-night-dark, tokyo-night-light, windows-95 and windows-95-light. The default is base16-dark.

The easiest way to use other base16 styles is to place .css file from https://github.com/monicfenga/base16-styles/tree/master/css-variables and place it in your static/css/palettes directory.

Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see base16-dark.css for an example):

Base Default colour Used for Examples
00 Dark Background Page background
01 Alt. background Content background
02 In-text backgrounds <pre>, <code>, <kbd>, <samp>
03 Muted text :before & :marker symbols
04 Alt. foreground Aside text
05 Foreground Content text
06
07 Light
08 Red
09 Orange
0A Yellow Highlights Selected text, <mark>
0B Green Primary accent Logo
0C Cyan Active links a:active, a:hover
0D Blue Links a:link, a:visited
0E Magenta
0F Brown

For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light). Note that not all colours are currently used in the theme.

You you use these colours directly in content using the convenience classes .baseXX and .bg-baseXX. For example:

<span class="base0A">Yellow text</span>
<mark class="bg-base0D">Text highlighted in green</mark>

Favicon

risotto will automatically use favicons placed in the static/ directory. The following files will be detected and included in your site's <head> section:

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • site.webmanifest

You can generate these from an image or emoji using favicon.io or a similar service. They must be placed directly under your site's static/ directory, i.e. not in in a subdirectory or themes/risotto/static/.

Acknowledgements

The 'cooked rice' emoji used as a favicon for the example site was created by the Twemoji project and is licensed under CC-BY 4.0.