From 84ac7fe773b918dab930747e2e32551201698604 Mon Sep 17 00:00:00 2001 From: Saurabh Mishra Date: Wed, 13 Sep 2023 14:34:46 -0700 Subject: [PATCH] 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 --- .../content/docs/advanced/customization.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index 10509464..b412798a 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -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: