24 lines
1 KiB
Markdown
24 lines
1 KiB
Markdown
|
---
|
||
|
|
title: 'custom.css'
|
||
|
|
date: 2024-03-03T03:17:42+01:00
|
||
|
|
---
|
||
|
|
|
||
|
|
Any CSS[^1] customizations are maintained in the `assets/css/custom.css` file.
|
||
|
|
The Hextra theme automatically loads this [custom.css](https://imfing.github.io/hextra/docs/advanced/customization/#custom-css).
|
||
|
|
|
||
|
|
## Colors
|
||
|
|
|
||
|
|
In the Hextra theme, the HSL[^2] representation is used to define the
|
||
|
|
[primary color](https://imfing.github.io/hextra/docs/advanced/customization/#primary-color).
|
||
|
|
However, the values are split into three variables:
|
||
|
|
|
||
|
|
- `--primary-hue`: Hue (deg) value of the primary color.
|
||
|
|
- `--primary-saturation`: Saturation (%) value of the primary color.
|
||
|
|
- `--primary-lighting`: Lightning (%) value of the primary color.
|
||
|
|
|
||
|
|
Thus, to override the default primary color with *Matisse (600)*, for example, a
|
||
|
|
conversion may be necessary. For this task, the W3Schools provides a powerful
|
||
|
|
[colors converter](https://www.w3schools.com/colors/colors_converter.asp).
|
||
|
|
|
||
|
|
[^1]: [CSS](https://en.wikipedia.org/wiki/CSS) in the Wikipedia
|
||
|
|
[^2]: [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) in the Wikipedia
|