deploy: 20b6cd7

index.html

@@ -13,7 +13,7 @@
 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>.
 For example:</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-html data-lang=html>&lt;<span style=color:#f92672>span</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;base0A&#34;</span>&gt;Yellow text&lt;/<span style=color:#f92672>span</span>&gt;
-&lt;<span style=color:#f92672>mark</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;base0D&#34;</span>&gt;Text highlighted in green&lt;/<span style=color:#f92672>mark</span>&gt;
+&lt;<span style=color:#f92672>mark</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;bg-base0D&#34;</span>&gt;Text highlighted in green&lt;/<span style=color:#f92672>mark</span>&gt;
 </code></pre></div><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><span class=about__logo role=img>🍚</span>&nbsp;<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>