Skip to content

Commit

Permalink
deploy: 03107cd
Browse files Browse the repository at this point in the history
  • Loading branch information
joeroe committed Feb 14, 2024
1 parent e8402fa commit ea6106d
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</code></pre></div><p>Note that this will not work if your site is itself a git repository.
In that case, you can add the theme as a <a href=https://git-scm.com/book/en/v2/Git-Tools-Submodules>git submodule</a>, but this is not recommended due to the difficulty of tracking a specific release.</p><h2 id=update>Update</h2><p>If you installed the theme using <code>git clone</code>, pull the repository to get the latest version:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>cd themes/risotto
git pull
</code></pre></div><p>Otherwise, simply <a href=https://github.com/joeroe/risotto/releases/tag/release>download the latest release</a> and extract it to your project&rsquo;s <code>themes/</code> directory, replacing the old version.</p><h2 id=configure>Configure</h2><p>To use the theme, add <code>theme = 'risotto'</code> to your site&rsquo;s <code>config.toml</code>, or <code>theme: risotto</code> to your <code>config.yaml</code>.</p><p>See <code>exampleSite/config.toml</code> for the theme-specific parameters you need to add to your site&rsquo;s <code>config.toml</code> or <code>config.yaml</code> to configure the theme.</p><h3 id=colour-schemes>Colour schemes</h3><p>risotto uses the <a href=https://github.com/chriskempson/base16>base16 framework</a> to define colour schemes that can be used with the <code>theme.palette</code> parameter.
</code></pre></div><p>Otherwise, simply <a href=https://github.com/joeroe/risotto/releases/tag/release>download the latest release</a> and extract it to your project&rsquo;s <code>themes/</code> directory, replacing the old version.</p><h2 id=configure>Configure</h2><p>To use the theme, add <code>theme = 'risotto'</code> to your site&rsquo;s <code>hugo.toml</code>, or <code>theme: risotto</code> to your <code>hugo.yaml</code>.</p><p>See <code>exampleSite/config.toml</code> for the theme-specific parameters you need to add to your site&rsquo;s <code>hugo.toml</code> or <code>hugo.yaml</code> to configure the theme.</p><h3 id=colour-schemes>Colour schemes</h3><p>risotto uses the <a href=https://github.com/chriskempson/base16>base16 framework</a> to define colour schemes that can be used with the <code>theme.palette</code> parameter.
A selection of 16 palettes (10 dark, 6 light) are bundled with the theme: <code>apprentice</code>, <code>base16-dark</code>, <code>base16-light</code>, <code>dracula</code>, <code>gruvbox-dark</code>, <code>gruvbox-light</code>, <code>material</code>, <code>papercolor-dark</code>, <code>papercolor-light</code>, <code>solarized-dark</code>, <code>solarized-light</code>, <code>tender</code>, <code>tokyo-night-dark</code>, <code>tokyo-night-light</code>, <code>windows-95</code> and <code>windows-95-light</code>.
The default is <code>base16-dark</code>.</p><p>The easiest way to use other base16 styles is to place .css file from <a href=https://github.com/monicfenga/base16-styles/tree/master/css-variables>https://github.com/monicfenga/base16-styles/tree/master/css-variables</a> and place it in your <code>static/css/palettes</code> directory.</p><p>Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see <a href=blob/main/static/css/palettes/base16-dark.css>base16-dark.css</a> for an example):</p><table><thead><tr><th>Base</th><th>Default colour</th><th>Used for</th><th>Examples</th></tr></thead><tbody><tr><td>00</td><td><span class=base00>Dark</span></td><td>Background</td><td>Page background</td></tr><tr><td>01</td><td><span class=base01></span></td><td>Alt. background</td><td>Content background</td></tr><tr><td>02</td><td><span class=base02></span></td><td>In-text backgrounds</td><td><code>&lt;pre></code>, <code>&lt;code></code>, <code>&lt;kbd></code>, <code>&lt;samp></code></td></tr><tr><td>03</td><td><span class=base03></span></td><td>Muted text</td><td><code>:before</code> & <code>:marker</code> symbols</td></tr><tr><td>04</td><td><span class=base04></span></td><td>Alt. foreground</td><td>Aside text</td></tr><tr><td>05</td><td><span class=base05></span></td><td>Foreground</td><td>Content text</td></tr><tr><td>06</td><td><span class=base06></span></td><td></td><td></td></tr><tr><td>07</td><td><span class=base07>Light</span></td><td></td><td></td></tr><tr><td>08</td><td><span class=base08>Red</span></td><td></td><td></td></tr><tr><td>09</td><td><span class=base09>Orange</span></td><td></td><td></td></tr><tr><td>0A</td><td><span class=base0A>Yellow</span></td><td>Highlights</td><td>Selected text, <code>&lt;mark></code></td></tr><tr><td>0B</td><td><span class=base0B>Green</span></td><td>Primary accent</td><td>Logo</td></tr><tr><td>0C</td><td><span class=base0C>Cyan</span></td><td>Active links</td><td><code>a:active</code>, <code>a:hover</code></td></tr><tr><td>0D</td><td><span class=base0D>Blue</span></td><td>Links</td><td><code>a:link</code>, <code>a:visited</code></td></tr><tr><td>0E</td><td><span class=base0E>Magenta</span></td><td></td><td></td></tr><tr><td>0F</td><td><span class=base0F>Brown</span></td><td></td><td></td></tr></tbody></table><p>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.</p><p>You you use these colours directly in content using the convenience classes <code>.baseXX</code> and <code>.bg-baseXX</code>.
Expand Down

0 comments on commit ea6106d

Please sign in to comment.