Look and Feel on Sine Die

Color Palette

Sun, 16 Jul 2023 08:07:24 GMT

This theme uses CSS cascading variables.

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).

The hue angle is based on the hsl color space but the color palette is generated using oklch, this make it easier to select a color hue from the HSL Color Wheel while still taking advantage of the benefits that OKLCH provides.

[Truncated]

Theme Colors

Thu, 20 Jul 2023 11:10:15 GMT

Description

By default the theme uses the triadic color scheme (secondary colors angle set to 120deg) with the primary color hue angle set to 250deg.

:root {
 /* Using default values */
 --color-primary-hue: 250deg;
 --colors-secondary-hue-angle: 120deg;
}

Theme Colors (override)

Thu, 20 Jul 2023 08:07:24 GMT

Description

In this example we override the primary color hue angle to 200deg and the secondary colors angle to 330deg to have a Split-Complementary color scheme with left and right inverted.

:root {
 --color-primary-hue: 200deg;
 --colors-secondary-hue-angle: 210deg;
}

You can see the changes right here on this page.

HTML elements

Thu, 20 Jul 2023 08:07:24 GMT

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

This is another paragraph and this paragraph have a link to a footnote 1.

A blockquote paragraph inside a figure element.

[Truncated]