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 <[email protected]>
imfing · Sep 13, 2023 · 84ac7fe · 84ac7fe
1 parent a184cfd
commit 84ac7fe
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md
@@ -10,14 +10,28 @@ 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 {
   font-family: "Times New Roman", Times, serif;
 }
 ```
 
+### 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: