https://sinetris.github.io/sine-die/topics/docs/look-and-feel/Recent content in Look and Feel on Sine DieSine Die theme for HugoDuilio Ruggieroduilio@sinetris.info© 2023 - 2026, Duilio Ruggiero2026-04-09T07:46:34Z2023-07-16T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/palette/#atom

<p>This theme uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables" rel="external" title="CSS custom properties for cascading variables">CSS cascading variables</a>.</p> <p>The color palette uses a three-color combination and allows to set the primary color hue angle and the left and right secondary colors hue angle (respectively adding and subtracting from the primary hue angle).</p> <p>The hue angle is based on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl" rel="external" title="hsl()">hsl</a> color space but the color palette is generated using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch" rel="external" title="oklch()">oklch</a>, this make it easier to select a color hue from the HSL <a href="/sine-die/glossary/color-wheel/">Color Wheel</a> while still taking advantage of the benefits that OKLCH provides.</p>

2023-07-20T11:10:15+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/colors/#atom

<h2 id="description">Description</h2> <p>By default the theme uses the <strong>triadic color scheme</strong> (<em>secondary colors angle</em> set to <code>120deg</code>) with the <em>primary color hue</em> angle set to <code>250deg</code>.</p> <pre><code>:root { /* Using default values */ --color-primary-hue: 250deg; --colors-secondary-hue-angle: 120deg; }</code></pre>

2023-07-20T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/colors-override/#atom

<h2 id="description">Description</h2> <p>In this example we override the <strong>primary color hue</strong> angle to <code>200deg</code> and the <strong>secondary colors angle</strong> to <code>330deg</code> to have a <strong>Split-Complementary color scheme</strong> with left and right inverted.</p> <pre><code>:root { --color-primary-hue: 200deg; --colors-secondary-hue-angle: 210deg; }</code></pre> <p>You can see the changes right here on this page.</p>

2023-07-20T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/html-elements/#atom

<h1 id="heading-1">Heading 1</h1> <h2 id="heading-2">Heading 2</h2> <h3 id="heading-3">Heading 3</h3> <h4 id="heading-4">Heading 4</h4> <h5 id="heading-5">Heading 5</h5> <h6 id="heading-6">Heading 6</h6> <p>This is a paragraph with random content. Duis ut tempor mollit nisi exercitation et incididunt occaecat tempor aute ex cupidatat exercitation. Eiusmod incididunt ut enim sint pariatur. Tempor minim adipisicing quis Lorem sint sunt anim velit esse pariatur laborum.</p> <p>This is another paragraph and this paragraph have a link to a footnote <a href="/sine-die/">1</a>.</p> <blockquote> <p>A blockquote paragraph inside a figure element.</p> </blockquote>