docs: add example for customizing css for inline code element (#55)

* discussion #40

* discussion #46

* corrected Go code

* removed code block section

* changed heading to 'Inline Code Element'

---------

Co-authored-by: Saurabh Mishra <saurabh.m@mailfence.com>
This commit is contained in:
Saurabh Mishra 2023-09-13 14:34:46 -07:00 committed by GitHub
parent a184cfd41e
commit 84ac7fe773
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -10,7 +10,11 @@ This page describes the available options and how to customize the theme further
## Custom CSS
To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file. For example, customize the font family of the content:
To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file.
### Font Family
The font family of the content can be customized using:
```css {filename="assets/css/custom.css"}
.content {
@ -18,6 +22,16 @@ To add custom CSS, we need to create a file `assets/css/custom.css` in our site.
}
```
### Inline Code Element
The color of text mixed with `other text` can customized with:
```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) {
color: #c97c2e;
}
```
### Primary Color
The primary color of the theme can be customized by setting the `--primary-hue` variable: