deploy: e81c2f0

css/typography.css

@@ -219,3 +219,37 @@ img {
     height: auto;
 }
 
+/* Colour classes */
+.base00 { color: var(--base00); }
+.base01 { color: var(--base01); }
+.base02 { color: var(--base02); }
+.base03 { color: var(--base03); }
+.base04 { color: var(--base04); }
+.base05 { color: var(--base05); }
+.base06 { color: var(--base06); }
+.base07 { color: var(--base07); }
+.base08 { color: var(--base08); }
+.base09 { color: var(--base09); }
+.base0A { color: var(--base0A); }
+.base0B { color: var(--base0B); }
+.base0C { color: var(--base0C); }
+.base0D { color: var(--base0D); }
+.base0E { color: var(--base0E); }
+.base0F { color: var(--base0F); }
+
+.bg-base00 { background-color: var(--base00); }
+.bg-base01 { background-color: var(--base01); }
+.bg-base02 { background-color: var(--base02); }
+.bg-base03 { background-color: var(--base03); }
+.bg-base04 { background-color: var(--base04); }
+.bg-base05 { background-color: var(--base05); }
+.bg-base06 { background-color: var(--base06); }
+.bg-base07 { background-color: var(--base07); }
+.bg-base08 { background-color: var(--base08); }
+.bg-base09 { background-color: var(--base09); }
+.bg-base0A { background-color: var(--base0A); }
+.bg-base0B { background-color: var(--base0B); }
+.bg-base0C { background-color: var(--base0C); }
+.bg-base0D { background-color: var(--base0D); }
+.bg-base0E { background-color: var(--base0E); }
+.bg-base0F { background-color: var(--base0F); }

index.html

@@ -9,7 +9,7 @@
 </code></pre></div><p>Or, if you added it as a git submodule:</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>git submodule update --remote
 </code></pre></div><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> respectively.</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-palettes>Colour palettes</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>Dark</td><td>Background</td><td>Page background</td></tr><tr><td>01</td><td>│</td><td>Alt. background</td><td>Content background</td></tr><tr><td>02</td><td>│</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>│</td><td>Muted text</td><td><code>:before</code> & <code>:marker</code> symbols</td></tr><tr><td>04</td><td>│</td><td>Alt. foreground</td><td>Aside text</td></tr><tr><td>05</td><td>│</td><td>Foreground</td><td>Content text</td></tr><tr><td>06</td><td>│</td><td></td><td></td></tr><tr><td>07</td><td>Light</td><td></td><td></td></tr><tr><td>08</td><td>Red</td><td></td><td></td></tr><tr><td>09</td><td>Orange</td><td></td><td></td></tr><tr><td>0A</td><td>Yellow</td><td>Highlights</td><td>Selected text, <code>&lt;mark></code></td></tr><tr><td>0B</td><td>Green</td><td>Primary accent</td><td>Logo</td></tr><tr><td>0C</td><td>Cyan</td><td>Active links</td><td><code>a:active</code>, <code>a:hover</code></td></tr><tr><td>0D</td><td>Blue</td><td>Links</td><td><code>a:link</code>, <code>a:visited</code></td></tr><tr><td>0E</td><td>Magenta</td><td></td><td></td></tr><tr><td>0F</td><td>Brown</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).
+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><h2 id=favicon>Favicon</h2><p>risotto will automatically use favicons placed in the <code>static/</code> directory.
 The following files will be detected and included in your site&rsquo;s <code>&lt;head></code> section:</p><ul><li><code>favicon.ico</code></li><li><code>favicon-16x16.png</code></li><li><code>favicon-32x32.png</code></li><li><code>apple-touch-icon.png</code></li><li><code>site.webmanifest</code></li></ul><p>You can generate these from an image or emoji using <a href=https://favicon.io/>favicon.io</a> or a similar service.
 They must be placed directly under your site&rsquo;s <code>static/</code> directory, i.e. not in in a subdirectory or <code>themes/risotto/static/</code>.</p><h2 id=acknowledgements>Acknowledgements</h2><p>The &lsquo;cooked rice&rsquo; emoji used as a favicon for the example site was created by the <a href=https://twemoji.twitter.com/>Twemoji project</a> and is licensed under <a href=https://creativecommons.org/licenses/by/4.0/>CC-BY 4.0</a>.</p></section><section class=page__aside><div class=aside__about><div class=aside__about><img class=about__logo src=https://risotto.joeroe.io/images/rice.svg alt=Logo><h1 class=about__title>risotto</h1><p class=about__description>A <a href=https://gohugo.io>hugo</a> theme inspired by terminal ricing.</p></div><ul class=aside__social-links><li><a href=https://github.com/joeroe/risotto rel=me aria-label=GitHub title=GitHub><i class="fa-brands fa-github" aria-hidden=true></i></a>&nbsp;</li><li><a href=mailto:example@example.com rel=me aria-label=Email title=Email><i class="fa-solid fa-envelope" aria-hidden=true></i></a>&nbsp;</li><li><a href=https://orcid.org/0000-0001-2345-6789 rel=me aria-label=ORCID title=ORCID><i class="ai ai-orcid" aria-hidden=true></i></a>&nbsp;</li></ul></div><hr><div class=aside__content></div></section><footer class=page__footer><p></p><br><br><p class=copyright>© <a href=https://joeroe.io>Joe Roe</a> & <a href=https://github.com/joeroe/risotto/graphs/contributors>risotto contributors</a>.</p><p class=advertisement>Powered by <a href=https://gohugo.io/>hugo</a> and <a href=https://github.com/joeroe/risotto>risotto</a>.</p></footer></div></body></html>